4.png

安装

npm install echarts -S

全局引入

在main.js中全局引入

// main.js
import * as echarts from 'echarts'; // 现在改成这么引入了（以前 import echarts from 'echarts'）
Vue.prototype.$echarts = echarts

vue页面上的使用

<template>
<div class="all">
  <div class="my-chart">
    <div ref="myChart" v-loading="loading" :style="{ width: '1200px', height: '700px' }"></div>
  </div>
</div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      loading: true,
      xAxisList: [],
      listData :[]
    };
  },
mounted() {
    // 获取表里面的数据一定要放在mounted里面，要有dom原型了才能渲染数据
    this.initChartData();
  },
 methods: {
    //  获取数据的函数
    initChartData(){
        ...获取接口数据 
        this.xAxisList = 接口数据的x轴内容（数组）
        this.listData = 接口数据的展示数据（数组）
        // 执行初始化echarts表的函数
        this.initMyChart();
        this.loading = false;
    },
      // echart表的函数
     initMyChart() {
        //  图表初始化
        let myChart = null;
        myChart = this.$echarts.init(this.$refs.myChart);
        //  绘制图表
        let option = null;
        option = {
          title: {
            text: "标题",
            subtext: "副标题提示等",
          },
          toolbox: {
            show: true,
            // 小工具栏
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
        // 标识
        legend: {
          right: "140",
          top: "4",
          data: ["数据1名称", "数据2名称"],
        },
        tooltip: {
          trigger: "axis",
          // 极坐标系角度轴
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        // 直角坐标系底板
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        calculable: true,
        // 直角坐标系 X 轴 通过接口获取到的数据要放在x轴的
        xAxis: [
          {
            type: "category",
            data: this.xAxisList,  // ["1月","2月","3月",....]
          },
        ],
        //（直角坐标系 Y 轴）这里是自动
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "数据1名称",
            type: "bar",
            itemStyle: {
              normal: {
                color: "#FF0F33",// 数据1图形展示的色块
              },
            },
            data: 数据1的具体数据 listData ,// 一般通过接口获得的
          },
          {
            name: "数据2名称",
            type: "bar",
            itemStyle: {
              normal: {
                color: "#67C23A",// 数据2图形展示的色块
              },
            },
            data: 数据2的具体数据 listData ,// 一般通过接口获得的
          },
        ],
      };
      // 图标数据设置完以后注入图标
      if (option && typeof option === "object") {
        myChart.setOption(option, true);
      }
    },
}
}