方教程：http://pyecharts.herokuapp.com/

pyecharts 是一個(gè)用于生成 Echarts 圖表的類庫(kù)。Echarts 是百度開(kāi)源的一個(gè)數(shù)據(jù)可視化 JS 庫(kù)。用 Echarts 生成的圖可視化效果非常棒，為了與 Python 進(jìn)行對(duì)接，方便在 Python 中直接使用數(shù)據(jù)生成圖。

繪圖步驟：

from pyecharts import Chart,configure             #導(dǎo)入所需繪圖函數(shù)
configure(output_image=True)                      #可以將圖表保存為svg/jpeg/png/pdf/gif    
chart = Chart('主標(biāo)題','副標(biāo)題')                  #Chart是我們繪圖函數(shù)
attr = ['x1','x2','x3','x4']                      #attr是屬性，也就是常見(jiàn)的X軸標(biāo)簽
v = [y1,y2,y3,y4]                                 #v是各個(gè)屬性對(duì)應(yīng)的值，也就是常見(jiàn)的Y值
chart.use_theme()                                 #設(shè)置圖表主題                
chart.add('圖標(biāo)',attr,v1)                         #add畫圖圖層，添加我們所需的參數(shù)
chart.render(path = '***.jpeg')                   #圖表輸出,path是輸出路徑

render會(huì)默認(rèn)將圖表輸出為html格式，可在瀏覽器打開(kāi)。但是想要插入到ppt當(dāng)中，清晰度會(huì)下降，因此需要將其轉(zhuǎn)化為其他格式，如svg/jpeg/png/pdf/gif 等等。要實(shí)現(xiàn)格式的轉(zhuǎn)換，需要安裝：

• Nodejs
• $ npm install -g phantomjs-prebuilt
• $ pip install pyecharts-snapshot

常用的參數(shù)（可以在add()中設(shè)置，實(shí)現(xiàn)各種需求）：

• is stack：是否堆積
• is convert：x,y軸是否交換
• is_legend_show:是否顯示圖例
• legend_orient：圖列方向，有'horizontal'（默認(rèn)水平顯示），'vertical'（垂直）可選
• legend_pos：圖例位置，有'left', 'center'（默認(rèn)）, 'right'可選
• legend_text_size/color：圖例名稱字體大小/顏色
• is_x/yaxis_show：是否顯示x/y軸
• x/yaxis_interval：x/y軸標(biāo)簽的顯示間隔
• x/yaxis_min/max：x/y軸刻度最小值/最大值
• x/yaxis_label_textsize/textcolor：x/y軸標(biāo)簽字體大小/顏色
• xaxis_rotate：x軸標(biāo)簽旋轉(zhuǎn)角度
• is_splitline_show：是否顯示網(wǎng)格線
• is_label_show：是否顯示標(biāo)簽
• label_pos：標(biāo)簽的位置，有'top'(默認(rèn)), 'left', 'right', 'bottom', 'inside','outside'可選
• label_text_color/size：標(biāo)簽字體顏色/大小
• is_random：是否隨機(jī)排列顏色列表
• label_color：自定義標(biāo)簽顏色
• mark_point/line：標(biāo)記點(diǎn)/線，默認(rèn)有'min', 'max', 'average'可選。可自定義標(biāo)記點(diǎn)線，具體格式如：[{'coord': [x, y], 'name': '目標(biāo)標(biāo)記點(diǎn)'}]，記住格式是一個(gè)列表
• mark_point/line_symbol：標(biāo)記點(diǎn)/線圖形，默認(rèn)為'pin'（點(diǎn)），有'circle'（圓形）, 'rect'（正方形）, 'roundRect'（圓角正方形）, 'triangle'（三角形）, 'diamond'（菱形）, 'pin'（點(diǎn)）, 'arrow'（箭頭）可選
• mark_point/line_symbolsize：標(biāo)記點(diǎn)/線圖形大小
• mark_point/line_textcolor：標(biāo)記點(diǎn)/線字體顏色

代碼

話不多說(shuō)，看圖！

本篇文章介紹 Vue3 + vite +TS 項(xiàng)目?jī)?nèi)使用 Echarts 5 繪制中國(guó)地圖，標(biāo)記分布點(diǎn)！之前沒(méi)有接觸過(guò) Echarts 的，可以先去官方示例看看，里面圖形特別齊全。但是官方文檔看著費(fèi)勁的，太多了根本記不住，所以自己做個(gè)總結(jié)，下次就可以直接使用了，不用做重復(fù)無(wú)用功。

一、安裝

Echarts 已更新到了 5.0 版本，安裝完記得檢查下自己的版本是否是 5.0 。

npm install echarts --save

安裝完成之后，在 package.json 中檢查是否安裝成功？

二、下載地圖的 json 數(shù)據(jù)

可以下載中國(guó)以及各個(gè)省份地圖數(shù)據(jù)。免費(fèi)的文件下載地址：

http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

記得收藏哦！免得浪費(fèi)加班時(shí)間。

三、引入

引入 echarts 可以全局引入：

import * as echarts from "echarts"

/* 之前vue2 */
Vue.prototype.$ecahrt = echarts

/* vue3 */
app.config.globalProperties.$echarts = echarts

也可以直接在繪制頁(yè)面內(nèi)按需引用。

引入需要繪制的地圖數(shù)據(jù) json 或 js 文件，本文使用的是 json 格式：

import chinaJSON from '../../assets/json/china.json'

注意：引入的時(shí)候先引入 echarts ，后引入 chinaJSON 文件，順序不能反哦！

四、開(kāi)始繪制地圖

template 部分代碼：

<template>
 <div>
  <div
   ref="chinaMap"
   style="height: 700px;border: solid 1px red;width: 100%;background: #010111;"
    >
   地圖1
  </div>
 </div>
</template>

script 部分代碼：

<script lang="ts" setup>
import * as echarts from 'echarts'
import chinaJSON from '../../assets/json/china.json'
import { onMounted, ref } from 'vue'
const chinaMap = ref()
onMounted(() => {
 drawChina()
})
let regions = [
 {
  name: '新疆維吾爾自治區(qū)',
  itemStyle: {
   areaColor: '#374ba4',
   opacity: 1,
  },
 },
 {
  name: '四川省',
  itemStyle: {
   areaColor: '#fe9b45',
   opacity: 1,
  },
 },
 {
  name: '陜西省',
  itemStyle: {
   areaColor: '#fd691b',
   opacity: 1,
  },
 },
 {
  name: '黑龍江省',
  itemStyle: {
   areaColor: '#ffc556',
   opacity: 1,
  },
 },
]
let scatter = [
 { name: '北京烤鴨', value: [116.46122, 39.97886, 9] },
 { name: '蘭州拉面', value: [103.86615, 36.040129, 9] },
 { name: '新疆烤肉', value: [87.613228, 43.810394, 9] },
 { name: '長(zhǎng)沙臭豆腐', value: [112.915204, 28.207735, 9] },
 { name: '西安肉夾饃', value: [108.953445, 34.288842, 9] },
 { name: '云南', value: [102.710002, 25.045806, 9] },
]
function drawChina() {
 var myChart = echarts.init(chinaMap.value)
 echarts.registerMap('china', chinaJSON) //注冊(cè)可用的地圖
 var option = {
  geo: {
   map: 'china',
   roam: true, //是否允許縮放，拖拽
   zoom: 1, //初始化大小
   //縮放大小限制
   scaleLimit: {
    min: 1, //最小
     max: 2, //最大
    },
    //設(shè)置中心點(diǎn)
    center: [115.97, 29.71],
    //省份地圖添加背景
    regions: regions,
    itemStyle: {
     areaColor: '#0b122e',
     color: 'red',
     borderColor: '#232652',
     borderWidth: 2,
   },
   //高亮狀態(tài)
   emphasis: {
     itemStyle: {
     areaColor: '#1af9e5',
      color: '#fff',
     },
    },
  },
  //配置屬性
  series: {
   type: 'effectScatter',
   coordinateSystem: 'geo',
   data: scatter, 
   showEffectOn: 'render',
    rippleEffect: {
     //漣漪特效相關(guān)配置
     brushType: 'stroke', //波紋的繪制方式，可選 'stroke' 和 'fill'
   	},
    hoverAnimation: true, //是否開(kāi)啟鼠標(biāo) hover 的提示動(dòng)畫效果
    label: {
     //圖形上的文本標(biāo)簽，可用于說(shuō)明圖形的一些數(shù)據(jù)信息，比如值，名稱等，
     normal: {
      formatter: '{b}',
      position: 'right',
      show: true,
     },
    },
    itemStyle: {
    //圖形樣式，normal 是圖形在默認(rèn)狀態(tài)下的樣式；emphasis 是圖形在高亮狀態(tài)下的樣式，比如在鼠標(biāo)懸浮或者圖例聯(lián)動(dòng)高亮?xí)r
     normal: {
      color: '#ffffff', //散點(diǎn)的顏色
      shadowBlur: 10,
      shadowColor: 20,
      fontSize: '12px',
     },
    },
    zlevel: 1,
   },
 }
 myChart.setOption(option)
}
</script>

想看更多的可以去官方文檔：

https://echarts.apache.org/zh/option.html#geo.regions.emphasis.itemStyle