echarts 折线雨情单折线双色

<template>
  <div ref="echarts" style="width: 100%; height: 100%"></div>
</template>
<script>
import * as echarts from "echarts";

export default {
  props: {
    // echart数据
    rainTrendData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 刷新
    refresh: {
      type: Number,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    refresh() {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
      this.initChart();
    },
    rainTrendData: {
      deep: true,
      handler(val) {
        this.initChart();
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });

    window.addEventListener("resize", this.resizeChart);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    //初始化图表
    initChart() {
      let _that = this;
      let xData = this.rainTrendData.dateRange;
      let legendData = []; //图例
      let history = this.rainTrendData.history;
      let forecast = [];
      if (
        this.rainTrendData.forecast &&
        this.rainTrendData.forecast.length > 0
      ) {
        forecast = this.rainTrendData.forecast.map((val) => {
          return val === "" ? "-" : val;
        });
      }
      this.chart = echarts.init(this.$refs.echarts);
      let option = (option = {
        grid: {
          top: "20%",
          left: "8%",
          bottom: "20%",
          right: 0,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
          formatter: function (params) {
            var htmlStr = "";

            if (params) {
              var htmlStr = "";
              htmlStr += params[0].name.replace(/\-/g, "/") + "
"; //x轴的名称
              for (var i = 0; i < params.length; i++) {
                var param = params[i]; // 存一份item项
                var seriesName = param.seriesName; //图例名称
                var value = param.value; //y轴值
                var color = param.color; //图例颜色
                if (value != "-") {
                  htmlStr += "";
                  htmlStr +=
                    '+
                    color +
                    ';">';
                  htmlStr += seriesName + "：" + value + "毫米";
                  htmlStr += "";
                }
              }
              return htmlStr;
            } else {
              return;
            }
          },
        },
        legend: {
          orient: "vertical",
          left: "center",
          bottom: "top",
          padding: [10, 0, 0, 0],
          data: legendData,
          //图例滚动
          // type: 'scroll',
          //图例文字样式
          textStyle: {
            color: "rgba(36, 173, 254, 1)",
            fontSize: "1rem",
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            interval: 1,
            axisLabel: {
              color: "#E3FCFF",
              fontSize: 14,
              fontFamily: "SourceHanSansCN",
              margin: 10, //刻度标签与轴线之间的距离
            },
            axisLine: {
              show: false,
            },
            data: xData,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "mm",
            nameTextStyle: {
              align: "right",
              color: "#E3FCFF",
              fontSize: 14,
              fontFamily: "SourceHanSansCN",
            },
            min: 0,

            axisLabel: {
              formatter: "{value} ",
            },
            axisLabel: {
              textStyle: {
                //坐标轴颜色
                color: "#E3FCFF",
                fontSize: 14,
                fontFamily: "SourceHanSansCN",
                fontWeight: 500,
              },
              formatter: function (value, index) {
                if (value > 0) {
                  return value.toFixed(1);
                } else {
                  return value;
                }
              },
            },
            //坐标轴线样式
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed", //solid实线;dashed虚线
                color: "#2A384D",
              },
            },
          },
          {
            type: "value",
            name: "",
            min: 0,
            interval: 2,
            axisLabel: {
              formatter: "{value}",
            },
            axisLabel: {
              textStyle: {
                //坐标轴颜色
                color: "rgba(36, 173, 254, 1)",
                fontSize: "1rem",
              },
            },
            //坐标轴线样式
            splitLine: {
              show: true,
              lineStyle: {
                type: "solid",
                color: "rgba(36, 173, 254, 0.2)",
              },
            },
          },
        ],
        series: [
          {
            name: "降雨量",
            data: history,
            type: "line",
            smooth: true, //true曲线; false折线
            itemStyle: {
              normal: {
                color: "#24adfe", //改变折线点的颜色
                lineStyle: {
                  color: "#24adfe", //改变折线颜色
                  type: "solid",
                },
              },
            },
            areaStyle: {
              //折线图颜色半透明
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(16, 104, 211, 0.8)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(16, 104, 211, 0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
          {
            name: "降雨量",
            data: forecast,
            type: "line",
            smooth: true, //true曲线; false折线

            itemStyle: {
              normal: {
                color: "#ffc600", //改变折线点的颜色
                lineStyle: {
                  color: "#ffc600", //改变折线颜色
                  type: "solid",
                },
              },
            },
            areaStyle: {
              //折线图颜色半透明
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(207, 161, 9, 0.8)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(207, 161, 9, 0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      });

      this.chart.setOption(option);
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    },
  },
  destroyed() {
    if (this.chart) {
      this.chart.dispose();
    }
  },
};
</script>