当先锋百科网

首页 1 2 3 4 5 6 7

Echarts省份地图上显示柱状图+指定区域高亮显示（地图柱状图）

先引入echarts和在echats社区下载对应地图省份的JSON数据

<template>
  <div class="baojimap" ref="baojimap" id="baojimap"></div>
</template>

<script>
import * as echarts from "echarts";
import baoji from "@/assets/json/610300.json";

export default {
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const that = this;
      var chartDom = document.getElementById("baojimap");
      var myChart = this.$echarts.init(chartDom);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      myChart.off("click");

      this.$echarts.registerMap("js", baoji);
      this.$echarts.registerMap("js2", baoji);
      var option;

      // 柱状图 图中的位置
      var center = {
        渭滨区: [107.144467, 34.271008],
        金台区: [107.080003, 34.425192],
        陈仓区: [107.383645, 34.352747],
        凤翔区: [107.400577, 34.581668],
        岐山县: [107.694464, 34.44296],
        扶风县: [107.929419, 34.375497],
        眉县: [107.799971, 34.142137],
        陇县: [106.857066, 34.893262],
        千阳县: [107.174987, 34.742584],
        麟游县: [107.696608, 34.777714],
        凤县: [106.758122, 33.998464],
        太白县: [107.419533, 33.960015],
      };
      // 图中 省份字的位置
      var center2 = {
        渭滨区: [107.144467, 34.271008],
        金台区: [107.080003, 34.425192],
        陈仓区: [107.383645, 34.352747],
        凤翔区: [107.400577, 34.581668],
        岐山县: [107.694464, 34.44296],
        扶风县: [107.929419, 34.375497],
        眉县: [107.799971, 34.142137],
        陇县: [106.857066, 34.893262],
        千阳县: [107.174987, 34.742584],
        麟游县: [107.696608, 34.777714],
        凤县: [106.758122, 33.998464],
        太白县: [107.419533, 33.960015],
      };
      // 数据
      var data = [
        { name: "渭滨区", value: 700 },
        { name: "金台区", value: 200 },
        { name: "陈仓区", value: 700 },
        { name: "凤翔区", value: 700 },
        { name: "岐山县", value: 1200 },
        { name: "扶风县", value: 700 },
        { name: "眉县", value: 700 },
        { name: "陇县", value: 1000 },
        { name: "千阳县", value: 700 },
        { name: "麟游县", value: 100 },
        { name: "凤县", value: 700 },
        { name: "太白县", value: 1500 },
      ];
      var lineData = data.map((item) => {
        return {
          coords: [
            center[item.name],
            [center[item.name][0], center[item.name][1] + item.value * 0.0001],
          ],
        };
      });
      var scatterData = data.map((item) => {
        return [
          center[item.name][0],
          center[item.name][1] + item.value * 0.0001,
        ];
      });
      var scatterData2 = data.map((item) => {
        return center[item.name];
      });
      var scatterData3 = data.map((item) => {
        return center2[item.name].concat(item.name);
      });
      option = {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
                trigger: 'item',
                show: true,
                enterable: true,
                textStyle:{
                    fontSize:20,
                    color: '#fff'
                },
                backgroundColor: 'rgba(0,0,0,0.5)',
                // backgroundColor: 'rgba(0,2,89,0.8)',
                // formatter: '{b}'
                formatter: function (item) {
                var aaaaa = data
                return `商户数${aaaaa[item.dataIndex].value}`;;
              },
            },
        // 地图图层样式
        geo: [
          {
            map: "js",
            aspectScale: 0.9,
            // roam: false, //是否允许缩放
            roam:false,
            //zoom: 1.1, //默认显示级别
            layoutSize: "95%",
            layoutCenter: ["50%", "50%"],
            itemStyle: {
              areaColor: "transparent",
              borderColor: "#37C1FD",
              borderWidth: 2,
            },
            emphasis: {
              itemStyle: {
                areaColor: "#0160AD",
              },
              label: {
                show: 0,
                color: "#fff",
              },
            },
            zlevel: 3,
            regions: [ // 区域配置
            {
              name: '金台区', //区块名称
              itemStyle: {
                normal: {
                  areaColor: '#B9D696' // 区域颜色
                }
              }
            },
             ]
          },
          {
            map: "js2",
            aspectScale: 0.9,
            roam: false, //是否允许缩放
            //zoom: 1.1, //默认显示级别
            layoutSize: "95%",
            layoutCenter: ["50%", "50%"],
            itemStyle: {
              areaColor: {
                type: "radial",
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [
                  {
                    offset: 0,
                    color: "#56CCFB", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#0160AD", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              borderColor: "#37C1FD",
              borderWidth: 2,
            },
            zlevel: 2,
            silent: true,
          },
          {
            map: "js2",
            aspectScale: 0.9,
            roam: false, //是否允许缩放
            //zoom: 1.1, //默认显示级别
            layoutSize: "95%",
            layoutCenter: ["50%", "52%"],
            itemStyle: {
              areaColor: "#005DDC",
              borderColor: "#329BF5",
              borderWidth: 1,
            },
            zlevel: 1,
            silent: true,
          },
        ],
        series: [
          // 画柱状图
          {
            type: "lines",
            zlevel: 5,
            effect: {
              show: false,
              period: 4, //箭头指向速度，值越小速度越快
              trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: "arrow", //箭头图标
              symbolSize: 5, //图标大小
            },
            lineStyle: {
              width: 15, //尾迹线条宽度
              color: 'rgb(22,255,255, .6)',
              opacity: 1, //尾迹线条透明度
              curveness: 0, //尾迹线条曲直度
            },
            label: {
              show: 0,
              position: "end",
              formatter: "245",
            },
            silent: true,
            data: lineData,
          },
          // 柱形数量显示
          {
            type: "scatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            zlevel: 5,
            label: {
              show: !0,
              position: "left",
              formatter: (params) => data[params.dataIndex].value,
              padding: [4, 8],
              backgroundColor: "#003F5E",
              borderRadius: 5,
              borderColor: "#67F0EF",
              borderWidth: 1,
              color: "#67F0EF",
            },
            symbol: "circle",
            symbolSize: [15, 8],
            itemStyle: {
              color: 'rgb(22,255,255, .6)',
              opacity: 1,
            },
            silent: true,
            data: scatterData,
          },
          // 图中圆点设置
          {
            type: "scatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            zlevel: 5,
            symbol: "circle",
            symbolSize: [15, 8],
            itemStyle: {
              color: 'rgb(22,255,255, .6)',
              opacity: 1,
              shadowColor: "#000",
              shadowBlur: 5,
              shadowOffsetY: 2,
            },
            silent: true,
            data: scatterData2,
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            symbol: "circle",
            symbolSize: 4,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "fill",
              scale: 10,
            },
            hoverAnimation: true,
            label: {
              formatter: (p) => p.data[2],
              position: "right",
              color: "#fff",
              fontSize: 14,
              distance: 10,
              show: !0,
            },
            itemStyle: {
              color: 'rgb(22,255,255, .6)',
            },
            zlevel: 6,
            data: scatterData3,
          },
        ],
      };
      myChart.setOption(option);

      // option && myChart.setOption(option);
    },
  },
};
</script>
<style>
.baojimap {
  height: 100%;
  width: 100%;
}
</style>