qy_bigScreen/src/components/echart/lineChart.vue

<template>
  <div ref="lineContainer" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import resize from '@/utils/resizeMixins.js'
export default {
  name: 'LineEcharts',
  mixins: [resize],
  props: {
    chartDayData: {
      type: Object,
      require: true,
      default: function() {
        return {}
      }
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chart: null,
      option: null
    }
  },
  watch: {
    chartDayData: {
      deep: true,
      mmediate: true,
      handler(val) {
        setTimeout(() => {
          this.initChart()
        }, 100)
      }
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    window.addEventListener('resize', this.__resizeHandler)
    this.resetPiechartDayData()
  },
  methods: {
    resetPiechartDayData() {
      clearInterval(this.timeRePie)
      this.timeRePie = setInterval(() => {
        // debugger;
        if (!this.chart) {
          return
        }
        // 不先清空chart没法重绘
        this.chart.clear()
        this.initChart()
      }, 8000)
    },
    initChart() {
      // const dom = document.getElementById('main2')
      const dom = this.$refs.lineContainer
      this.chart = echarts.init(dom, 'dark')
      this.setOptions(this.chartDayData)
    },
    setOptions({ timeData, returnData, borrowedData } = {}) {
      this.chart.setOption({
        backgroundColor: '#01103D',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          top: '4%',
          right: '4%',
          icon: 'rect',
          itemHeight: 6,
          itemWidth: 11,
          textStyle: {
            color: '#339CFF',
            fontSize: 18
          },
          data: [
            {
              name: '借出',
              icon: 'rect',
              textStyle: {
                color: '#41A3FF',
                fontFamily: 'DingTalk_JinBuTi_Regular'
              }
            },
            {
              name: '归还',
              icon: 'rect',
              textStyle: {
                color: '#FFD050',
                fontFamily: 'DingTalk_JinBuTi_Regular'
              }
            }
          ]
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: timeData,
          axisLabel: {
            show: true,
            formatter: function(value, idx) {
              return value
            },
            color: '#79B8FF',
            fontSize: 16,
            fontFamily: 'DingTalk_JinBuTi_Regular'
          },
          axisLine: {
            show: false,
            lineStyle: {
              width: '1',
              color: '#113D72',
              type: 'solid'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#333'
            }
          },
          boundaryGap: false
        }],
        yAxis: [
          {
            type: 'value',
            // 坐标轴最大值、最小值、强制设置数据的步长间隔
            max: function(value) {
              return Math.ceil(value.max + (value.max - value.min) * 0.2)
            },
            min: 0,
            axisLabel: {
              interval: 'auto',
              formatter: function(value) {
                // 使用formatter保证即使在缩放时也只显示整数
                return Math.round(value)
              },
              textStyle: {
                color: '#79B8FF',
                fontSize: 16,
                fontFamily: 'DingTalk_JinBuTi_Regular'
              }
            },
            // 轴线
            axisLine: {
              show: false,
              lineStyle: {
                color: '#113D72',
                width: '1',
                type: 'solid'
              }
            },
            // 坐标轴刻度相关设置。
            axisTick: {
              show: false
            },
            // 分割线
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(66, 139, 221, 0.2)',
                type: 'solid',
                // 透明度
                opacity: 1,
                width: 1
              }
            }
          }
        ],
        series: [
          {
            name: '借出',
            type: 'line',
            stack: 'Total',
            itemStyle: {
              color: '#41A3FF'
            },
            lineStyle: {
              width: 3,
              color: '#41A3FF'
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.6,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(254, 128, 66, 0)'
                },
                {
                  offset: 1,
                  color: '#41A3FF'
                }
              ])
            },
            data: borrowedData
          },
          {
            name: '归还',
            type: 'line',
            stack: 'Total',
            lineStyle: {
              width: 3,
              color: '#FFD14F'
            },
            showSymbol: false,
            itemStyle: {
              color: '#FFD14F'
            },
            areaStyle: {
              opacity: 0.6,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

                {
                  offset: 0,
                  color: 'rgba(24, 176, 143, 0)'
                },
                {
                  offset: 1,
                  color: '#FFD14F'
                }
              ])
            },
            data: returnData
          }
        ]
      })
    }
  }
}
</script>