博客

1.npm 下载一个4.9.0版本的echarts，如果下的版本过高，没有地图的json数据

2.在main.js里引入echarts

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import echarts from 'echarts'
import china from 'echarts/map/json/china.json'
echarts.registerMap('china',china)
// const map=require('./view/js/map');

Vue.config.productionTip = false
Vue.prototype.$echarts = echarts
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3.在你需要的界面里引入china.json

require(“echarts/map/json/china.json”);

4.完善代码

drawLine() {
      var myChartContainer = document.getElementById("myChartChina");
      var resizeMyChartContainer = function () {
        myChartContainer.style.width = 100 + "%";
        myChartContainer.style.height = window.innerHeight * 0.7 + "px";
      };
      resizeMyChartContainer();
      var myChartChina = this.$echarts.init(myChartContainer);

      function randomData() {
        return Math.round(Math.random() * 500);
      }

      // 绘制图表

      var optionMap = {
        backgroundColor: "#132538",
        title: {
          text: "犯罪人口来源分析",
          subtext: "",
          x: "center",
          textStyle: {
            fontSize:10,
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
        },

        //左侧小导航图标
        visualMap: {
          show: false,
          x: "left",
          y: "center",
          //改变地图区域颜色
          splitList: [
            { start: 500, end: 600 },
            { start: 400, end: 500 },
            { start: 300, end: 400 },
            { start: 200, end: 300 },
            { start: 100, end: 200 },
            { start: 0, end: 100 },
          ],
          color: [
            "#ffff00",
            "#0e94eb",
            "#70bcf0",
            "#f0f26c",
            "#00cd00",
            "#eff26f",
          ],
        },

        //配置属性
        series: [
          {
            name: "数据",
            type: "map",
            mapType: "china",
            roam: false,
            label: {
              normal: {
                show: false, //省份名称
              },
              emphasis: {
                show: false,
              },
            },
            data: [
              { name: "北京", value: "100" },
              { name: "天津", value: randomData() },
              { name: "上海", value: randomData() },
              { name: "重庆", value: randomData() },
              { name: "河北", value: randomData() },
              { name: "河南", value: randomData() },
              { name: "云南", value: randomData() },
              { name: "辽宁", value: randomData() },
              { name: "黑龙江", value: randomData() },
              { name: "湖南", value: randomData() },
              { name: "安徽", value: randomData() },
              { name: "山东", value: randomData() },
              { name: "新疆", value: randomData() },
              { name: "江苏", value: randomData() },
              { name: "浙江", value: randomData() },
              { name: "江西", value: randomData() },
              { name: "湖北", value: randomData() },
              { name: "广西", value: randomData() },
              { name: "甘肃", value: randomData() },
              { name: "山西", value: randomData() },
              { name: "内蒙古", value: randomData() },
              { name: "陕西", value: randomData() },
              { name: "吉林", value: randomData() },
              { name: "福建", value: randomData() },
              { name: "贵州", value: randomData() },
              { name: "广东", value: randomData() },
              { name: "青海", value: randomData() },
              { name: "西藏", value: randomData() },
              { name: "四川", value: randomData() },
              { name: "宁夏", value: randomData() },
              { name: "海南", value: randomData() },
              { name: "台湾", value: randomData() },
              { name: "香港", value: randomData() },
              { name: "澳门", value: randomData() },
            ], //数据
          },
        ],
      };

      myChartChina.setOption(optionMap);
      window.onresize = function () {
        resizeMyChartContainer();
        myChartChina.resize();
      };
    },