vue+echarts封装折线图

数据可视化封装折线图

1. html

<template>
  <div class="line-chart" :style="styleLineChart" ref="chart"></div>
</template>

2.js

<script>
export default {
  props: {
    styleLineChart: {
      type: Object,
      default: () => {
        return {
          width: '380px',
          height: '200px',
        };
      },
    },
    maxData: {
      type: Number,
      default: 100,
    },
    coloreLineChart: {
      type: Array,
      default: () => {
        return ['rgb(191,255,0,0.2)', 'rgb(191,255,0,0)'];
      },
    },
    rowData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    unit: {
      type: String,
      default: () => {
        return '单位：%';
      },
    },
    lineColor: {
      type: String,
      default: () => {
        return '#ffffff';
      },
    },
    grid: {
      type: Object,
      default: () => {
        return {
          bottom: '15%',
          left: '10%',
          right: '10%',
          top: '20%',
        };
      },
    },
    smooth: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
  },
  data() {
    return {
      chartInst: null,
      option: {},
      setTime: null,
    };
  },
  methods: {
    instantiation() {
      this.chartInst = this.$echarts.init(this.$refs.chart);

      this.option = {
        tooltip: {
          trigger: 'axis',

          axisPointer: {
            type: 'cross',
            animation: false,
            label: {
              backgroundColor: '#505765',
            },
          },
        },
        grid: this.grid,
        xAxis: {
          boundaryGap: false,
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: '#BFEBFF',
            },
          },
          axisLabel: {
            fontSize: 12,
          },
        },
        yAxis: {
          type: 'value',
          name: this.unit,
          nameTextStyle: {
            fontSize: 12,
            padding: [0, 20, 0, 10], // 四个数字分别为上右下左与原位置距离
          },
          max: this.maxData,
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: '#BFEBFF',
            },
          },
          axisLabel: {
            fontSize: 12,
            interval: 0,
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0.1)'],
            },
          },
        },
        series: [
          {
            data: [],
            avoidLabelOverlap: false,
            type: 'line',
            areaStyle: {},
            itemStyle: {
              normal: {
                lineStyle: {
                  color: this.lineColor,
                },
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: this.coloreLineChart[0] },
                  { offset: 1, color: this.coloreLineChart[1] },
                ]),
              },
            },
            smooth: this.smooth,
          },
        ],
      };
    },
    rowDataChart() {
      let name = [];
      let value = [];
      this.rowData.forEach(val => {
        name.push(val['name']);
        value.push(val['value']);
      });
      this.option.xAxis.data = name;
      this.option.series[0].data = value;
      this.chartInst.setOption(this.option, true);
    },
    tooltipShuffling() {
      clearInterval(this.setTime);
      let count = 0;
      this.setTime = setInterval(() => {
        if (count == this.rowData.length) {
          count = 0;
        }
        this.chartInst.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: count,
        });
        count++;
      }, 1000);
    },
  },
  mounted() {
    this.instantiation();
    this.rowDataChart();
    this.tooltipShuffling();
  },
  beforeDestroy() {
    clearInterval(this.setTime);
    this.$echarts.init(this.$refs.chart).dispose();
  },
  watch: {
    rowData: {
      handler(newV, oldV) {
        this.instantiation();
        this.rowDataChart();
        this.tooltipShuffling();
      },
      deep: true,
    },
  },
};
</script>

3.style基于scss

<style scoped>
.line-chart {
  margin-top: 2px;
  margin-bottom: 10px;
}
</style>