vue 使用 echarts 绘制中国地图

1.  插入echarts 所需模块

1 import echarts from "echarts";
2 import 'echarts/map/js/china'   // 使用中国地图需把China.js文件引入

2. 正式代码部分

 1                         //初始化echarts实例 通过传参获取要放置的id名称
 2                         var myChart = echarts.init(document.getElementById("容器的id名称"));
 3                         // 指定图表的配置项和数据
 4                         var optionMap = {
 5                             //设置 背景颜色
 6                             backgroundColor: "#FFFFFF",
 7                             tooltip: {
 8                                 trigger: "item",
 9                             },
10 
11                             //左侧小导航图标
12                             visualMap: {
13                                 // 水平摆放
14                                 orient:"horizontal", 
15                                 // 是否显示指示条
16                                 show: true,
17                                 // 设置字体
18                                 textStyle: {
19                                     fontSize: 3.5,
20                                 },
21                                 // 显示的位置
22                                 x: "",

splitList: [                                     { start: 0, end: 0 },                                     { start: 1, end: 9 },                                     { start: 10, end: 99 },                                     { start: 100, end: 499 },                                     { start: 500, end: 999 },                                     { start: 1000, end: 10000 },                                     { start: 10000 },                                 ],                                 color: [                                     "#4a1213",                                     "#772526",                                     "#bb3937",                                     "#d56355",                                     "#e9a188",                                     "#faebd2",                                     "#f5f5f5",                                 ],

23                                
24                             },
25 
26                             //配置属性
27                             series: [
28                                 {
29                                     name: title,
30                                     type: "map",  // 类型 为map地图

　　　　　　　　　　　　　　　　　　　　　　　　// 具体地图类型为china 在这里需要引入echarts中自带的China.js文件

31                                     mapType: "china",  
32                                     roam: false, // 设置是否可以缩放 false 为不可以缩放
33                                     zoom:1.2,// 默认缩放比例  刚进入页面时的缩放比例
34                                     itemStyle:{
35                                         normal: {
36                                             areaColor: '#000',
37                                             borderColor: 'skyblue',
38                                             borderWidth: 1,
39                                             shadowColor: '#ccc',
40                                             shadowBlur: 30,
41                                         opacity:1
42                                         },
43                                     },
44                                     label: {
45                                         normal: {
46                                             show: true, //是否显示省份名称
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　// 设置显示省份名称的的字体大小 ，也可以显示fontFamily:... ...

47                                             textStyle: {
48                                                 fontSize: 6, 
49                                             },
50                                         },
51                                         emphasis: {
52                                             show: true,
53                                         },
54                                     },
56                                     data:[{name:'xxx',value:数字},]
57                                 },
58                             ],
59                         };
60                         //使用制定的配置项和数据显示图表
61                         myChart.setOption(optionMap);

 3. 最后的效果