Echarts图表在vue中的基本使用

安装Echarts依赖

npm install echarts --save

在main.js中引入

import * as echarts from 'echarts';

Vue.prototype.$echarts = echarts

在需要使用图表的组件中编写

 // 初始化图表
    initChart() {
      this.chartInstace = this.$echarts.init(this.$refs.seller);
      this.chartInstace.on("mouseover", () => {
        clearInterval(this.timeId);
      });
      this.chartInstace.on("mouseout", () => {
        this.startSetinterval();
      });
    },
    // 获取图表数据
    async getData() {
      // 获取retail的所有数据
      var { data: res } = await getretail();
      // 然后将数据赋值给ydata,xdata
      this.tableData = res;
      this.number = res;
      this.totalpage =
        this.tableData.length % 5 === 0
          ? this.tableData.length / 5
          : this.tableData.length / 5 + 1;
      this.updateChart();
      this.startSetinterval();
    },
    // 挂载
    updateChart() {
      const start = (this.currentpage - 1) * 5;
      const end = this.currentpage * 5;
      const showdata = this.tableData.slice(start, end);
      const sellername = showdata.map((item) => {
        return item.pname;
      });
      const sellernum = showdata.map((item) => {
        return item.outnumber;
      });
      var option = {
        title: {
          textStyle: { color: "#fff" },
          text: "零售商品数据",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
          textStyle: { color: "#fff" },
        },
        xAxis: {
          axisLabel: {
            color: "#fff",
          },
          type: "category",
          data: sellername,
        },
        yAxis: {
          min: 0,
          max: function (value) {
            return value.max+20;
          },
          axisLabel: {
            color: "#fff",
          },
          type: "value",
        },
        // color:["#ccc","#fff"],
        series: [
          {
            name: "销量",
            type: "bar",
            data: sellernum,
            barWidth: 50,
            itemStyle:{
              normal:{
                label:{
                  formatter:"{c}",
                  show:true,
                  position:"top",
                  textStyle:{
                    fontWeight:'bolder',
                    fontSize:"12",
                    color:"#fff"
                  }
                }
              }
            }
          },
        ],
      };
      this.chartInstace.setOption(option);
    },
    // 柱状图轮播展示
    startSetinterval() {
      if (this.timeId) {
        clearInterval(this.timeId);
      }
      this.timeId = setInterval(() => {
        this.currentpage++;
        if (this.currentpage > this.totalpage) {
          this.currentpage = 1;
        }
        this.updateChart();
      }, 3000);
    },