echarts组件——折线统计图

折线图&折线渐变图

组件代码

<template>
  <div :class="classname" :style="{height:height,width:width}" />
</template>

<script>
// 折线图&折线渐变图
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

const animationDuration = 2000

export default {
  mixins: [resize],
  props: {
    classname: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    color: { // 折线图颜色
      type: Array,
      default: () => ['rgba(88, 201, 113, 1)', 'rgba(22, 93, 255, 1)']
    },
    areacolor: { // 渐变颜色
      type: Array,
      default: () => [
        ['rgba(88, 201, 113, 0.3)', 'rgba(22, 93, 255, 0.3)'],
        ['rgba(88, 201, 113, 0)', 'rgba(22, 93, 255, 0)']
      ]
    },
    xaxisdata: { // x轴数据
      type: Array,
      default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    legenddata: { // 图例
      type: Array,
      default: () => [
        'Direct',
        'Mail Ad',
        'Affiliate Ad',
        'Video Ad',
        'Search Engine'
      ]
    },
    legendshow: { // 图例显示
      type: Boolean,
      default: () => true
    },
    linedata: { // 数据
      type: Array,
      default: () => [
        [100, 302, 301, 334, 390, 330, 320],
        [320, 132, 101, 134, 90, 230, 210],
        [220, 182, 191, 234, 290, 330, 310],
        [150, 212, 201, 154, 190, 330, 410],
        [820, 832, 901, 934, 1290, 1330, 1320]
      ]
    },
    labelshow: { // 数字是否展示
      type: Boolean,
      default: false
    },
    areashow: { // 是否有渐变阴影效果
      type: Boolean,
      default: false
    },
    smooth: { // 曲线是否平滑
      type: Boolean,
      default: false
    },
    ratiodata: { // 环比数据
      type: Array,
      default: () => []
    },
    rationame: {
      type: String,
      default: '环比'
    },
    ratiounit: {
      type: String,
      default: ''
    },
    xlinecolor: {
      type: String,
      default: '#000000'
    },
    ylinecolor: {
      type: String,
      default: '#000000'
    },
    gridbottom: {
      type: String,
      default: '0'
    },
    valueunit: {
      type: String,
      default: ''
    },
    toolnamecust: {
      type: Boolean,
      default: false
    },
    // x轴标签是否全部显示
    axislabelshow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      series: [],
      chart: null
    }
  },
  watch: {
    linedata: {
      deep: true,
      handler(val) {
        this.$nextTick(() => {
          this.series = this.legenddata.map((name, sid) => {
            const data = {
              name,
              type: 'line',
              smooth: this.smooth,
              showSymbol: false,
              data: this.linedata[sid],
              animationDuration
            }
            if (this.areashow) {
              data.areaStyle = {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: this.areacolor[0][sid] // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: this.areacolor[1][sid] // 100% 处的颜色
                  }
                ])
              }
            }
            return data
          })
          this.initChart()
        })
      }
    }
  },
  mounted() {
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      const _this = this
      this.chart.setOption({
        color: this.color,
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: (params) => {
            let result = `<div>${params[0].axisValue}</div>`
            if (_this.toolnamecust) {
              result = `<div>${params[0].axisValue}:00</div>`
            }
            params.map((item, index) => {
              result += `<div style="display: flex; justify-content: space-between"><span>${_this.legenddata[index]}: &nbsp; </span><span>${_this.linedata[index][params[0].dataIndex]}${this.valueunit}</span></div>`
            })
            if (this.ratiodata.length) {
              result += `<div>${this.rationame}: ${this.ratiodata[params[0].dataIndex]}${this.ratiounit}</div>`
            }
            return result
          }
        },
        legend: {
          icon: 'circle',
          top: '0',
          right: '0',
          show: this.legendshow,
          data: this.legenddata,
          bottom: '0'
        },
        grid: {
          top: '15%',
          left: '0%',
          right: '0%',
          bottom: this.gridbottom,
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: this.xaxisdata,
          axisTick: {
            show: false,
            alignWithLabel: true
          },
          axisLine: {
            lineStyle: {
              color: this.xlinecolor
            }
          },
          axisLabel: this.axislabelshow ? {
            interval: 0 // x轴标签全部显示
          } : {}
        }],
        yAxis: [{
          type: 'value',
          // name: '单位',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: this.ylinecolor
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#E5E6EB',
              type: 'dashed'
            }
          },
          splitArea: {
            show: false
          }
        }],
        series: this.series,
        dataZoom: this.axislabelshow ? [
          {
            show: true,
            type: 'slider',
            backgroundColor: 'rgba(127, 127, 127, 0.3)',
            fillerColor: 'rgba(127, 127, 127, 1)',
            borderColor: 'rgba(127, 127, 127, 0.3)',
            showDetail: false,
            filterMode: 'empty',
            showDataShadow: false,
            brushSelect: false, // 是否开启刷选功能
            height: 10,
            handleSize: 0,
            xAxisIndex: [0],
            zoomLock: true, // 是否锁定选择区域（或叫做数据窗口）的大小
            throttle: 100, // 设置触发视图刷新的频率。
            realtime: true,
            bottom: '-2%',
            startValue: 0,
            endValue: 6
          }
        ] : []
      })
    }
  }
}
</script>

使用组件，传值格式可以看组件的默认数据的格式