一.安装
//npm安装最新稳定版
npm install echarts --save
二.自动按需引入
- 安装插件
babel-plugin-import
是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式
npm i babel-plugin-import -D
- 配置
.babelrc
中添加该插件
{
"plugins": [
// other plugins
...
"equire"
]
}
引入这个插件后,在 babel 编译时会注入两个全局函数:
equire
和equireAsync
equire(modules)
同步加载模块,返回 echarts 对象 参数 modules
是一个数组,传入需要按需加载的模块名称,具体名称参见转化规则
equireAsync(modules)
异步加载一个模块,返回一个初始化函数
参数 modules 是一个数组,传入需要按需加载的模块名称,具体名称参见转化规则
三.使用
新建initEcharts.js
文件,我的文件放在了utils下
// @/src/utils/initEcharts.js
const echarts = equire([
// 写上需要的组件
// 'bar', //柱状图
// 'pie', //饼图
'line', //折线图
// 'legend', //图例
'title', //标题
'tooltip' //提示工具
])
export default echarts
在需要用到 echarts 的地方引入 initEcharts.js
文件
import echarts from '../../utils/initEcharts'
组件中按需引入
<template>
<div>
<div :id="idCanvas" style="width:460px;height:350px;margin:auto;"></div>
</div>
</template>
<script>
import echarts from '../../utils/initEcharts'
export default {
data() {
return {
charts: "",
opinionData: [], //y轴
timeData: [], //x轴
};
},
methods: {
drawLine(id) {
let that =