vue + eCharts 实例

main.js需引入echarts，main.js 代码：

// 引入echarts
import echarts from 'echarts'
// 引入后将echarts存为全局变量 $echarts 之后用的时候就使用 this.$echarts
Vue.prototype.$echarts = echarts

echarts.vue代码：

<template>
  <div id="main-eChartsProducts" ref="chart"></div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#main-eChartsProducts {
  width: 80%;
  height: 400px;
}
.el-menu {
  background-color: rgb(214, 112, 44);
}
</style>


<script>
export default {
  name: "eChartsAllProducts",
  props: {},
  mounted() {
    this.$nextTick(function() {
      this.drawPie();
    });
  },
  methods: {
    drawPie() {
      // this.charts = this.$echarts.init(document.getElementById(id));
      let myCharts = this.$echarts.init(this.$refs.chart);
      var xAxisData = [];
      // data1  data2  data3 是数据
      var data1 = [];
      var data2 = [];
      var data3 = [];
      for (var i = 0; i < 100; i++) {
        xAxisData.push("类目" + i);
        data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
        data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
        data3.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 2);
      }
      let option = {
        title: {
          text: "VUE+eCharts柱状图延迟动画"
        },
        legend: {
          data: ["bar", "bar2", "bar3"]
        },
        toolbox: {
          // y: 'bottom',
          feature: {
            magicType: {
              type: ["stack", "tiled"]
            },
            dataView: {},
            saveAsImage: {
              pixelRatio: 3
            }
          }
        },
        tooltip: {},
        xAxis: {
          data: xAxisData,
          splitLine: {
            show: false
          }
        },
        yAxis: {},
        series: [
          {
            name: "bar",
            type: "bar",
            data: data1,
            animationDelay: function(idx) {
              return idx * 10;
            }
          },
          {
            name: "bar2",
            type: "bar",
            data: data2,
            animationDelay: function(idx) {
              return idx * 10 + 100;
            }
          },
          {
            name: "bar3",
            type: "bar",
            data: data3,
            animationDelay: function(idx) {
              return idx * 5 + 50;
            }
          }
        ],
        animationEasing: "elasticOut",
        animationDelayUpdate: function(idx) {
          return idx * 5;
        }
      };
      myCharts.setOption(option);
    }
  }
};
</script>

其它页面如需此柱状图可引入：

<template>
  <div id="main-product">
    <eChartsAllProducts></eChartsAllProducts>
  </div>
</template>

<style  scoped>
#main-product{
  width: 100%;
  height: 100%;
}
</style>

<script>
// @ is an alias to /src

import eChartsAllProducts from '@/components/eChartsAllProducts.vue'
export default {
  name: 'Home',
  components: {
    eChartsAllProducts
  }
}
</script>

图示.png