Vue项目中使用Echarts---全局 按需引入

Vue项目中使用Echarts—全局 / 按需引入

npm下载

npm install echarts --save

按需引入

创建文件Echarts/echarts.js

import * as echarts from 'echarts/core'
import { RadarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { LegendComponent } from 'echarts/components'

echarts.use([RadarChart, CanvasRenderer, LegendComponent])

// 绑定在原型链上
Vue.prototype.$echarts = echarts

// 导出 echarts
export default echarts

在src/main.js中引入

• import '@/Echarts/echarts'

全局引入

import * as echarts from 'echarts'

在 mounted 钩子函数定义使用中

获取DOM节点

• 局部

  • const myChart = this.$echarts.init(this.$refs.myChart)

• 全局

  • const myChart = echarts.init(this.$refs.myChart)

定义 option并写入echarts配置项

1 data节点定义 option
2 mounted节点写入配置项：

• myChart.setOption(this.option)

补充

按需引入注意点：

引入柱状图、折线图、饼状图、雷达图图表，图表后缀为 Chart

import { BarChart, LineChart, RadarChart, PieChart } from 'echarts/charts';

引入提示框、标题、直角坐标系、数据集、内置数据转换器组件，后缀为Component

import {
    TitleComponent,
    TooltipComponent,
    GridComponent,          
    DatasetComponent,
    TransformComponent,
    LegendComponent
} from 'echarts/components';

标签自动布局，全局过渡动画等特性

import { LabelLayout, UniversalTransition } from 'echarts/features';

引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步

import { CanvasRenderer } from 'echarts/renderers';

自适应

• window.onresize = myChart.resize

引入多个echarts组件无法自适应?

更多请参考 Echarts官方文档