一、完整引入Echarts
-
下载安装echarts包
npm install echarts -Soryarn add echarts -
定义图表显示的容器，并进行渲染
<template><div id="myChart" ref="myChart"></div> </template><style>#myChart {width: 95%;height: 300px;margin: 20px auto;border: 1px solid #CCC}</style><script>// 引入完整的echartsimport echarts from 'echarts'export default {mounted () {// 调用绘制图表的方法this.draw();},methods: {draw () {// 实例化echarts对象myChart = echarts.init(this.$refs.myChart)// 绘制条形图myChart.setOption({title: {text: 'Echarts 入门实例',top: 5,left: 'center'},legend: {data: ['衣服', '帽子', '裤子', '鞋子'],top: 30},// X轴xAxis: {data: ['一月', '二月', '三月', '四月']},// Y轴yAxis: {},// 数据series: [{name: '衣服',type: 'bar',data: [120, 100, 440, 320]},{name: '帽子',type: 'bar',data: [200, 120, 240, 330]},{name: 'bar',type: 'line',data: [120, 200, 240, 260, 300]},{name: 'bar',type: 'line',data: [120, 200, 300, 140, 260]}] })}}}</script>
看效果：
Echarts的条形图bar
缺点：如果是完整的引入Echarts，会额外的引入其他无用的配置文件，造成应用文件体积过大，资源加载耗时过长，影响用户体验。
二、Echarts 按需加载
-
专门设置一个echarts配置文件
// 文件路径 @/lib/echarts.js 自行配置// 加载echarts，注意引入文件的路径import echarts from 'echarts/lib/echarts'// 再引入你需要使用的图表类型，标题，提示信息等import 'echarts/lib/chart/bar'import 'echarts/lib/chart/line'import 'echarts/lib/component/legend'import 'echarts/lib/component/title'export default echarts -
在需要的组件内加载echarts，绘制图表
<template>// ... 与上面实例相同</template><style>// ... 与上面实例相同</style> <script>// 重点：此位置引入的是你单独配置的echartsimport echarts from '@/lib/echarts'export default {mounted () {// ...与上面实例相同},methods: {draw () {// ... 与上面实例相同}}} </script>
按此方式打包的项目，会只加载引用你所使用的图表、标题、提示信息等组件，降低了应用文件体积，实现按需加载
三、引入插件babel-plugin-equire,配合实现Echarts按需引入
在上面的实例中，我们单独配置的echarts文件，需要引入对应的图表、标题、提示信息等，都需要我们手动进行加载，比较麻烦。引入babel-plugin-equire插件，方便使用。
-
下载babel-plugin-equire
npm install babel-plugin-equire -Doryarn add babel-plugin-equire --dev -
在.babelrc文件中的配置
"plugins": ["... 其他插件","equire"] -
修改@/lib/echarts文件
// eslint-disable-next-lineconst echarts = equire([// 写上你需要的'bar','line','legend','title'])export default echarts -
和上面案例配置是相同的，可以更加愉快的玩耍...
三、Echarts 修改主题色加载
1、在main.js里引入echarts主题的js，一般在 node_modules---echarts---theme---macarons.js。 theme里边有各种各样的主题，任意选一种，这里我选的是macarons。引入：
import 'echarts/theme/macarons.js'或者在https://echarts.apache.org/zh/theme-builder.html进行主题的配置然后，下载主题色
然后将下载的shine.js放到本地引入。
2、在echarts初始化时，使用主题。
let myChart = this.$echarts.init(document.getElementById('myChart01'),'macarons');
