lg_frontend/components/charts/PeakProduceTrendChart.vue

<!--生产趋势-->
<template>
  <div id="charts" ref="charts">

  </div>
</template>

<script>
import * as echarts from 'echarts'
import {EleResize} from '@/utils/esresize';

const lodash = require('lodash')
export default {
  name: 'PeakProduceTrendChart',
  props: {
    dataSource: {
      type: Array,
      default: () => []
    },
    color: {
      type: Array,
      default: () => [
        '#00F6FF',
        '#007CFF',
        '#FF8D1A'
      ]
    }
  },
  data() {
    return {}
  },
  watch: {
    dataSource: {
      deep: true,
      immediate: true,
      handler(value) {
        if (value.length) {
          this.$nextTick(() => {
            this.init()
          })
        }
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },

  methods: {
    init() {
      let myCharts = echarts.init(this.$refs.charts)
      let barCharts = this.$refs.charts
      // 复制代码

      let color = this.color;

      let xAxisData = this.dataSource.map(item => item.name);
      let yAxisData1 = this.dataSource.map(item => item.value1);
      let yAxisData2 = this.dataSource.map(item => item.value2);
      let yAxisData3 = this.dataSource.map(item => item.value3)

      let option = {
        color: color,
        legend: {
          top: 0,
          right: 0,
          itemWidth: 11,
          itemHeight: 11,
          icon: 'circle',
          textStyle: {
            color: '#B8D3F1',
            fontSize: 12,

          }
        },
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          top: 50,
          bottom: 10,
          left: 20,
          right: 20,
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            axisLabel: {
              fontSize: 12,
              color: '#B8D3F1'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(176,215,255,0.40)',
              },
            },
            axisTick: {
              show: false
            },
            data: xAxisData,
          },
        ],
        yAxis: [
          {
            type: 'value',
            position: 'left',
            splitNumber: 5,
            name: '单位：t',
            axisLabel: {
              fontSize: 12,
              color: '#B8D3F1'
            },
            nameTextStyle: {
              color: '#B8D3F1',
              fontSize: 12,
              lineHeight: 10,
            },
            // 分割线
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(176,215,255,0.40)',
                type: 'dashed'
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: 'value',
            position: 'right',
            name: '单位：m³',
            splitNumber: 5,
            axisLabel: {
              fontSize: 12,
              color: '#B8D3F1'
            },
            nameTextStyle: {
              color: '#B8D3F1',
              fontSize: 12,
              lineHeight: 10,
            },
            // 分割线
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(176,215,255,0.40)',
                type: 'dashed'
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '石油',
            type: 'line',
            smooth: false,
            zlevel: 3,
            symbol: 'none', //数据交叉点样式
            data: yAxisData1,
            yAxisIndex: 0, // 通过这个判断左右
            lineStyle: {
              width: 3,
            }
          },
          {
            name: '氧气',
            type: 'line',
            smooth: false,
            zlevel: 3,
            symbol: 'none', //数据交叉点样式 (实心点)
            data: yAxisData2,
            yAxisIndex: 1, // 通过这个判断左右
            lineStyle: {
              width: 3,
            }
          },
          {
            name: '氮气',
            type: 'line',
            smooth: false,
            zlevel: 3,
            symbol: 'none', //数据交叉点样式 (实心点)
            data: yAxisData3,
            yAxisIndex: 1, // 通过这个判断左右
            lineStyle: {
              width: 3,
            }
          },
        ],
      };


      myCharts.setOption(option)
      let listener = function () {
        myCharts.resize()
      }
      EleResize.on(barCharts, listener)
    }
  }
}
</script>

<style scoped lang="less">
#charts {
  height: 100%;
  width: 100%;
}
</style>