柱状图
通用配置 tooltip
提示框组件，可以配置鼠标滑过或点击图表时的显示框 增加划过时提示
1、触发类型：trigger
item 移动到内部时触发显示内容
axis 鼠标在y轴上就可以触发显示内容
2、触发时机：triggerOn
mouserover 鼠标移动触发提示内容
click 点击触发提示内容
3、格式化：formatter
字符串模板
回调函数
通用配置 toolbox
echarts 提供的工具栏
内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具
toolbox:{
fearure:{
saveAsImage:{
}, // 到处图片
dataView:{
}, // 数据视图 将图标转化为最原始的数据并可以修改
restore:{
}, // 重置功能，将上面修改的数据还原为最初的数据
dataZoom:{
}, // 区域缩放 可以将选中的柱状图放大
magicType:{
// 动态图表类型切换 可以转换为其他图表
type:['bar','line']
}
}
}
通用配置 legend
图列：用于筛选系列，需要和 series 配合使用
1、legend 中的 data 是一个数组
2、legend 中的 data 的值需要和 series 数组中某组数据 name 值一致
折线图
实现步骤
Echarts 最基本的代码结构：
1、引入 js 文件，DOM 容器，初始化对象，设置 option
2、设置 x 轴数据 数组xxx
3、设置 y 轴数据 数组xxx
4、图表类型：在 series 下设置 type：line
常见效果
1、标记：最大值、最小值、平均值、标注区间
markPoint markLine markArea
2、线条控制：平滑 、风格
smooth：true
lineStyle：{color：‘red’；type：’dotted‘} // 设置线条颜色 线条样式
3、填充风格：
areaStyle：{color：’red‘} // 填充阴影
4、紧挨边缘
boundaryGap
5、缩放：脱离 0 值比例
scale：true
5、堆叠图
stack
折线图特点
常用来分析数据随时间的变化趋势
散点图
用来推断出不同维度数据间的相关性
实现步骤
1、Echarts 最基本的代码结构：
引入 js 文件，DOM 容器，初始化对象，设置 option
2、x 轴数据和 y 轴数据：二维数组
数组1：[[a,b],[a,b]]
3、图表类型：
· 在series 设置 type:scatter
xAxis 和 yAxis 的 type 都要设置 value
4、调整：
将坐标轴都设置为脱离 0 值比例， scale：true
常见效果
1、气泡图效果
散点大小不同 symbolSize
散点颜色不同 itemStyle.color
2、涟漪动画效果
type:‘effectScatter’
rippleEffect:{scale:10} // 范围大小
showEffectOn:‘emphasis’ // 鼠标移动上去才发生效果
配置1：网格 grid
用来控制执教坐标系的布局和大小
xy轴就是在 grid 上进行绘制的
- 显示 grid show
- grid 边框 borderWidth、borderColor
- grid位置和大小 left top 。。。。
配置2：坐标轴 axis
分为 x y 一个grid 最多有两种位置的 x y轴
坐标轴类型 type
value：数值轴，自动会从目标数据中读取数据
category：类目轴，该类型必须通过 data 设置类目数据
显示位置 position
xAxis：可取值为 top 或者 bottom
yAxis：可取值为 left 或者 right
配置2：区域缩放 dataZoom
啊 dataZoom 用于区域缩放，对数据范围过滤，x y轴都可以拥有
dataZoom 是一个数组，可以配置多个区域缩放器
类型type
slider：滑块
inside：内置，依靠鼠标滚轮或者双指缩放
指明产生作用的轴
xAxisIndex：设置缩放组件控制的是哪个x轴，一般 0
指明初始状态的缩放情况
饼图
只管看到不同数据占比情况
实现步骤
1、Echarts 最基本的代码结构：
引入 js 文件，DOM 容器，初始化对象，设置 option
2、数据准备
3、图表类型
在 series 下设置 type：pie
常见效果
显示数值
label.formatter
圆环
设置两个半径 radius:[‘50%’，’70%‘]，
南丁格尔图
roseType:‘radius’
选中效果
selectedMode:‘single’ // 选中区域偏离原点一段距离
’multiple‘ // 每个都偏离
selectedOffset：30 // 选中偏移量
地图
从宏观的角度快速看出不同地理位置数据的差异
地图图表的使用方式
1、百度地图 API
需要申请百度地图 ak
2、矢量地图
需要准备矢量地图数据
实现步骤
1、Echarts 最基本的代码结构：
引入 js 文件，DOM 容器，初始化对象，设置 option
2、准备矢量地图 json 文件， 放在 json/map/目录下。
3、使用 Ajax 获取 china.json
$get(‘json/map/china.json’,function(chinaJson){})
4、在回调函数中往 echarts 全局对象注册地图的 json 数据
echarts.registerMap(‘chinaMap’,chinaJson)
5、在 geo 下设置
type:‘map’
map:‘chinaMap’ // chinaMap 需要和 registerMap 中的第一个参数保持一致
roam:true // 设置允许缩放以及拖动的效果
label：{
show // 展示名称
}
zoom：2 // 设置初始缩放比例
center：[454.4, 545.55] // 作为中心点坐标 相对于整个 div 来说是中心
常用配置
1、缩放拖动：
roam
2、名称显示：
label
3、初始缩放比例：
center
常见效果
1、显示某个区域：
- 加载该区域的矢量地图数据
- 通过 registerMap 注册到 echarts 全局对象中
- 指明 geo 配置下的 type 和 map 属性
- 通过 zoom 放大该区域
- 通过 center 定位中心点
2、不同城市颜色不同
- 显示基本的中国地图
- 城市的空气质量数据设置给 series
- 将 series 下的数据和 geo 关联起来
- 结合 visualMap 配合使用
min max
inRange // 控制颜色渐变范围 两个参数 red-blue
calculable // 出现滑块 数据筛选
3、地图和散点图结合
- 给 series 下新增对象
- 准备好散点数据，设置给新对象的 data （坐标信息）
- 配置新对象 type：effectScatter
- 让散点图使用地图坐标系统 coordinateSystem：’geo‘
- 让涟漪效果更加明显 rippleEffect：{scale：10}
雷达图
分析各个维度数据与标准数据的对比情况
1、Echarts 最基本的代码结构：
引入 js 文件，DOM 容器，初始化对象，设置 option
2、定义各个维度的最大值 indicator:[{xxx}]
3、准备具体产品数据 data:[{}]
4、图表类型：在series 下设置 type：radar
常用配置
1、显示数值：label show：true
2、区域面具：areaStyle
3、绘制类型：shape
实现步骤
1、定义各个维度的最大值
2、定义图表的类型
仪表盘
用在进度把控以及数据范围的监测
实现步骤
1、Echarts 最基本的代码结构：
引入 js 文件，DOM 容器，初始化对象，设置 option
2、准备数据，设置给 series 下的 data:[{value:21}]
3、图表类型：在 series 下设置 type：gauge
常见效果
1、数值范围：max min
2、多个指针 增加 data 中的数组元素
3、多个指针颜色差异 itemStyle
小结
各个图表英文单词
- bar 柱状图 分类数据，呈现每一个分支有多少
- line 折线图 分析数据随时间的变化趋势
- scatter / effectScatter 散点图 涟漪动画散点图 不同维度数据之间相关性
- pie 饼图 不同数据占比
- map 地图 地理位置上数据差异
- radar 雷达图 多个维度数据与标准数据的对比情况
- gauge 仪表盘 直观表现出某个指标的进度或实际情况
常用配置
