MiniPrograms_Activity/components/mapChina/index.js

// 线图
import * as echarts from '../../ec-canvas/echarts';
Component({
  properties: {
    canvasId: {
      type: String,
      value: "mychart-dom-bar"
    },
    id: {
      type: String,
      value: "mychart-bar"
    },
    list: {
      type: Array,
      value: []
    }
  },
  chart: undefined,
  ready() {
    this.getJSON().then(data => {
      this.setData({
        show: true,
        json: data,
        ec: {
          onInit: this.initChart.bind(this)
        }
      })
    })
  },

  // 销毁组件
  detached: function () {
    this.chart && this.chart.dispose && this.chart.dispose();
  },

  /**
   * 组件的初始数据
   */
  data: {
    show: false,
    json: {},
    ec: {
      onInit: undefined,
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    getJSON: function () {
      return new Promise((reslove, reject) => {
        wx.request({
          url: 'https://bigdata.smcic.net/data/map_china.json',
          success: function (res) {
            reslove(res.data)
          },
          fail: function (err) {
            reject(err)
          }
        })
      })
    },
    initChart: function (canvas, width, height, dpr) {
      this.chart && this.chart.dispose && this.chart.dispose();
      this.chart = echarts.init(canvas, null, {
        width: wx.getSystemInfoSync().windowWidth,
        height: 400,
        devicePixelRatio: dpr // 像素
      });
      echarts.registerMap('china', this.data.json);
      let max = this.data.list[0][0].value - 0;
      var option = {
        tooltip: {
          show: false,
          formatter: "{b}:{c}%"
        },
        visualMap: {
          show: false,
          min: 0,
          max: max,
          inRange: {
            color: ['rgba(118,172,255, .2)', 'yellow']
          }
        },
        series: [
          {
            type: "map",
            mapType: "china",
            geoIndex: 0,
            zppm: 1.25,
            label: {
              normal: {
                show: false
              },
              emphasis:{
                show: false
              }
            },
            scaleLimit: {
              //滚轮缩放的极限控制
              min: 1.25,
              max: 2,
            },
            itemStyle: {
              normal: {
                borderColor: "#76acff",//每个区域的边框色
                areaColor: 'rgba(118,172,255, 0)'//区域背景色
              },
            },
            data: this.data.list[0] || []
          }
        ]
      };
      this.chart.setOption(option);
      return this.chart;
    }
  }
})