首页 > 其他 > 详细

vue 中按需引入 echarts

时间:2020-12-23 19:20:57      阅读:99      评论:0      收藏:0      [点我收藏+]
 

按需引入 1. 专门设置一个echarts配置文件,文件路径src/lib/echart.js (1.12M) ```src/lib/echart.js // 直接引用 import echarts from ‘@/lib/echart.js‘ ``` 2. 利用 babel-plugin-equire 实现按需加载 (1.11M) ```src/lib/echarts.js // 直接引用 import echarts from ‘@/lib/echarts.js‘ ``` 3. main.js中只引入需要的模块 ``` import ‘echarts/lib/chart/pie‘ import ‘echarts/lib/component/tooltip‘ import ‘echarts/lib/component/title‘ import ‘echarts/lib/component/toolbox‘ import ‘echarts/lib/component/legend‘ Vue.prototype.$echarts = echarts ``` 全局引入 4. 方式1: 全局引用 (2.4M) ```main.js import echarts from ‘echarts‘ import ‘echarts/lib/echarts‘ import ‘echarts/lib/chart/pie‘ import ‘echarts/lib/component/tooltip‘ import ‘echarts/lib/component/title‘ import ‘echarts/lib/component/toolbox‘ import ‘echarts/lib/component/legend‘ Vue.prototype.$echarts = echarts ``` 5. 使用vue-echarts ```main.js import ECharts from ‘vue-echarts‘ import ‘echarts/index‘ // 注册为全局组件 Vue.component(‘v-chart‘, ECharts) ``` 组件使用 ``` <v-chart chartId="myChart" :options="chartOptions" width="300px" height="300px" :auto-resize="true"></v-chart> ```

github:  https://github.com/aloehh/vue-echarts

vue 中按需引入 echarts

原文:https://www.cnblogs.com/aloehui/p/14180116.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!