newcpms/ui/src/views/dashboard/NyxhChart.vue

<template>
  <div class="app-container-Nyxh">
    <div id="NyxhChart" :style="{height:height,width:width}"></div>
  </div>
</template>

<script>
import { listMonthplan } from "@/api/production/monthplan";
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '200px'
    },
    year: {
      type: Number,
    }
  },
  data() {
    return {
      //显示表格数据
      chartsList1: [],
      chartsList2: [],
      // 查询参数
      queryParams: {
        item: 4,
        year: 2020
      },
      // 获取当前年份
      searchFormField: {
        year: this.getNowTime(),
      },
      chart: null
    }
  },
  watch: {
    year(newValue, oldValue) {
      this.queryParams.year = newValue
      this.getList()
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  mounted() {
    this.$nextTick(() => {
      /*this.queryParams.year = this.searchFormField.year;*/
      this.getList()
    })
  },
  methods: {
    getList() {
      listMonthplan(this.queryParams).then(response => {
        this.chartsList1 = response.rows[0];
        this.chartsList2 = response.rows[1];
        this.chartsList3 = response.rows[2];
        this.initChart()
      });
    },
    /** 获取当前年份 */
    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var defaultDate = `${year}`;
      return defaultDate;
      this.$set(this.searchFormField, "year", defaultDate);
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.echarts.init(document.getElementById('NyxhChart'))

      this.chart.setOption({
        color: ['#4a7cf9', '#6be5ea', '#fff4f4'],
        /* 周围边距 */
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          top: '13%',
          containLabel: true
        },
        /* 标识 */
        legend: {
          data: ['Energy Consumption(EU)', 'Energy Consumption(AEU)'],
          textStyle:{
            color: '#ffffff'//字体颜色
          },
          right: 5,
          top: -5
        },
        /* 坐标轴显示 */
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'cross',
            label: {
              backgroundColor: '#a0a0a0'
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","YTD","TARGET"],
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color: '#ffffff',
            }
          },
          axisLine: {//x轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: '#ffffff',
              width: 0,
              type: "solid"
            }
          },
        },
        yAxis: [
          {
            type: 'value',
            name: 'Unit:(tec/t.BTX)',
            min: 0,
            max: 1,
            interval: 0.2,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                fontSize: 10,
                color: '#ffffffff',
                margin: 15
              },
            }
          },
          {
            type: 'value',
            min: 0,
            max: 1,
            interval: 0.2,
            axisLabel: {
              formatter: '{value} %',
              textStyle: {
                fontSize: 10,
                color: '#ffffffff',
                margin: 15
              },
            }
          }
        ],
        series: [
          {
            name: 'Energy Consumption(EU)',
            type: 'line',
            symbolSize: 5,   //折线点的大小
            itemStyle: {
              normal: {
                areaStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#4a7cf9' // 0% 处的颜色
                    }, {
                      offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  }
                },
                lineStyle: {
                  width: 2// 0.1的线条是非常细的了
                }
              }
            },
            data: [this.chartsList1.jan, this.chartsList1.feb, this.chartsList1.mar, this.chartsList1.apr, this.chartsList1.may, this.chartsList1.jun, this.chartsList1.jul, this.chartsList1.aug, this.chartsList1.sep, this.chartsList1.oct, this.chartsList1.nov, this.chartsList1.dec, this.chartsList1.ytd, this.chartsList1.target]
          },
          {
            name: 'Energy Consumption(AEU)',
            type: 'line',
            symbolSize: 5,   //折线点的大小
            itemStyle: {
              normal: {
                areaStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#4a7cf9' // 0% 处的颜色
                    }, {
                      offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  }
                },
                lineStyle: {
                  width: 2// 0.1的线条是非常细的了
                }
              }
            },
            data: [this.chartsList2.jan, this.chartsList2.feb, this.chartsList2.mar, this.chartsList2.apr, this.chartsList2.may, this.chartsList2.jun, this.chartsList2.jul, this.chartsList2.aug, this.chartsList2.sep, this.chartsList2.oct, this.chartsList2.nov, this.chartsList2.dec, this.chartsList2.ytd, this.chartsList2.target]
          }
        ]
      })
    }
  }
}
</script>