折线图

效果图

具体代码

<template>
  <div :style="`height:${height}`">
    <div style="width: 100%" :style="`height:${height}`" ref="barChart"></div>
  </div>
</template>
<script>
export default {
  props: {
    height: {
      //y轴名称
      type: String,
      default: "100%",
    },
    colorArr: {
      type: Array,
      default: () => ["#FFD554", "#1BFFD1"],
    },
    chartData: {
      type: Object,
    },
  },
  data() {
    return {
      myChart: null,
      xData: ["区域1", "区域2", "区域3区域3", "区域4", "区域5", "区域6"],
      seriesData: [],
      legendData: [],
      allData: [1, 2],
    };
  },
  watch: {
    chartData: {
      deep: true,
      immediate: true,
      handler(newVal) {
        //console.log(newVal);
        //         chartData的数据格式
        //{
        //     "yAxis": ["10-31","11-01","11-02", "11-03","11-04","11-05","11-06"],
        //     "series": [
        //         {
        //             "data": [3,3,4,4,4,0, 0],
        //             "name": "立案数"
        //         },
        //         {
        //             "data": [1,2,3,2,2,0,0],
        //             "name": "结案数"
        //         }
        //     ]
        // }
        this.$nextTick(() => {
          if (newVal) {
            this.initData();
          }
        });
      },
    },
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.initData();
    // });
  },
  methods: {
    initData() {
      //将数据重新组一下，需要组legend的数据，和series的数据
      this.seriesData = [];
      this.legendData = [];
      this.xData = this.chartData.yAxis;
      this.chartData.series.map((item, index) => {
        let obj = {
          name: item.name,
          itemStyle: {
            color: this.colorArr[index],
          },
        };
        this.legendData.push(obj);
        let seriesObj = {
          name: item.name,
          type: "line",
          smooth: true,
          showAllSymbol: true,
          // symbol: "emptyCircle",
          symbolSize: this.xData.length > 7 ? 0 : 10,
          yAxisIndex: 0,
          symbol: "circle", // 设置标记的图形为circle
          itemStyle: {
            normal: {
              color: "#071B32",
              borderColor: this.colorArr[index],
              lineStyle: {
                color: this.colorArr[index],
              },
            },
          },
          data: item.data,
        };
        this.seriesData.push(seriesObj);
      });
      this.drawChart();
    },
    drawChart() {
      if (this.myChart) {
        this.myChart.dispose && this.myChart.dispose();
      }
      let colorList = this.colorArr;
      const option = {
        // backgroundColor: "#191E40",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
          formatter(params) {
            // params的个数等于折线的条数（对多条折线数据进行加单位，就需要遍历）
            var relVal = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
              let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:${colorList[i]}"></span>`;
              relVal +=
                "<br/>" +
                circle +
                params[i].seriesName +
                " : " +
                params[i].value;
            }
            return relVal;
          },
          itemStyle: {
            color: "rgba(139, 36, 36, 1)",
          },
        },
        color: ["#2db7f5", "#ff6600", "#808bc6"],
        legend: {
          icon: "rect",
          itemWidth: 10,
          itemHeight: 3,
          itemGap: 13,
          top: "4%",
          data: this.legendData,
          right: "4%",
          textStyle: {
            fontSize: 12,
            color: "#BFE0F1",
          },
        },
        grid: {
          top: "22%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            // boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: "#57617B",
              },
            },

            axisTick: {
              show: false, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(191, 224, 241, 1)", //X轴文字颜色
                fontSize: 12,
              },
              // formatter: function (params) {
              //   //设置文本过长超出隐藏...表示 【贴上这段代码即可】
              //   var val = "";
              //   var show = 3;
              //   if (params.length > show) {
              //     val = params.substr(0, show) + "...";
              //     return val;
              //   } else {
              //     return params;
              //   }
              // },
            },
            data: this.xData,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "个",
            nameTextStyle: {
              color: "rgba(191, 224, 241, 1)",
              fontSize: 14,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "rgba(255, 255, 255, 0.24)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255, 255, 255, 0.24)",
                width: 1,
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(191, 224, 241, 1)",
                fontSize: 14,
              },
            },
          },
        ],
        series: this.seriesData,
      };
      this.myChart = this.$echarts.init(this.$refs.barChart);
      this.myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  },
  beforeDeatroy() {
    //销毁图表实例，避免内存溢出
    this.myChart.dispose && this.myChart.dispose();
  },
};
</script>