iot-front-ui/src/components/doubleCarbon/overview/charts/carbonEmissionChart.vue

<script>
import apiCarbonOverview from "@/api/carbon/apiCarbonOverview";

export default {
  data() {
    return {
      seriesData: {
        name: '',
        data: [],
        type: 'line',
        smooth: true,
        showSymbol:false,
        symbolSize: 1,
        lineStyle: {
          width: 1,
        },
        emphasis: {
          scale:1.5
        }
      },
      show: false,
      option: {
        legend: {
          data: [

          ],
          selected: {

          },
          type: "scroll",
          width: '80%'
        },
        grid: {
          left: '0%', //默认10%
          right: '20px', //默认10%
          bottom: '20px', //默认60
          top: '60px',
          containLabel: true
          //grid区域是否包含坐标轴的刻度标签
        },
        xAxis: {
          data: []
        },
        yAxis: [
          {
            name: '碳排放量(tCO₂e)',
            type: 'value',
            nameTextStyle: {
              padding: [0, 0, 0, 50]
            },
          },
        ],
        dataZoom: this.$constant.ECHARTS_OPTION_DATAZOOM,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            color: '#fff',
            align: 'left',
            fontSize: 14
          },
          axisLine: {//x坐标轴轴线
            show: true,
            lineStyle: {//x坐标轴轴线样式
              color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
            }
          },
          backgroundColor: 'rgba(0,0,0,0.8)',
        },
        series: []
      },
    }
  },
  props: {
    height: Number,
    queryData: Object,
    callBackCompanyOption: Function,
  },
  mounted() {
    this.$nextTick(()=>{
      this.init();
    })
  },
  methods: {
    init() {
      let chart = this.$echarts.init(this.$refs.myChart)
      this.chart = chart;
      this.$util.chartsResize(this.chart);
      chart.setOption(this.option)
      this.getData()
    },
    getData() {
      return apiCarbonOverview.getCarbonInfo(this.queryData).then(res=>{
        let names = [];
        if (res.length>0) {
          let obj = res[0].jsonObject;
          for (const objKey in obj) {
            names.push(objKey);
          }
        }
        this.option.legend.data = names;
        let series = [];
        let selected = {};
        let comoptions = [];
        for (let i = 0; i < names.length; i++) {
          let obj = JSON.parse(JSON.stringify(this.seriesData));
          obj.name = names[i];
          series.push(obj);

          let opt = {
            label: names[i],
            value: i+1,
          }
          comoptions.push(opt)
          selected[names[i]+''] = false;
        }
        if (this.queryData.companyId != '0') {
          let name = names[Number(this.queryData.companyId)-1];
          selected[name] = true;
        } else {
          let name = names[0];
          selected[name] = true;
        }
        this.option.legend.selected = selected;
        this.callBackCompanyOption(comoptions)
        this.option.series = series;
        let data = this.$util.dataUtil.covertDataToEcharts(res, names)
        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
      })
    }
  }
}
</script>

<template>
  <div class="myChart" style="width: 100%" :style="{height: height+'px'}" ref="myChart" ></div>
</template>

<style lang="less" scoped>

</style>