vue下使用echart的中国地图开发疫情情况

下载echarts

npm install echarts --save

vue文件引入echarts和china的地图js

import echarts from 'echarts'
import "../../../node_modules/echarts/map/js/china";

配置option和显示地图必要信息

// template里
<div class="charts"></div>

// js里
export default {
  data() {
    return {
      chartsInstance: null,  // echarts实例
    };
  },
  mounted() {
    this.chartsInstance = echarts.init(document.querySelector(".charts"));
    this.chartsInstance.setOption({
      title: {     // 标题配置
        text: "中国地图",   // 主标题
        subtext: "人口密度数据来自Wikipedia", // 副标题
        textStyle: { // 主标题字体样式
          fontSize: 100,
        },
        left: "center",  // 标题位置
        top: 50, // 标题位置
        subtextStyle: {  // 副标题字体样式
          fontSize: 70,
        },
      },
      tooltip: {   // 鼠标放入某个模块的黑色提示框
        trigger: "item",
        formatter: (params)=>{  // 提示的文本  可以是string也可以是function
          return `${params.name}的人口密度是${params.value?params.value:'0'}`
        },
        textStyle : {  // 提示的字体样式
          fontSize : 60
        }
      },
      visualMap: {  // 一个映射组件，可以将series里data的value映射到visualMap上，并显示对应的颜色
        min: 0,  // 最小值
        max: 1000, // 最大值
        show: true, 
        text: ["High", "Low"],  // 最大值上面的文本和最小值上面的文本
        realtime: false,
        calculable: true,
        left: 100,
        bottom: "20%",
        itemWidth: 60,   // 组件宽度
        itemHeight: 300,  // 组件高度
        textStyle: {  // 组件字体大小
          fontSize: 38,
        },
        inRange: {  // 组件和series的值对应的颜色渐变数组
          color: ["lightskyblue", "yellow", "orangered"],
        },
      },
      series: [   // 系列列表
        {
          name: "中国城市人口密度",
          type: "map",  // 类型设置成map  还有line，pie，bar等等
          mapType: "china", // 自定义扩展图表类型
          label: {   
            show: true,
            fontSize : 45  // 模块各省份的字的字体大小
          },
          itemStyle: {  // 常规模式下各省份的样式
            areaColor: "#f2f2f2",
            color: "rgba(128, 128, 128, 0.5)",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: "rgba(0, 0, 0, 0.2)",
          },
          emphasis: {  // 高亮模式下各省份的样式
            label: {
              color: "#ffffff",
              fontWeight: "bold",
            },
            itemStyle: {
              areaColor: "#f60",
            },
          },
          data: [
            { name: "贵州", value: 800 },
            { name: "广东", value: 500 },
            { name: "山东", value: 920 },
          ],
        },
      ],
    });
  },
};

效果图