echarts5在Vue中按需引入-蒲公英云

echarts5在Vue中按需引入

安装 `echarts5.x`

npm install echarts --save

按需引入 `echarts` 图表和组件

先在项目根路径下新建 plugin/echartsUI.js 文件

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入各种图表，图表后缀都为 Chart
import { 
  BarChart
} 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, CanvasRenderer]
)
export default echarts

修改 `main.js`

// 按需引入 echarts 5.x
import echarts from './plugins/echartsUI'
Vue.prototype.$echarts = echarts

测试

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