echarts地图

date: 2020-05-01 20:01:01 tags: [echart,vue]

引入文件

需要引入China.js，提取码：f608

地图代码示例

// 设置地图
setChart () {
  let myChart = this.$echarts.init(document.getElementById('chart'), 'macarons')
  let provinceList = [];
  this.provinceList.forEach((e, i) => {
    let obj = {
      name: e.provinceName,
      value: e.consigneeCount
    }
    provinceList.push(obj)
  })
  var option = {
      // 标题组件，包含主标题和副标题。
      title : {
        text: '清单地图清布',
        subtext: '',
        left: 'left'
      },
      // 提示框组件
      tooltip : {
        trigger: 'item'
      },
      // 视觉映射组件
      visualMap: {
        type: 'piecewise',
        splitNumber: 4, // 自动平均切分成几段
        pieces: [
            {min: 5000, color: 'red'},
            {min: 1000, max: 5000, color: '#08af9c'},
            {min: 100, max: 1000, color: '#78dd97'},
            {min: 0, max: 100, color: '#ddd'}
        ],
        left: 'left',
        top: 'bottom',
        calculable : true
      },
      series: [
          {
              name: '',
              type: 'map',
              mapType: 'china',
              roam: false,
              label: {
                normal: {
                    show: true //显示省份名称
                },
                emphasis: {
                    show: true
                }
              },
              data: [
                {name: '重庆',value: Math.round(Math.random()*6000), selected:true},
                {name: '天津',value: Math.round(Math.random()*6000)},
                {name: '北京',value: Math.round(Math.random()*6000)},
                {name: '上海',value: Math.round(Math.random()*6000)},
                {name: '河北',value: Math.round(Math.random()*6000)},
                {name: '河南',value: Math.round(Math.random()*6000)},
                {name: '云南',value: Math.round(Math.random()*6000)},
                {name: '辽宁',value: Math.round(Math.random()*6000)},
                {name: '黑龙江',value: Math.round(Math.random()*6000)},
                {name: '湖南',value: Math.round(Math.random()*6000)},
                {name: '安徽',value: Math.round(Math.random()*6000)},
                {name: '山东',value: Math.round(Math.random()*6000)},
                {name: '新疆',value: Math.round(Math.random()*6000)},
                {name: '江苏',value: Math.round(Math.random()*6000)},
                {name: '浙江',value: Math.round(Math.random()*6000)},
                {name: '江西',value: Math.round(Math.random()*6000)},
                {name: '湖北',value: Math.round(Math.random()*6000)},
                {name: '广西',value: Math.round(Math.random()*6000)},
                {name: '甘肃',value: Math.round(Math.random()*6000)},
                {name: '山西',value: Math.round(Math.random()*6000)},
                {name: '内蒙古',value: Math.round(Math.random()*6000)},
                {name: '陕西',value: Math.round(Math.random()*6000)},
                {name: '吉林',value: Math.round(Math.random()*6000)},
                {name: '福建',value: Math.round(Math.random()*6000)},
                {name: '贵州',value: Math.round(Math.random()*6000)},
                {name: '广东',value: Math.round(Math.random()*6000)},
                {name: '青海',value: Math.round(Math.random()*6000)},
                {name: '西藏',value: Math.round(Math.random()*6000)},
                {name: '四川',value: Math.round(Math.random()*6000)},
                {name: '宁夏',value: Math.round(Math.random()*6000)},
                {name: '海南',value: Math.round(Math.random()*6000)},
                {name: '台湾',value: Math.round(Math.random()*6000)},
                {name: '香港',value: Math.round(Math.random()*6000)},
                {name: '澳门',value: Math.round(Math.random()*6000)}
              ]
          }
      ]
  };
  // 初始化
  myChart.setOption(option, true);
  // 省份点击
  myChart.on('click', function(params){
    if(params.name){
        // 选中省份
        let list = [];
        option.series[0].data.forEach(function(e, i){
            let obj = e;
            obj.selected = false;
            if(obj.name == params.name){
                obj.selected = true;
            }
            list.push(obj)
        })
        option.series[0].data = list;
        myChart.setOption(option, true);
    }
  })
}