vue2 利用echarts 单独绘制省份

第一步：先引入所需的第三方模块

import echarts from "echarts"; // 引入所需要的echarts模块
import "echarts/map/js/province/shanxi"; // 引入省份的js文件
import "echarts/map/json/province/shanxi.json"; // 引入省份的json文件

第二步：开始绘制

 1       // 基于准备好的dom，初始化echarts实例
 2       var myChart = echarts.init(document.getElementById("left2"));
 3 
 4       var option = {
 5         visualMap: {
 6           show: false,
 7           min: 0,
 8           max: 100,
 9           left: "left",
10           top: "bottom",
11           text: ["高", "低"], // 文本，默认为数值文本
12           calculable: true,
13           inRange: {
14             color: ["yellow", "lightskyblue", "orangered"],
15           },
16         },
17         series: [
18           {
19             layoutCenter: ['30%', '30%'],
20             type: "map",
21             mapType: "山西",
22             roam: true,
23             label: {
24               normal: {
25                 show: true,
26                 textStyle: {
27                   fontSize: 10,
28                   fontFamily: "楷体",
29                 },
30               },
31               emphasis: {
32                 textStyle: {
33                   color: "#fff",
34                   fontSize: 10,
35                 },
36               },
37             },
38             itemStyle: {
39               normal: {
40                 borderColor: "#389BB7",
41                 areaColor: "#fff",
42               },
43               emphasis: {
44                 areaColor: "#389BB7",
45                 borderWidth: 0,
46               },
47             },
48             animation: false,
// 数据
49             data: [
50               {
51                 name: "大同市",
52                 value: 88,
53               },
54               {
55                 name: "朔州市",
56                 value: 96,
57               },
58               {
59                 name: "忻州市",
60                 value: 98,
61               },
62               {
63                 name: "吕梁市",
64                 value: 80,
65               },
66               {
67                 name: "太原市",
68                 value: 88,
69               },
70               {
71                 name: "晋中市",
72                 value: 79,
73               },
74               {
75                 name: "阳泉市",
76                 value: 77,
77               },
78               {
79                 name: "临汾市",
80                 value: 33,
81               },
82               {
83                 name: "长治市",
84                 value: 69,
85               },
86               {
87                 name: "运城市",
88                 value: 66,
89               },
90               {
91                 name: "晋城市",
92                 value: 22,
93               },
94              
95             ],
96           },
97         ],
98       };
99       myChart.setOption(option);