vue 中使用echarts 5版本 按需使用

第一步：下载 echarts 5

npm install echarts --save

 

第二步：在util文件夹下，新建了一个echartsUi.js文件 （这个文件存放位置，依据自己需求）

 

第三步：在这个js文件中，按照官方介绍，按需引用

 

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
// 引入各种图表，图表后缀都为 Chart
import { BarChart, PieChart } from "echarts/charts";  //这里我引用两个类型的图表
// 引入提示框，标题，直角坐标系等组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  // GeoCoComponent
} from "echarts/components";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  PieChart,
  CanvasRenderer,
]);

export default echarts;

 

第四步：在main.js文件中引入echats.并注册使用

 

 

 

第五步：在页面定义一个div，注册ref = bar，必须要设置具体的宽高

 

 

 

 

 

第六步：测试

methods:{
　　

initEcharts () {
  let myEcharts = this.$echarts.init(this.$refs.bar)
  let option = {
    title: {
      text: '按需引入'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五']
    },
    yAxis: {
      type: 'value'
    },
    legend: {},
    series: [
      {
        name: '星期',
        type: 'bar',
        data: [23, 33, 45, 56, 78]
      }
    ]
  }
  myEcharts.setOption(option)
}

},

在mouted钩子中调用

  mounted() {

      this.initEcharts ()

  },

 

第七步：效果