LJ-UI/src/views/dashboard/LineChart.vue

<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'



  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '260px'
      },
      autoResize: {
        type: Boolean,
        default: true
      },
      chartData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        chart: null
      }
    },
    watch: {
      chartData: {
        deep: true,
        //handler(val) {
          //debugger
          //this.setOptions(val)
        //}
        handler(newValue,oldValue){
          this.chart.dispose();
          this.chartData=newValue;
          this.initChart(); //值发生改变则渲染一次echarts
        }
      }
    },
    mounted() {
      // debugger
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
      },
      setOptions({seriesNames,xAxisDatas,seriesDatas} = {}) {
        this.chart.setOption({
          /**
          title: {
            text: '小榄工厂蚊香车间周产量一览'
          },**/
          xAxis: {
            data: xAxisDatas,//横坐标名称
            boundaryGap: false,
            axisTick: {
              show: false
            }
          },
          grid: {
            left: 10,
            right: 10,
            bottom: 20,
            top: 30,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            padding: [5, 10]
          },
          yAxis: {
            axisTick: {
              show: false
            }
          },
          legend: {
            data: seriesNames
          },
          series:seriesDatas,
          toolbox:{
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: { readOnly: false },
              magicType: { type: ['line', 'bar'] },
              restore: {},
              saveAsImage: {}
            }
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow'
              },
              formatter: function (params) {
                  let result="";
                  for (let i = 0; i < params.length; i++) {
                          if(params[i].data!=0){
                              result+=params[i].marker + params[i].seriesName + '：' + params[i].data + '<br>'
                          }
                  }
                  return params[0].name + '<br/>'
                      + result

              }

          }
        })
      }
    }
  }
</script>