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 ()

  },

 

第七步：效果