项目中封装echarts图表去绘制多条曲线图进行数据展示

echarts官方的api文档：Apache ECharts

1、引入echarts的方式

• 从 Apache ECharts 官网下载界面 获取官方源码包后构建。

• 在 ECharts 的 GitHub 获取。

• 通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”

• 通过 jsDelivr 等 CDN 引入

image.png

对应的package.json文件会有对应echarts版本号，表明安装成功了

2、引入echarts的方式

import * as echarts from 'echarts';

Vue.prototype.$echarts = echarts

基本的echarts图表的使用流程官方api中全面的展示了，接着就需要去理解每个部分的配置项的作用以及如何去配置

image.png

echarts 中各种内容，被抽象为“组件”。例如，echarts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）等等。
option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。

3、开始封装echarts图表

图表的效果展示.png