ECharts map地图点击切换变颜色

2,451 阅读1分钟

map1.png

<div id="lnMap" class="ln_map"></div>
 data() {
    return {
    initMapChart:''
    }
},
methods: {
  initSMap() {
      let that = this;
      let name = "bj";
      let uploadedDataURL = require("../../assets/LiaoNing.json");
      that.initMapChart = this.$echarts.init(document.getElementById("lnMap"));
      that.$echarts.registerMap(name, uploadedDataURL);
      let _data = [
        {
          name: "沈阳市",
          value: 155,
          id: 0,
          selected: true
        },
        {
          name: "大连市",
          value: 107,
          id: 1,
          selected: false
        },
        {
          name: "鞍山市",
          id: 2,
          value: 25,
          selected: false
        },
        {
          name: "抚顺市",
          id: 3,
          value: 3,
          selected: false
        },
        {
          name: "本溪市",
          value: 24,
          id: 4,
          selected: false
        },
        {
          name: "丹东市",
          id: 5,
          value: 30,
          selected: false
        },
        {
          name: "锦州市",
          value: 36,
          id: 6,
          selected: false
        },
        {
          name: "营口市",
          value: 20,
          id: 7,
          selected: false
        },
        {
          name: "阜新市",
          value: 55,
          id: 8,
          selected: false
        },
        {
          name: "辽阳市",
          value: 48,
          id: 9,
          selected: false
        },
        {
          name: "盘锦市",
          value: 29,
          id: 10,
          selected: false
        },
        {
          name: "铁岭市",
          value: 28,
          id: 11,
          selected: false
        },
        {
          name: "朝阳市",
          value: 33,
          id: 12,
          selected: false
        },
        {
          name: "葫芦岛市",
          value: 30,
          id: 13,
          selected: false
        }
      ];
      const option = {
        visualMap: {
          show: false,
          min: 0,
          max: 50,
          left: "left",
          top: "bottom",
          text: ["高", "低"], // 文本,默认为数值文本
          calculable: true,
          inRange: {
            color: [
              "rgba(9, 31, 226, 0.6)",
              "rgba(9, 31, 226, 0.7)",
              "rgba(9, 31, 226, 0.8)",
              "rgba(9, 31, 226, 0.9)",
              "rgba(9, 31, 226, 1)"
            ]
          },
          textStyle: {
            color: "#333"
            // fontSize:"17px"
          }
        },
        geo: {
          map: name,
          zoom: 1.2,
          layoutSize: "100%"
        },
        series: [
          {
            type: "map",
            mapType: name,
            showLegendSymbol: false,
            label: {
              normal: {
                show: true,
                color: "#fff" //地图上文字颜色
              },
              emphasis: {
                textStyle: {
                  color: "#fff"
                }
              }
            },
            zoom: 1.2, //地图放大比列
            itemStyle: {
              normal: {
                borderColor: "#bccdf5",
                areaColor: "#fff"
              },
              emphasis: {
                areaColor: "#ff7113",
                borderWidth: 1
              }
            },
            markPoint: {
              color: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: "red" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "blue" // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              },
              symbolSize: 20, // 图片大小
              label: {
                position: "top",
                color: "#fff"
              },
              data: []
            },
            data: _data
          }
        ]
      };

      that.initMapChart.setOption(option);
      that.initMapChart.on("click", function(params) {
        _data.map(res => {
          if (res.name == params.name) {
            res.selected = true;
          } else {
            res.selected = false;
          }
          return res;
        });
        that.initMapChart.setOption(option);
      });
      window.addEventListener("resize", () => {
        that.initMapChart.resize();
      });
    },
}
 mounted() {
  this.initSMap();
 }