<template>
  <div class="chart">
    <div id="tendencyChart"></div>
  </div>
</template>

<script>
export default {
  name: "Echarts",
  props: {
    echartData: {
      type: Object,
      default: () => ({
        legendData: [],
        xAxisData: [],
        yAxisData: [],
        seriesData: [],
      }),
    },
  },
  data() {
    return {
      xFontColor: "rgba(256,256,256,1)",
    };
  },
  created() {},
  watch: {
    echartData: {
      //深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        this.echart();
      },
      deep: true, //true 深度监听
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.echart();
    });
  },
  methods: {
    // 绘制图标
    echart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(
        document.getElementById("tendencyChart")
      );
      myChart.clear();
      // 绘制图表
      myChart.setOption({
        color: [
          "#ee6666",
          "#91cc75",
          "#fac858",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
          "#03bcff",
        ],
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var relVal = params[0].name;
            for (var i = 0; i < params.length; i++) {
              // if (params[i].seriesName.indexOf("(") != -1) {
              //   relVal +=
              //     "<br/>" +
              //     params[i].seriesName +
              //     " : " +
              //     params[i].value +
              //     params[i].seriesName.match(/\(([^)]*)\)/)[0];
              // } else {
              //   relVal +=
              //     "<br/>" + params[i].seriesName + " : " + params[i].value;
              // }
              relVal +=
                  "<br/>" + params[i].seriesName + " : " + params[i].value;
            }
            return relVal;
          },
        },
        legend: {
          icon: "circle",
          data: this.echartData.legendData,
          textStyle: {
            color: this.xFontColor,
          },
          lineStyle: {
            width: 2.5,
          },
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "15%",
          containLabel: true,
        },
        dataZoom: [
          {
            id: "dataZoomX",
            type: "slider",
            xAxisIndex: [0],
            filterMode: "filter",
            start: 0,
            end: 50,
            startValue: 0,
            endValue: 10,
            textStyle: {
              color: this.xFontColor,
            },
          },
        ],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.echartData.xAxisData,
          axisLabel: {
            show: true,
            textStyle: {
              color: this.xFontColor, //这里用参数代替了
            },
          },
          axisLine: {
            lineStyle: {
              color: this.xFontColor,
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              color: this.xFontColor, //这里用参数代替了
            },
          },
          axisLine: {
            lineStyle: {
              color: this.xFontColor,
            },
            show: false,
          },
        },
        series: this.echartData.seriesData,
      });
      window.onresize = function () {
        myChart.resize();
      };
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.chart {
  width: 100%;
}
#tendencyChart{
  height: 320px;
}
@media screen and (max-width: 1440px) {
 #tendencyChart{
  height: 230px;
}
}
</style>
