风尚云网笔记-vue中echarts引入

风尚云网学习vue中echarts引入

1.首先npm安装：

npm install echarts

2.main.js引入

//全部引入  echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.在需要引入的echarts的vue页面中

created

 this.initMonthWorkOrder();

    // echarts相关方法
    initMonthWorkOrder() {
        let myChart = this.$echarts.init(this.$refs.monthWorkOrder);
      let options = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["成功订单", "失败订单", "消费金额", "总订单"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.createTime,
        },
        yAxis: {
          type: "value",
          alignTicks: true, // show :false,
        },
        series: [
          {
            name: "成功订单",
            type: "line", // stack: "Total",
            color: "#67c23a",
            data: this.successCount,
            label: {
              show: true,
              position: "right",
            },
          },
          {
            name: "失败订单",
            type: "line", // stack: "Total",
            color: "#B80000",
            data: this.errorCount,
            label: {
              show: true,
              position: "left",
            },
          },
          {
            name: "总订单",
            type: "line", // stack: "Total",
            color: "#409eff",
            data: this.allCount, // 显示数据
            label: {
              show: true,
              position: "top",
            },
          },

          {
            name: "消费金额",
            type: "line",
            color: "gold", // stack: "Total",
            data: this.successConsume,
            label: {
              show: true,
              position: "bottom",
            },
          },
        ],
      }; // 初始化
      myChart.setOption(options);
    },