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

原创已于 2022-05-24 17:20:02 修改 · 1.2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

风尚的笔记

vue后台管理

于 2022-05-24 17:19:53 首次发布

本文介绍了如何在Vue项目中集成和使用ECharts库。首先通过npm安装ECharts，然后在main.js全局引入并挂载到Vue原型上。接着，在具体的Vue组件中，利用ref获取元素并初始化ECharts图表，设置各种配置项，如tooltip、legend、x轴、y轴和series，展示多个数据系列的线形图。

风尚云网学习vue中echarts引入

1.首先npm安装：

npm install echarts

2.main.js引入

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

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

    <div
          ref="monthWorkOrder"
          class="echarts-box"
          style="width: 100%; height: 400px; margin-top: 20px"
        ></div>

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);
    },

标签

#echarts #vue.js #学习 #风尚云网