~yxh/opo-web.git

<template>
  <div>
    <Echart
      :id="id"
      ref="mapChart"
      :options="options"
      :height="height"
      :width="width"
      @click="mapClick"
    ></Echart>
  </div>
</template>
 
<script>
import Echart from "@/common/echart";
 
export default {
  name: "mapechart",
  props: {
    id: {
      type: String,
      default: "mapChart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "350px",
    },
    cdata: {
      type: Array,
      default: () => [],
    },
    chartType: {
      type: String,
      default: "map",
    },
  },
  data() {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  watch: {
    cdata: {
      handler(newData) {
        this.resetOption(newData);
      },
      immediate: true,
      deep: true,
    },
    chartType(newVal) {
      this.resetOption(this.cdata);
    },
  },
  methods: {
    mapClick(data) {
      this.$emit("click", data);
    },
 
    resetOption(newData) {
      let seriesData = [
        {
          name: "杭州市",
        },
        {
          name: "宁波市",
        },
        {
          name: "温州市",
        },
        {
          name: "嘉兴市",
        },
        {
          name: "湖州市",
        },
        {
          name: "绍兴市",
        },
        {
          name: "金华市",
        },
        {
          name: "衢州市",
        },
        {
          name: "舟山市",
        },
        {
          name: "台州市",
        },
        {
          name: "丽水市",
        },
      ];
      if (this.chartType == "map") {
        let maxValue = 2;
        let minValue = newData.length > 0 ? newData[0].value : 0;
        for (let i = 0; i < newData.length; i++) {
          if (newData[i].value > maxValue) {
            maxValue = newData[i].value;
          }
          if (newData[i].value < minValue) {
            minValue = newData[i].value;
          }
        }
        for (let i = 0; i < seriesData.length; i++) {
          let ii = newData.findIndex((item) => item.name == seriesData[i].name);
          if (ii > -1) {
            seriesData[i].exData = {
              value: newData[ii].value,
              ...newData[ii].elseData,
            };
          } else {
            seriesData[i].exData = {
              value: 0,
              value2: 0,
              value3: 0,
            };
          }
        }
        // 设置点的位置(经纬度)
        const geoCoordMap = {
          杭州市: [120.19, 30.26, 20],
          宁波市: [121.56, 29.86, 20],
          温州市: [120.65, 28.01, 20],
          嘉兴市: [120.76, 30.77, 20],
          湖州市: [120.1, 30.86, 20],
          绍兴市: [120.58, 30.01, 20],
          金华市: [119.64, 29.12, 20],
          衢州市: [118.88, 28.97, 20],
          舟山市: [122.11, 30.07, 20],
          台州市: [121.03, 29.15, 20],
          丽水市: [119.92, 28.45, 20],
        };
 
        let convertData = function (data) {
          let scatterData = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              scatterData.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
                exData: data[i].exData,
              });
            }
          }
          return scatterData;
        };
        this.options = {
          showLegendSymbol: true,
          tooltip: {
            trigger: "item",
            textStyle: {
              fontSize: 14,
              lineHeight: 22,
            },
            position: (point) => {
              // 固定在顶部
              return [point[0] + 50, point[1] - 20];
            },
            // 如果需要自定义 tooltip样式，需要使用formatter
            formatter: (params) => {
              return `${params.name}<br/>当前潜在捐献数：${
                params.value
              }<br/>完成案例数：${
                params.data.elseData ? params.data.elseData.value2 : ""
              }<br/>获取器官总数：${
                params.data.elseData ? params.data.elseData.value3 : ""
              }`;
            },
          },
          visualMap: {
            min: 0,
            max: 1,
            show: false,
            right:'20%',
            seriesIndex: 0,
            text: ["最高", "低"],
            textStyle: {
              color: "#fff",
              fontSize: "10",
            },
            inRange: {
              color: [
                "rgba(41,166,206)",
                "rgba(69,117,245)",
                "rgba(255, 69, 0)",
              ], // 取值范围的颜色
            },
            // 颜色
            pieces: [
              { value: 0, color: "rgba(41,166,206, .5)" },
              { value: minValue, color: "rgba(41,166,206, .6)" },
              { min: 0, max: maxValue - 1, color: "rgba(69,117,245, .9)" },
              { value: maxValue, color: "rgba(255, 69, 0,.9)" },
            ],
            show: true,
            backgroundColor:"rgba(255, 255, 255, 0.19)"
          },
          // 底部背景
          geo: {
            show: true,
            aspectScale: 0.85, //长宽比
            zoom: 1.2,
            top: "10%",
            left: "8%",
            map: "浙江",
            roam: false,
            itemStyle: {
              normal: {
                areaColor: "rgba(0,0,0,0)",
                shadowColor: "rgba(7,114,204, .8)",
                shadowOffsetX: 5,
                shadowOffsetY: 5,
              },
              emphasis: {
                areaColor: "#00aeef",
              },
            },
          },
          animationDurationUpdate: 1000,
          series: [
            {
              name: "相关指数",
              type: "map",
              aspectScale: 0.85, //长宽比
              zoom: 1.2,
              mapType: "浙江", // 自定义扩展图表类型
              top: "10%",
              left: "8%",
              itemStyle: {
                normal: {
                  color: "red",
                  areaColor: "rgba(19,54,162, .5)",
                  borderColor: "rgba(0,242,252,.3)",
                  borderWidth: 1,
                  shadowBlur: 7,
                  shadowColor: "#00f2fc",
                },
                emphasis: {
                  areaColor: "rgba(255, 249, 133, 0.6)",
                  borderColor: "rgba(252, 239, 0, 0.6)",
                  borderWidth: 2,
                  shadowBlur: 10,
                  shadowColor: "#00f2fc",
                },
              },
              label: {
                show: true,
                formatter: (params) =>
                  `${params.name},${params.value},${
                    params.data.elseData ? params.data.elseData.value2 : ""
                  },${params.data.elseData ? params.data.elseData.value3 : ""}`,
 
                position: "right",
                distance: 20,
                textStyle: {
                  fontSize: 14,
                  color: "#606266",
                },
                emphasis: {
                  textStyle: {
                    //color: "#fff",
                  },
                },
                padding: [4, 4, 4, 4],
                backgroundColor: "rgba(255,255,255,0.6)",
                borderRadius: 3,
                borderColor: "#DCDFE6",
              },
              data: newData,
              universalTransition: true,
            },
            {
              type: "effectScatter",
              coordinateSystem: "geo",
              symbolSize: 7,
              effectType: "ripple",
              legendHoverLink: false,
              showEffectOn: "render",
              rippleEffect: {
                period: 4,
                scale: 2.5,
                brushType: "stroke",
              },
              zlevel: 1,
              // label: {
              //   formatter: (params) =>
              //     `${params.name},${params.value},${
              //       params.data.exData ? params.data.exData.value2 : ""
              //     },${params.data.exData ? params.data.exData.value3 : ""}`,
              //   show: true,
              //   position: "top",
              //   distance:60,
              //   textStyle: {
              //     fontSize: 14,
              //     color: "#606266",
              //   },
              //   emphasis: {
              //     textStyle: {
              //       //color: "#fff",
              //     },
              //   },
              //   padding: [4, 4, 4, 4],
              //   backgroundColor: "rgba(255,255,255,0.6)",
              //   borderRadius: 3,
              //   borderColor: "#DCDFE6",
              // },
              itemStyle: {
                normal: {
                  color: (params) => {
                    if (params.data.exData.value > 0) {
                      return "yellow";
                    } else {
                      return "#99FBFE";
                    }
                  },
                  shadowBlur: 5,
                  shadowColor: "#fff",
                },
              },
              symbol: (value, params) => {
                if (params.data.exData.value > 0) {
                  return "path://M100,0 L41.22,180.90 L195.10,69.09 L4.89,69.09 L158.77,180.90 z"; //五角星
                } else {
                  return "circle";
                }
              },
              data: convertData(seriesData),
            },
          ],
        };
      } else if (this.chartType == "bar") {
        let barData = [];
        for (let i = 0; i < seriesData.length; i++) {
          let ii = newData.findIndex((item) => item.name == seriesData[i].name);
          if (ii > -1) {
            barData.push({
              y: seriesData[i].name,
              x1: newData[ii].value,
              x2: newData[ii].elseData.value2,
            });
          } else {
            barData.push({
              y: seriesData[i].name,
              x1: "",
              x2: "",
            });
          }
        }
        let yData = barData.map((item) => item.y);
        this.options = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {
          },
          grid: {
            left: "6%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "value",
          },
          yAxis: {
            type: "category",
            data: yData,
          },
          animationDurationUpdate: 1000,
          series: [
            {
              name: "捐献",
              type: "bar",
              data: barData.map((item) => item.x1),
              universalTransition: true,
            },
            {
              name: "移植",
              type: "bar",
              data: barData.map((item) => item.x2),
              universalTransition: true,
            },
          ],
        };
      }
    },
    // 开启定时器
    startInterval() {
      const _self = this;
      // 应通过接口获取配置时间，暂时写死5s
      const time = 2000;
      if (this.intervalId !== null) {
        clearInterval(this.intervalId);
      }
      this.intervalId = setInterval(() => {
        _self.reSelectMapRandomArea();
      }, time);
    },
    // 重新随机选中地图区域
    reSelectMapRandomArea() {
      const length = 9;
      this.$nextTick(() => {
        const map = this.$refs.mapChart.chart;
        let index = Math.floor(Math.random() * length);
        while (index === this.preSelectMapIndex || index >= length) {
          index = Math.floor(Math.random() * length);
        }
        map.dispatchAction({
          type: "mapUnSelect",
          seriesIndex: 0,
          dataIndex: this.preSelectMapIndex,
        });
        map.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: index,
        });
        map.dispatchAction({
          type: "mapSelect",
          seriesIndex: 0,
          dataIndex: index,
        });
        this.preSelectMapIndex = index;
      });
    },
    handleMapRandomSelect() {
      this.$nextTick(() => {
        const map = this.$refs.mapChart.chart;
        const _self = this;
        setTimeout(() => {
          _self.reSelectMapRandomArea();
        }, 0);
        // 移入区域，清除定时器、取消之前选中并选中当前
        map.on("mouseover", function (params) {
          clearInterval(_self.intervalId);
          map.dispatchAction({
            type: "mapUnSelect",
            seriesIndex: 0,
            dataIndex: _self.preSelectMapIndex,
          });
          map.dispatchAction({
            type: "mapSelect",
            seriesIndex: 0,
            dataIndex: params.dataIndex,
          });
          _self.preSelectMapIndex = params.dataIndex;
        });
        // 移出区域重新随机选中地图区域，并开启定时器
        map.on("globalout", function () {
          _self.reSelectMapRandomArea();
          _self.startInterval();
        });
        this.startInterval();
      });
    },
  },
};
</script>