持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第19天
点击查看活动详情
一、echarts 的基本用法
1.初始化类
Html 里 面 创 建 一 个 id 为 box1 的 div ，并初始 化 echarts 绘 图 实 例 var myChart =
echarts.init(document.getElementById('box1'))
2.样式配置
title ：标题
tooltip ：鼠标悬停气泡
xAxis : 配置横轴类别，type 类型为 category 类别
series：销量数据，data 参数与横轴一一对应，如果想调样式，也可以简单调整，比如每个条形图的颜色可以通过函数进行数组返回渲染
3.渲染图展示表
myChart.setOption(option);
二、如何使用 Echarts
1.获取 Echarts ：在官网下载 Echarts 版本 或 npm 下载
2.引入 Echarts ：script 引入或者 vue 在入口文件里引用
3.创建一个 dom 元素 用来放置图表 ④配置 Echarts 属性
三、Echarts3.x 与 Echarts2.x 的区别
Echarts2.x 是通用的版本。 Echarts2.x 版本的文档实例比 Echarts3.x 版本的文档实例要好，更加清晰，更加容易理解。 Echarts2.x 版本做的图表更炫酷。 Echarts2.x 代表的是现在，而 Echarts3.x 代表的是未来。 Echarts3.x 对 Echarts 的引用更灵活，更简单，方便。
四、ECharts 如何画图
第一，ECharts 是通过 canvas 来实现的，由于 canvas 的限制，所以 echarts 在实现的时候多是绘制一些规则的，可预期的，易于实现的东西
第二，echarts 的核心就是 options 配置的对象。一般使用最多的是直角坐标图，极点图，饼状图，地图。
第三，对于直角坐标，必须配置 xAsix 和 yAxis，对于几点坐标必须配置 radiusAxis 和angleAxis。
第四就是 series 系列的认识，它是一个数组，数组的每一项都代表着一个单独的系列，可以配置各种图形等等功能。然后 data一般是一个每一项都是数组的数组，也就是嵌套数组。里层数组一般代表坐标位置
五、Echarts 绘制条形图
1.初始化类
Html 里面创建一个 id 为 box1 的 div，并初始化 echarts 绘图实例
var myChart = echarts.init(document.getElementById('box1'))
2.样式配置
title ：标题
tooltip ：鼠标悬停气泡
xAxis : 配置横轴类别，type 类型为 category 类别
series：销量数据，data 参数与横轴一一对应，如果想调样式，也可以简单调整，比如每个条形图的颜色可以通过函数进行数组返回渲染
3.渲染图展示表
myChart.setOption(option);
