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

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

<script>
import echarts from 'echarts'
import resize from '@/utils/resizeMixins.js'

export default {
  name: 'AcrossEcharts',
  mixins: [resize],
  props: {
    chartData: {
      type: Object,
      require: true,
      default: function() {
        return {}
      }
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    'chartData': {
      handler(val) {
        setTimeout(() => {
          this.drawChart()
        }, 100)
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.drawChart()
    window.addEventListener('resize', this.__resizeHandler)
  },
  methods: {
    drawChart() {
      const chartDom = document.getElementById('main')
      this.chart = echarts.init(chartDom)
      let option = null
      option = {
        grid: { // 边距
          left: '2%',
          right: '2%',
          bottom: '5%',
          top: '8%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#339cff'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: this.chartData.totalLendMonth,
          axisLine: { // 轴线的颜色以及宽度
            lineStyle: {
              color: 'rgba(17, 61, 114,0.5)'
            }
          },
          axisTick: { show: false },
          axisLabel: { // x轴文字的配置
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          type: 'value',
          // min: 5000,
          // max: 25000,
          min: 0,
          max: function(value) {
            return Math.ceil(value.max + (value.max - value.min) * 0.2)
          },
          splitNumber: 5,
          axisLine: {
            show: false
          },
          axisLabel: { // x轴文字的配置
            show: true,
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: { // 刻度线隐藏
            show: false
          },
          splitLine: { // 分割线配置
            lineStyle: {
              color: 'rgba(17, 61, 114,0.5)',
              type: 'solid'
            }
          }
        },
        series: [
          {
            name: '借阅量',
            data: this.chartData.totalLendData,
            type: 'line',
            areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0.1,
                      color: 'rgba(26, 201, 255, 0.5)' // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: 'rgba(26, 201, 255, 0.3)' // 0% 处的颜色
                    },
                    {
                      offset: 0.7,
                      color: 'rgba(26, 201, 255, 0.2)' // 0% 处的颜色
                    },
                    {
                      offset: 0.9,
                      color: 'rgba(26, 201, 255, 0.1)' // 100% 处的颜色
                    }
                  ]
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#339CFF', // 改变折线点的颜色
                lineStyle: {
                  color: 'rgba(26, 201, 255,0.5)' // 改变折线颜色
                }
              }
            }
          }
        ]
      }
      option && this.chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.h{
  color: rgb(26, 201, 255);
}
</style>