hyyfClient/src/views/Zoology/chart/ChartSewageLine.vue

<template>
  <div :id="'chart-sewage-line-' + lineConfig.id" style="width: 100%; height: 100%"></div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: "ChartSewageLine",
  computed: {
    ...mapState(['color'])
  },
  props: {
    lineConfig: {
      type: Object,
      default: function () {
        return {
          id: 0,
          time: [],
          data: [],
          name: '默认',
          unit: '%'
        }
      }
    }
  },
  watch: {
    color(newVal) {
      if(newVal) {
        this.myChart.clear();
        this.init()
      }
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  methods: {
    init() {
      // 时间
      let dataAxis = this.lineConfig.time;
      let start = dataAxis.length - 12;
      let end = dataAxis.length - 1;
      // 数据
      let data = this.lineConfig.data;
      // 单位
      let unit = this.lineConfig.unit;
      // 名称
      let name = this.lineConfig.name;
      let options = {
        title: {
          text: name,
          top: "5%",
          left: '2%',
          textStyle: {
            color: this.color,
            fontSize: 16,
            fontWeight: 300,
          },
          padding: 5,
        },
        tooltip: {
          trigger: 'axis',
        },
        color: [this.color],
        dataZoom: [{
          type: 'inside',
          startValue: start,
          endValue: end,
          show: false
          // zoomOnMouseWheel: false,
          // zoomLock: true,
        }],
        // dataZoom: [
        //
        //   {
        //     type: 'slider',
        //     startValue: start,
        //     endValue:end,
        //     zoomOnMouseWheel: false,
        //     zoomLock: true,
        //   },
        //   {
        //     type: 'inside'
        //   },
        // ],
        xAxis: [
          {
            type: 'category',
            data: dataAxis,
            axisPointer: {
              type: 'shadow'
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#6e7079',
              }
            },
            axisTick:{
              show:false
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '近7天统计',
            axisLabel: {
              formatter: `{value}${unit}`
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#6e7079',
              }
            },
            axisTick:{
              show:false
            },
          }
        ],
        series: [
          {
            name: name,
            type: 'line',
            // stack: 'Total',
            smooth: true,
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            itemStyle : {
              color: this.color,
              borderColor: this.color,
              normal: {
                label : {
                  show: true,
                  textStyle: {
                    fontSize: 14
                  }
                }
              }
            },
            data: data
          }
        ]
      }
      this.myChart.setOption(options)
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('chart-sewage-line-' + this.lineConfig.id));
    this.init()
  }
}
</script>

<style scoped>

</style>