关于前端:vue项目使用echarts地图简单渲染数据

将 vue 我的项目外面通过引入 echarts，实现简略地图数据渲染，代码非凡中央通过正文表明

留神：

装置 cnpm i echarts -S 4.9.0
最新的 5.0 引入形式不一样，如果间接应用 cnpm i echarts - S 会装置最新的版本，引入形式也要追随文档更改

main.js

import echarts from 'echarts'
Vue.prototype.$echarts = echarts 

主页面：

<template>
      <div id="china_map" :style="{width: width, height:'400px'}"></div>
</template>

<script>
    import china from "echarts/map/json/china.json";  // 中国地图
echarts.registerMap("china", china);
export default {
    name: "index",
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
  },
  data(){}
  mounted() {this.setMapData();
  },
  methods: {
     // 地图
    setMapData() {
      // 初始化 echarts 实例 #D8E9FD
      this.chinachart = echarts.init(document.getElementById("china_map"));
      // 进行相干配置
      this.chartOption = {
        tooltip: {
          // 鼠标移到图外面的浮动提示框
          // formatter 具体配置：https://echarts.baidu.com/option.html#tooltip.formatter
          formatter(params, ticket, callback) {
            // params.data 就是 series 配置项中的 data 数据遍历
            let localValue, perf, downloadSpeep, usability, point;
            if (params.data) {
              localValue = params.data.value;
              perf = params.data.perf;
              downloadSpeep = params.data.downloadSpeep;
              usability = params.data.usability;
              point = params.data.point;
            } else {
              // 为了避免没有定义数据的时候报错写的
              localValue = 0;
              perf = 0;
            }
            let htmlStr = `
          <div style='font-size:18px;'> ${params.name}</div>
          <p style='text-align:left;margin-top:-4px;'>
              我的项目数量：${localValue}<br/>
              占比：${perf}<br/>
          </p>
        `;
            return htmlStr;
          },
          backgroundColor: "#ff7f50", // 提醒标签背景色彩
          textStyle: {color: "#fff"}, // 提醒标签字体色彩
        },
        visualMap: {
          show: true,
          bottom: 60,
          right: 200,
          text: ["高", "低"],
          //  min:0,
          //   precision:0,
          itemHeight: 200,
          color: [
            "#5475f5",
            "#9feaa5",
            "#85daef",
            "#74e2ca",
            "#e6ac53",
            "#9fb5ea",
          ],
        },
        // geo 配置详解：https://echarts.baidu.com/option.html#geo
        geo: {
          // 天文坐标系组件用于地图的绘制
          map: "china", // 示意中国地图
          // roam: true, // 是否开启鼠标缩放和平移漫游
          zoom: 1.2, // 以后视角的缩放比例（地图的放大比例）label: {// show: true},
          itemStyle: {
            // 地图区域的多边形 图形款式。normal: {
              // 未选中的状态
              borderColor: "#ffffff",
              areaColor: "#D8E9FD", // 背景色彩
              label: {// show: true, // 显示名称},
            },
            emphasis: {
              // 选中的状态
              // 高亮状态下的多边形和标签款式
              shadowBlur: 20,
              shadowColor: "rgba(0, 0, 0, 0.5)",
              borderColor: "#fff",
              areaColor: "#DA3A3A",
            },
          },
        },
        series: [
          {
            name: "地图", // 浮动框的题目（下面的 formatter 自定义了提示框数据，所以这里可不写）type: "map",
            geoIndex: 0,
            label: {show: true,},
            // 这是须要配置地图上的某个地区的数据，依据后盾的返回的数据进行拼接（上面是我定义的假数据）data: [
              {
                name: "北京",
                value: 599, //  我的项目数量
                perf: "60%", // 我的项目占比
              },
              {
                name: "上海",
                value: 142,
                perf: "40%",
              },
              {
                name: "黑龙江",
                value: 44,
                perf: "1%",
              },
              {
                name: "新疆",
                value: 999,
                perf: "70%",
              },
            ],
          },
        ],
      };
      // 应用刚指定的配置项和数据显示地图数据
      this.chinachart.setOption(this.chartOption);
    },
  }
}
</script>

如图：