echarts封装（例子：动态时间滚动案例）

1-建立这样一个文件夹和下面的文件，作为子组件

 echart-option.js   这个文件集中配置option,参数可参考

Documentation - Apache ECharts

export const newOption = {
    title: {
        text: '',
    },
    xAxis: {
        type: 'category',
        boundaryGap: true,
    },
    yAxis: {
        name: '值',
        boundaryGap: [0, '100%'],
        axisLine: {
            show: true,
        },
        splitLine: {
            show: true
        }
    },
    series: [{
            type: 'line',
            name: 'Mon',
            Symbol: 'none',
            // yAxisIndex: 1
        },
        {
            type: 'line',
            name: 'Tue',
            Symbol: 'none',
        },
        {
            type: 'line',
            name: 'Wed',
            Symbol: 'none',
        },
        {
            type: 'line',
            name: 'Thu',
            Symbol: 'none',
        },
        {
            type: 'line',
            name: 'Fri',
            Symbol: 'none',
        },
        {
            type: 'line',
            name: 'Sat',
            Symbol: 'none',
        },
        {
            type: 'line',
            name: 'Sun',
            Symbol: 'none',
        },
    ]
}

index.vue

<template>
  <div class="chart"></div>
</template>
 
<script>
import { merge, isEmpty } from "lodash";
export default {
  props: {
    // 业务数据
    dataList: {
      type: Array,
      default: () => []
    },
    // option
    echartOption: {
      type: Object,
      default: () => ({})
    },
    // xy对应关系
    echartDataSet: {
      type: Array,
      default: () => {},
    },
    // 样式
    echartStyle: {
      type: Array,
      default: () => {},
    }
  },
  data() {
    return {
      chart: null
    };
  },
  methods: {
    /**
     * 将业务数据加入到基础样式配置中
     * @returns {Object} 完整的echart配置
     */
    assembleDataToOption() {
      return merge(
        {},
        this.echartOption,
        {
          dataset: [
            {
              source: this.dataList,
              dimensions: this.echartDataSet,
            }
          ],
        },
        this.echartStyle
      );
    },
 
    /**
     * 更新echart视图
     */
    updateChartView() {
      if (!this.chart) return;
      const fullOption = isEmpty(this.dataList)
        ? this.echartOption
        : this.assembleDataToOption();
      this.chart.setOption(fullOption, true);
    },
 
    /**
     * 当窗口缩放时，echart动态调整自身大小
     */
    handleWindowResize() {
      if (!this.chart) return;
      this.chart.resize();
    }
  },
  watch: {
    dataList: {
      deep: true,
      handler() {
        this.updateChartView();
      }
    }
  },
  mounted() {
    this.chart = this.$echarts.init(this.$el);
    this.updateChartView();
    window.addEventListener("resize", this.handleWindowResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleWindowResize);
  }
};
</script>
 
<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>

2-在项目中使用 父组件引用载入数据

我做的动态数据，也可静态，直接给dataList赋值数组对象即可

<template>
  <div>
    <p>echarts</p>
    <div class="echartstyle">
      <EchartCom
        :dataList="dataList"
        :echartOption="echartOption"
        :echartDataSet="echartDataSet"
      ></EchartCom>
    </div>
  </div>
</template>

<script>
import EchartCom from "@/components/echarts-demo/index";
import { newOption } from "@/components/echarts-demo/echarts-option";
export default {
  components: {
    EchartCom,
  },
  data() {
    return {
      dataList: [],  // 格式[{time: '2020',Mon: 2},{time: '2021',Mon: 4}]
      echartOption: newOption,
      //  这里time（下标0）是x轴，后续都是y轴对应，y轴值顺序是按option里面series一一对应
      echartDataSet: ["time", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], 
    };
  },
  created() {
    for (let i = 0; i < 100; i++) {
      const item = {
        time: Math.random() * 10 + 2016 + '',
        Mon: Math.random() * 10,
        Tue: Math.random() * 10,
        Wed: Math.random() * 10,
        Thu: Math.random() * 10,
        Fri: Math.random() * 10,
        Sat: Math.random() * 10,
        Sun: Math.random() * 10,
      }
      this.dataList.push(item);
    }
  },
  mounted() {
    setInterval(() => {
      this.dataList.shift();
      const item = {
        time: Math.random() * 10 + 2016 + '',
        Mon: Math.random() * 10,
        Tue: Math.random() * 10,
        Wed: Math.random() * 10,
        Thu: Math.random() * 10,
        Fri: Math.random() * 10,
        Sat: Math.random() * 10,
        Sun: Math.random() * 10,
      }
      this.dataList.push(item);
    }, 2000);
  },
};
</script>

<style>
.echartstyle {
  height: 500px;
  width: 1650px;
}
</style>