Echarts 图表 - 水量变化趋势可视化

<template>
  <div id="water2" ref="water2"></div>
</template>
<script>
import * as echarts from 'echarts';

export default {
  name: 'chartWater2',
  props: ['dayList', 'inList', 'outList', 'titleList'],
  data() {
    return {
      reChart: '',
    };
  },
  mounted() {
    setTimeout(() => {
      this.draw(this.dayList, this.inList, this.outList, this.titleList);
    }, 500);
  },
  methods: {
    draw(dayList, inList, outList, titleList) {
      // Check if the input data arrays are defined and have at least one element
      if (dayList && inList && outList && titleList && inList.length > 0 && outList.length > 0) {
        const option = {
          //覆盖配置数据option
          grid: {
            left: '3%',
            right: '6%',
            bottom: '6%',
            top: '20%',
            containLabel: true,
          },
          tooltip: {
            trigger: 'axis',
            backgroundColor: '#135777',
            borderColor: '#59a7cb',
            textStyle: {
              //---提示框内容样式
              color: '#fff',
            },
            axisPointer: {
              type: 'none',
            },
          },
          legend: {
            data: titleList,
            show: true,
            icon: 'circle',
            orient: 'horizontal',
            top: '5%',
            right: '5%',
            itemWidth: 8,
            itemHeight: 8,
            // itemGap: 30,
            textStyle: {
              // color: '#FFFFFF'
              color: '#C9C8CD',
              fontSize: 12,
            },
          },
          xAxis: {
            type: 'category',
            data: dayList,
            splitLine: {
              show: true,
              lineStyle: {
                color: ['rgba(255,255,255,0.2)'],
              },
            },
            axisLine: {
              show: true,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#a6a7a8',
              },
            },
            boundaryGap: false,
          },
          yAxis: [
            {
              type: 'value',
              name: '（KWH）',
              nameLocation: 'end',
              nameTextStyle: {
                color: '#fff',
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#a6a7a8',
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: ['rgba(255,255,255,0.2)'],
                },
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
              },
              minInterval: 1,
            },
          ],
          series: [
            {
              name: titleList[0],
              type: 'line',
              // smooth: true,
              symbol: 'circle',
              symbolSize: 6,
              itemStyle: {
                normal: {
                  color: '#03dafd',
                },
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: 'rgba(3, 218, 253,1)',
                      },
                      {
                        offset: 1,
                        color: 'rgba(3, 218, 253,0.2)',
                      },
                    ],
                    false
                  ),
                },
              },
              data: inList.map(value => value || 0), // Set undefined values to 0
            },
            {
              name: titleList[1],
              type: 'line',
              // smooth: true,
              symbol: 'circle',
              symbolSize: 6,
              // lineStyle: {
              //   type: 'dashed',
              // },
              itemStyle: {
                normal: {
                  color: '#fbba48',
                },
              },
              data: outList.map(value => value || 0), // Set undefined values to 0
            },
          ],
        };
        //初始化
        const chartObj = echarts.init(this.$refs.water2);
        chartObj.setOption(option);
        clearInterval(this.reChart);
        this.reChart = setInterval(() => {
          chartObj.clear();
          chartObj.setOption(option);
        }, 6000);
      }
    },

    isLode() {
      this.draw(this.dayList, this.inList, this.outList, this.titleList);
    },
  },
  watch: {
    inList(curVal, oldVal) {
      this.draw(this.dayList, this.inList, this.outList);
    },
  },
};
</script>
<style scoped>
#water2 {
  height: 100%;
}
</style>
<pre><code></code></pre>