vue中使用echars做出中国地图

这里只是个小demo，根据流程操作可以实现基础的中国地图，样式等后面根据需要自己去调

1.下载中国地图

echars官网示例中，没有中国地图的json，需要自己去下载

https://datav.aliyun.com/tools/atlas/index.html

2.修改地图json

将.json文件修改为.js，并在首行添加

export const chinaMapData =

3.在页面中引入.js地图文件

注意修改.js文件的路径

import {chinaMapData} from "@/utils/zhongguo.js";

4.将地图代码放入图表函数中

我这里放到了getChart: function() {}函数中

mounted() {

    this.$nextTick(() => {

      this.getChart();

    })

  },

  methods: {

    getChart: function() {

    }

  }

注意修改div的id

      var chartDom = document.getElementById('involved_region_div');

      var myChart = echarts.init(chartDom);

      var option;

      echarts.registerMap("china",chinaMapData);

      option = {

        title: {  //标题样式

          text: '涉案区域分布',

          x: "left",

          textStyle: {

              fontSize: 18

          },

        },

        tooltip: {

          formatter:function(params){//提示框浮层内容格式器，支持字符串模板和回调函数两种形式

            return params.name+'<br />'+params.seriesName+'：'+ (params.value ? params.value:0);

          }

        },

        toolbox: {

          show: true,

          //orient: 'vertical',

          left: 'left',

          top: 'top',

          feature: {

          }

        },

        geo: {//地理坐标系组件

          map: 'china',//注册的地图名称

          roam: false,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启

          zoom: 1.2,//当前视角的缩放比例

          label: {//图形上的文本标签（显示地图省份）

              normal: {

                  show: true,

                  fontSize:'8',

                  color: 'rgba(0,0,0,0.7)'

              }

          },

          itemStyle: {

              normal:{

                  borderColor: 'rgba(0, 0, 0, 0.2)'//图形的描边颜

              },

              emphasis:{

                  areaColor: '#F3B329',

                  shadowOffsetX: 0,

                  shadowOffsetY: 0,

                  shadowBlur: 20,

                  borderWidth: 0,

                  shadowColor: 'rgba(0, 0, 0, 0.5)'

              }

          }

        },

        //dataRange 和 visualMap 都是根据数值展示不同的颜色，根据需要选择。dataRange：颜色块  visualMap：渐变色条

        /*

        dataRange: {//左下角，颜色块。

          x: 'left',

          y: 'bottom',

          splitList: [

              {start: 5000, label: '> 41  极高', color: '#b80909'},

              {start: 3000, end: 5000, label: '31 - 40  高', color: '#e64546'},

              {start: 2000, end: 3000, label: '21 - 30  中', color: '#f57567'},

              {start: 1000, end: 2000, label: '11 - 20  低', color: '#ff9985'},

              {start:0, end: 1000,label: '0 -10 无数据', color: '#ffe5db'}

          ]

        },

        */

        visualMap: {//左下角，渐变颜色条

          min: 0,

          max: 60,

          text: ["高", "低"],

          right: "5%",

          bottom: "10%",

          textStyle: {

            color: "#1E1E1E",

            map: "china",

          },

          inRange: {

            color: ['#E0FFFF', '#006EDD'],

          },

          show:true,

          calculable: true,

        },

        series: [

          {

            name: '涉案',

            type: "map",

            geoIndex: 0,

            emphasis: {

              label: {

                show: true,

              }

            },

            data: [

              { name: "上海市", value: 23 },

              { name: "江苏省", value: 50 },

              { name: "山东省", value: 60 },

              { name: "安徽省", value: 10 },

            ]

          }

        ]

      };

      option && myChart.setOption(option);

巴特西

echars中国地图

vue中使用echars做出中国地图

1.下载中国地图

2.修改地图json

3.在页面中引入.js地图文件

4.将地图代码放入图表函数中

5.效果

最新文章

热门文章