intelligence-screen/src/components/echart/lineChartService.vue

<template>
  <div id="main2" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import resize from '@/utils/resizeMixins.js'
export default {
  name: 'LineEcharts',
  mixins: [resize],
  props: {
    chartData: {
      type: Object,
      require: true,
      default: function() {
        return {}
      }
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: 'calc(100% - 20px)'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      mmediate: true,
      handler(val) {
        setTimeout(() => {
          this.setOptions(val)
        }, 100)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      const dom = document.getElementById('main2')
      this.chart = echarts.init(dom, 'dark')
      this.setOptions(this.chartData)
    },
    setOptions({ returnData, borrowedData } = {}) {
      const time = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00']
      this.chart.setOption({
        backgroundColor: '#010326',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          top: '4%',
          right: '4%',
          icon: 'rect',
          itemHeight: 4,
          itemWidth: 26,
          textStyle: {
            fontSize: '16px',
            color: '#339CFF'
          },
          data: ['借出', '归还']
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: time.map(function(item) {
            return item
          }),
          axisLabel: {
            interval: 5,
            formatter: function(value, idx) {
              return value
            },
            color: '#fff'
          },
          axisLine: {
            lineStyle: {
              width: '1',
              color: '#113D72',
              type: 'solid'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#333'
            }
          },
          boundaryGap: false
        }],
        yAxis: [
          {
            type: 'value',
            // 坐标轴最大值、最小值、强制设置数据的步长间隔
            // max: 1000,
            min: 0,
            max: function(value) {
              return Math.ceil(value.max + (value.max - value.min) * 0.2)
            },
            // interval: 250,
            splitNumber: 5,
            axisLabel: {
              textStyle: {
                color: '#fff'
              }
            },
            // 轴线
            axisLine: {
              show: true,
              lineStyle: {
                color: '#113D72',
                width: '1',
                type: 'solid'
              }
            },
            // 坐标轴刻度相关设置。
            axisTick: {
              show: false
            },
            // 分割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#113D72',
                type: 'dashed',
                // 透明度
                opacity: 1,
                width: 1
              }
            }
          }
        ],
        series: [
          {
            name: '归还',
            type: 'line',
            smooth: 0.6,
            lineStyle: {
              width: 1,
              color: '#18B08F'
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.6,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

                {
                  offset: 0,
                  color: 'rgba(24, 176, 143, 0)'
                },
                {
                  offset: 1,
                  color: 'rgba(23, 175, 142, 1)'
                }
              ])
            },
            data: returnData
          },
          {
            name: '借出',
            type: 'line',
            smooth: 0.4,
            lineStyle: {
              width: 1,
              color: '#FE8042'
            },
            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: 'rgba(254, 128, 66, 1)'
                }
              ])
            },
            data: borrowedData
          }
        ]
      })
    }
  }
}
</script>