echarts 按需引入

echarts 是我们再熟悉不过的数据、图表的一种展现形式，包括折线图、柱状图、饼图等多种展现形式，

在实现基础功能的同时，还要考虑对于数据的优化，按需引入就是其中的一种形式。

安装

npm install echarts --save

全局引入

全局引入之后就不要再局部按需引入了，直接用 this.$echarts 就可以操作了。

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

按需引入

• 引入折线图，柱状图等等不同类型的图表，路径都为 echarts/charts
• 引入 Canvas 渲染器，这一步是必须要有的，可以是 CanvasRenderer 或者 SVGRenderer。路径为 echarts/renderers
• 引入提示框，标题，直角坐标系，数据集等组件，组件的路径为 echarts/Component
  • TitleComponent,
  • TooltipComponent,
  • GridComponent,
  • DatasetComponent,
  • TransformComponent
  • ...
• 引入过渡性动画，路径为 echarts/features

一定要注意大小写，引入的基本都是首字母大写：

echarts.use() 也可以在渲染图形的时候再声明，具体操作如下：

draw() {
  echarts.use([GridComponent, BarChart, CanvasRenderer])
  const chartDom = document.getElementById('chartDom')
  const myChart = echarts.init(chartDom)
  const option = {}  // 各种 echarts 配置
  myChart.setOption(option)
}

使用 require( ) 的形式也可以实现按需引入：

其他配置

除此之外，在一些项目中，我们需要对数据进行处理，调整样式，根据需求进行扩展等等。

比如，有些时候会以双 y 轴的形式展现数据。

当是单组数据的时候，Echarts 中 series 属性和 yAxis 属性可以以对象形式声明，当是多组数据时，可以以数组形式声明。

xAxis / yAxis 的结构：

series 的结构：

关于属性配置的具体细节，可参考 官方文档