ECharts实操手册
内容摘要
ECharts 的基本使用
ECharts常用图表
直角坐标系常见配置
ECharts配置项小结
ECharts高级
1. ECharts基本使用
1.1 ECharts介绍
ECharts
能够做出各种各样漂亮的图表,它能满足绝大多数可视化图表的实现.它的兼容性强, 使用方便, 功能强大, 是实现数据可视化的最佳选择之一, 更多特点和介绍可以查阅官网地址:ECharts官网
1.2 ECharts的快速上手
ECharts 的入门使用特别简单, 5分钟就能够上手.。
- 步骤1:引入 echarts.js 文件(echarts是一个 js 的库,当然得先引入这个库文件)
<script src="js/echarts.min.js"></script>
- 步骤2:准备一个呈现图表的盒子(盒子必须具备宽高)
<div id="box" style="width: 600px;height:400px;"></div>
- 步骤3:初始化 echarts 实例对象(在这个步骤中, 需要指明图表最终显示在哪里的DOM元素)
var myChart = echarts.init(document.getElementById('box'))
- 步骤4:准备配置项(这步很关键,我们最终的效果,到底是显示饼图还是折线图,基本上都是由配置项决定的)
var option = {xAxis: {type: 'category', data: ['小明', '小红', '小王'] },yAxis: { type: 'value' },series: [ { name: '语文', type: 'bar', data: [70, 92, 87], } ] }
- 步骤5:将配置项设置给 echarts 实例对象
myChart.setOption(option)
呈现
总结:通过简单的5个步骤, 就能够把一个简单的柱状图给显示在网页中了.这几个步骤中, 步骤4最重要
,一个图表最终呈现什么样子,完全取决于这个配置项
.所以对于不同的图表, 除了配置项会发生改变之外,其他的代码 都是固定不变的.
1.3 相关配置项
xAxis
直角坐标系
中的x 轴
, 如果type 属性的值为 category
,那么需要配置 data 数据
, 代表在 x 轴的呈现。yAxis
直角坐标系
中的y 轴
, 如果type 属性配置为 value
, 那么无需配置 data
, 此时y 轴会自动去series 下找数据
进行图表的绘制。series
系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据
总结:配置项都是以键值对
的形式存在, 并且配置项有很多, ECharts 的学习大多是针对于这些配置项的, 对于
配置项的使用及学习,可多参考官方配置项文档:ECharts配置项
2. ECharts常用图表
2.1 柱状图
柱状图特点:柱状图描述的是分类数据
,呈现的是每一个分类中有多少?
, 图表所表达出来的含义在于不同类别数据的排名\对比情况
实现步骤
- 步骤1 ECharts 最基本的代码结构
- 步骤2 准备
x轴
的数据
var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
- 步骤3 准备
y 轴
的数据
var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
- 步骤4 准备 option , 将
series 中的 type 的值设置为: bar
var option = {
xAxis: { type: 'category', data: xDataArr },
yAxis: { type: 'value' },
series: [ { type: 'bar', data: yDataArr } ] }
注意:坐标轴 xAxis 或者 yAxis
中的配置, type 的值
主要有两种:category 和 value
, 如果 type属性的值为category
,那么需要配置 data
数据, 代表在x 轴的呈现
. 如果 type 属性配置为 value
,那么无需配置 data
, 此时 y 轴会自动去 series 下找数据
进行图表的绘制
2.1.1 柱状图的常见效果
- 标记
最大值\最小值 markPoint
(哪组数据需要标记就在哪组数据下写,无需在创造对象)
series: [{ ......markPoint: { data: [ { type: 'max', name: '最大值' },{ type: 'min', name: '最小值' } ] } } ]
平均值 markLine
series: [
{ ......
markLine: { data: [ { type: 'average', name: '平均值' } ]
} } ]
- 显示
数值显示 label
series: [
{
......
label: {
show: true, // 是否可见
rotate: 60 // 旋转角度
}
} ]
柱宽度 barWidth
series: [
{...... barWidth: '30%' // 柱的宽度
}
]
横向柱状图(所谓的横向柱状图, 只需要让x轴的角色和y轴的角色互换一下
即可. 即 xAxis 的 type 设置为value , yAxis 的 type 设置为 category , 并且设置 data 即可)
var option = {xAxis: {type: 'value'},yAxis: {type: 'category',data: xDataArr},series: [{type: 'bar',data: yDataArr}]}
2.1.2 通用配置
使用 ECharts 绘制出来的图表, 都天生就自带一些功能, 这些功能是每一个图表都具备的, 我们可以通过配置, 对这些功能进行设置.
- 标题:
title
var option = {title: {text: "成绩", // 标题文字 textStyle: {color: 'red' // 文字颜色 },borderWidth: 5, // 标题边框 borderColor: 'green', // 标题边框颜色 borderRadius: 5, // 标题边框圆角 left: 20, // 标题的位置 top: 20 // 标题的位置 }}
- 提示框:
tooltip
(tooltip 指的是当鼠标移入到图表
或者点击图表
时, 展示出的提示框)
触发类型: trigger
可选值有item\axis
触发时机: triggerOn
可选值有 mouseOver\click
格式化显示: formatter
(分为字符串模板
、回调函数
官方文档:formatter)
var option = {tooltip: {trigger: 'item',triggerOn: 'click',formatter: '{b}:{c}'}}// 这个{b} 和 {c} 所代表的含义不需要去记, 在官方文档中有详细的描述
var option = {tooltip: {trigger: 'item',triggerOn: 'click',formatter: function(arg) {return arg.name + ':' + arg.data}}}
- 工具按钮:
toolbox
toolbox 是 ECharts 提供的工具栏
, 内置有 导出图片
,数据视图
, 重置
, 数据区域缩放
, 动态类型切换
五个工具
注意:工具栏的按钮是配置在 feature 的节点之下
var option = {toolbox: {feature: {saveAsImage: {}, // 将图表保存为图片 dataView: {}, // 是否显示出原始数据 restore: {}, // 还原图表 dataZoom: {}, // 数据缩放 magicType: { // 将图表在不同类型之间切换,图表的转换需要数据的支持 type: ['bar', 'line']}}}}
- 图例:
legend
(legend 是图例,用于筛选类别
,需要和 series 配合使用
)
注意:legend 中的 data 是一个数组
;legend 中的 data 的值需要和 series 数组中某组数据的 name 值一致
。
var option = {legend: {data: ['语文', '数学']},xAxis: {type: 'category',data: ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']},yAxis: {type: 'value'},series: [{name: '语文',type: 'bar',data: [88, 92, 63, 77, 94, 80, 72, 86]}, {name: '数学',type: 'bar',data: [93, 60, 61, 82, 95, 70, 71, 86]}]}
2.2 折线图
折线图特点:折线图更多的使用来呈现数据随时间
的『变化趋势
』
实现步骤
- 步骤1 ECharts 最基本的代码结构
- 步骤2 准备
x轴
的数据
var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
- 步骤3 准备
y 轴
的数据
var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
- 步骤4 准备 option , 将
series 中的 type 的值设置为: line
var option = {xAxis: {type: 'category',data: xDataArr},yAxis: {type: 'value'},series: [{type: 'line',data: yDataArr}]}
呈现
2.2.1 折线图的常见效果
- 标记
最大值\最小值 markPoint
var option = {series: [{......markPoint: {data: [{type: 'max',name: '最大值'}, {type: 'min',name: '最小值'}]}}]}
平均值 markLine
var option = {series: [{......markLine: {data: [{type: 'average',name: '平均值'}]}}]}
标注区间 markArea
var option = {series: [{......markArea: {data: [[{xAxis: '1月'}, {xAxis: '2月'}],[{xAxis: '7月'}, {xAxis: '8月'}]]}}]}
- 线条控制
平滑线条 smooth
var option = {series: [{......smooth: true}]}
线条样式 lineStyle
var option = {series: [{......,smooth: true,lineStyle: {color: 'green',type: 'dashed' // 可选值还有 dotted solid }}]}
- 填充风格 areaStyle
var option = {series: [{type: 'line',data: yDataArr,areaStyle: {color: 'pink'}}]}
- 紧挨边缘 boundaryGap(boundaryGap 是设置给 x 轴的, 让起点从 x 轴的0坐标开始)
var option = {xAxis: {type: 'category',data: xDataArr,boundaryGap: false}}
- 缩放, 脱离0值比例(如果每一组数据之间相差较少, 且都比0大很多, 那么有可能会出现这种情况,绘制出一根直线,所以我们要进行scale配置)
var option = {yAxis: {type: 'value',scale: true}}
- 堆叠图(堆叠图指的是, 同个类目轴上系列配置相同的 stack 值后,后一个系列的值会在前一个系列的值上相加)
var option = {series: [{type: 'line',data: yDataArr1,stack: 'all' // series中的每一个对象配置相同的stack值, 这个all可以任 意写 }, {type: 'line',data: yDataArr2,stack: 'all' // series中的每一个对象配置相同的stack值, 这个all可以任意 写 }]}
注意:第二条线在第一条线的基础之上进行绘制. 基于前一个图表进行堆叠
2.3 散点图
散点图的特点:散点图可以帮助我们推断出不同维度数据之间的相关性
, 比如,看得出身高和体重是否正相关。也经常用在地图的标注上
实现步骤
- 步骤1 ECharts 最基本的代码结构
- 步骤2 准备
x 轴和 y 轴
的数据
axisData 就是一个二维数组, 数组中的每一个元素还是一个数组, 最内层数组中有两个元素, 一个代表身高, 一个代表体重
- 步骤3 准备配置项(xAxis 和 yAxis 的 type 都要设置为 value ;在 series 下设置 type:scatter)
var option = {xAxis: {type: 'value'},yAxis: {type: 'value'},series: [{type: 'scatter',data: axisData}]}
- 步骤4 调整配置项,
脱离0值比例
var option = {xAxis: {type: 'value',scale: true},yAxis: {type: 'value',scale: true},series: [{type: 'scatter',data: axisData,}]}
呈现
2.3.1 散点图的常见效果
- 气泡图效果(要能够达到气泡图的效果, 其实就是让每一个散点的
大小不同
, 让每一个散点的颜色不同
)
symbolSize
控制散点的大小
itemStyle.color
控制散点的颜色
这两个配置项都支持固定值的写法
, 也支持回调函数的写法
固定值写法:
var option = {series: [{type: 'scatter',data: axisData,symbolSize: 25,itemStyle: {color: 'green',}}]}
回调函数写法:
var option = {series: [{type: 'scatter',data: axisData,symbolSize: function(arg) {var weight = arg[1]var height = arg[0] / 100 // BMI > 28 则代表肥胖, 肥胖的人用大的散点标识, 正常的人用小散点标识 // BMI: 体重/ 身高*身高 kg m var bmi = weight / (height * height)if (bmi > 28) {return 20}return 5},itemStyle: {color: function(arg) {var weight = arg.data[1]var height = arg.data[0] / 100var bmi = weight / (height * height)if (bmi > 28) {return 'red'}return 'green'}}}]}
- 涟漪动画效果
type:effectScatter
(将 type 的值从 scatter 设置为 effectScatter 就能够产生涟漪动画的效果)
rippleEffect
(rippleEffect 可以配置涟漪动画的大小)
var option = {series: [{type: 'effectScatter',rippleEffect: {scale: 3}}]}
showEffectOn
showEffectOn
可以控制涟漪动画在什么时候产生
, 它的可选值有两个: render 和 emphasis
render
代表界面渲染完成就开始
涟漪动画
emphasis
代表鼠标移过某个散点的时候
, 该散点开始涟漪动画
var option = {series: [{type: 'effectScatter',showEffectOn: 'emphasis',rippleEffect: {scale: 3}}]}
- :结合地图(散点图也经常结合地图来进行地图区域的标注)
2.4 直角坐标系常见配置
直角坐标系的图表指的是带有x轴和y轴的图表, 常见的直角坐标系的图表有: 柱状图 折线图 散点图。针对于直角坐标系的图表, 有一些通用的配置
- 网格 grid(grid是用来控制直角坐标系的布局和大小, x轴和y轴就是在grid的基础上进行绘制的)
显示 grid show: true
grid 的边框 borderWidth : 10
grid 的位置和大小 left top right bottom width height
var option = {grid: {show: true, // 显示grid borderWidth: 10, // grid的边框宽度 borderColor: 'red', // grid的边框颜色 left: 100, // grid的位置 top: 100,width: 300, // grid的大小 height: 150}}
- 坐标轴 axis(坐标轴分为x轴和y轴, 一个 grid 中最多有两种位置的 x 轴和 y 轴)
坐标轴类型type
value
: 数值轴, 自动会从目标数据中读取数据
category
: 类目轴, 该类型必须通过 data 设置类目数据
坐标轴位置
xAxis
: 可取值为 top 或者 bottom
yAxis
: 可取值为 left 或者 right
var option = {xAxis: {type: 'category',data: xDataArr,position: 'top'},yAxis: {type: 'value',position: 'right'}}
- 区域缩放 dataZoom
dataZoom 用于区域缩放, 对数据范围过滤, x轴和y轴都可以拥有, dataZoom 是一个数组, 意味着
可以配置多个区域缩放器
区域缩放类型 type
slider
: 滑块
inside
: 内置, 依靠鼠标滚轮或者双指缩放
产生作用的轴
xAxisIndex
:设置缩放组件控制的是哪个 x 轴, 一般写0即可
yAxisIndex
:设置缩放组件控制的是哪个 y 轴, 一般写0即可
指明初始状态的缩放情况
start
: 数据窗口范围的起始百分比
end
: 数据窗口范围的结束百分比
var option = {xAxis: {type: 'category',data: xDataArr},yAxis: {type: 'value'},dataZoom: [{type: 'slider',xAxisIndex: 0}, {type: 'slider',yAxisIndex: 0,start: 0,end: 80}]}
注意:针对于非直角坐标系图表, 比如饼图 地图 等, 以上三个配置可能就不会生效了
2.5 饼图
饼图的特点:饼图可以很好地帮助用户快速了解不同分类的数据的占比情况
实现步骤
- 步骤1 ECharts 最基本的代码结构
- 步骤2 准备数据
var pieData = [{value: 11231,name: "淘宝",}, {value: 22673,name: "京东"}, {value: 6123,name: "唯品会"}, {value: 8989,name: "1号店"}, {value: 6700,name: "聚美优品"}]
- 步骤3 准备配置项 在
series 下设置 type:pie
var option = {series: [{type: 'pie',data: pieData}]}
呈现
注意:饼图的数据是由 name 和 value 组成的对象所形成的数组。饼图无须配置 xAxis 和 yAxis
2.5.1 饼图的常见效果
- 显示数值
label.show
: 显示文字
label.formatter
: 格式化文字
var option = {series: [{type: 'pie',data: pieData,label: {show: true,formatter: function(arg) {return arg.data.name + '平台' + arg.data.value + '元\n' + arg.percent + '%'}}}]}
- 南丁格尔图(南丁格尔图指的是每一个扇形的半径随着数据的大小而不同, 数值占比越大, 扇形的半径也就越大)
roseType
:‘radius’
- 选中效果
selectedMode
: ‘multiple’
选中模式,表示是否支持多个选中,默认关闭,支持布尔值和字符串,字符串取值可选 ‘single
’ , ‘multiple
’ ,分别表示单选还是多选
selectedOffset
: 30
选中扇区的偏移距离
var option = {series: [{type: 'pie',data: pieData,selectedMode: 'multiple',selectedOffset: 30}]}
- 圆环
radius
饼图的半径。可以为如下类型:
number
:直接指定外半径值。
string
:例如, ‘20%’ ,表示外半径为可视区尺寸(容器高宽中较小一项)的 20% 长度。
Array
. :数组的第一项是内半径,第二项是外半径, 通过 Array , 可以将饼图设置为圆环图
var option = {series: [{type: 'pie',data: pieData,radius: ['50%', '70%']}]}
呈现
2.6 地图
地图的特点:地图主要可以帮助我们从宏观的角度快速看出不同地理位置上数据的差异
2.6.1 地图图表的使用方式
百度地图API
: 使用百度地图的 api , 它能够在线联网展示地图, 百度地图需要申请
矢量地图
: 可以离线展示地图, 需要开发者准备矢量地图数据(地图数据可以是json数据
,也可以是js数据
)
2.6.2 矢量地图的实现步骤
- 步骤1 ECharts 最基本的代码结构
- 步骤2 准备
中国的矢量 json 文件
, 放到 json/map/ 目录之下(假设) - 步骤3 使用
Ajax 获取 china.json
$.get('json/map/china.json', function (chinaJson) { })
- 步骤4 在Ajax的回调函数中, 往 echarts 全局对象注册地图的 json 数据
$.get('json/map/china.json', function (chinaJson) { echarts.registerMap('chinaMap', chinaJson) })
- 步骤5 获取完数据之后, 需要配置
geo 节点
, 再次的 setOption
var mCharts = echarts.init(document.querySelector("div")) $.get('json/map/china.json', function(chinaJson) {echarts.registerMap('chinaMap', chinaJson) var option = {geo: {type: 'map', // map是一个固定的值 map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致 }};mCharts.setOption(option)})
注意:由于在代码中使用了 Ajax
, 所以, 关于此文件的打开, 不能以 file 的协议打开
, 应该将其置于 HTTP 的服务之下方可正常展示
地图
2.6.3 地图的常见配置
- 缩放拖动: roam
var option = {geo: {type: 'map', // map是一个固定的值 map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致, roam: true, // 运行使用鼠标进行拖动和缩放 }}
- 名称显示: label(显示各个地名)
var option = {geo: {type: 'map', // map是一个固定的值 map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致, roam: true,label: {show: true}}}
- 初始缩放比例: zoom 、地图中心点: center
var option = {geo: {type: 'map', // map是一个固定的值 map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致, roam: true,label: {show: true},zoom: 0.8, // 地图的缩放比例, 大于1代表放大, 小于1代表缩小 center: [87.617733, 43.792818] // 当前视角的中心点,用经纬度表示 }}
2.6.4 地图的常见效果
- 显示某个区域
当点击某个省份时显示该省份的矢量地图,注册地图跟上述步骤一致,只是给ECharts实例添加点击事件
不同城市颜色不同
- 显示基本的中国地图- 准备好城市数据, 并且将数据设置给 series- 将 series 下的数据和 geo 关联起来- 结合 visualMap 配合使用
visualMap
是视觉映射组件, 和之前区域缩放 dataZoom
很类似, 可以做数据的过滤. 只不过dataZoom 主要使用在直角坐标系
的图表, 而 visualMap 主要使用在地图或者饼图
中
var option = {geo: {type: 'map',map: 'chinaMap',roam: true,label: {show: true}},series: [{data: airData,geoIndex: 0,type: 'map'}],visualMap: {min: 0, // 最小值 max: 300, // 最大值 inRange: {color: ['white', 'red'] // 颜色的范围 },calculable: true // 是否显示拖拽用的手柄(手柄能拖拽调整选中范围) }}
地图和散点图结合
- 给 series 这个数组下增加新的对象- 准备好散点数据,设置给新对象的 data- 配置新对象的 type type:effectScatter、让散点图使用地图坐标系统 coordinateSystem: 'geo'、- 让涟漪的效果更加明显 rippleEffect: { scale: 10 }
var option = {series: [{data: airData,geoIndex: 0,type: 'map'}, {data: scatterData,type: 'effectScatter',coordinateSystem: 'geo',rippleEffect: {scale: 10}}]}
2.7 雷达图
雷达图的特点:雷达图可以用来分析多个维度
的数据与标准数据的对比情况
实现步骤
- 步骤1 ECharts 最基本的代码结构
- 步骤2 定义各个维度的最大值
var dataMax = [{name: '易用性',max: 100}, {name: '功能',max: 100}, {name: '拍照',max: 100}, {name: '跑分',max: 100}, {name: '续航',max: 100}]
- 步骤3 准备具体产品的数据
var hwScore = [80, 90, 80, 82, 90]
var zxScore = [70, 82, 75, 70, 78]
- 步骤4 在 series 下设置 type:radar
var option = {radar: {indicator: dataMax},series: [{type: 'radar',data: [{name: '华为手机1',value: hwScore}, {name: '中兴手机1',value: zxScore}]}]}
2.7.1 雷达图的常见效果
- 显示数值 label(show:true)
- 区域面积 areaStyle (areaStyle: {})
- 绘制类型 shape (雷达图绘制类型,支持 ‘polygon’ 和 ‘circle’ ‘polygon’ : 多边形、‘circle’ 圆形。配置在
radar
)
2.8 仪表盘图
仪表盘的特点:仪表盘可以更直观的表现出某个指标的进度
或实际情况
实现步骤
- 步骤1 ECharts 最基本的代码结构
- 步骤2: 准备数据, 设置给 series 下的 data data:[97]
- 步骤3: 在 series 下设置 type:gauge
var option = {series: [{type: 'gauge',data: [{value: 97,}]}]}
2.8.1 仪表盘的常见效果
- 数值范围: max min
- 多个指针: 增加data中数组的元素
- 多个指针颜色的差异: itemStyle
var option = {series: [{type: 'gauge',data: [{value: 97,itemStyle: {color: 'pink'}}, {value: 85,itemStyle: {color: 'green'}}],min: 50}]}
3. ECharts配置项小结
3.1 柱状图 bar
series[].type | xAxis | yAxis | markPoint | markLine | label | barWidth |
---|---|---|---|---|---|---|
图表类型 | x轴 | y轴 | 最大值\最小 值 | 平均值 | 显示文本 | 柱宽度 |
3.2 折线图 line
series[].type | xAxis | yAxis | markPoint | markLine | markArea | smooth | lineStyle | areaStyle | boundaryGap | scale |
---|---|---|---|---|---|---|---|---|---|---|
图表类型 | x轴 | y轴 | 最大值\最小 值 | 平均值 | 标注区域 | 平滑线 | 线条风格 | 风格x轴 | 紧挨边缘 | 脱离0值比例 |
3.3 散点图 scatter
series[].type | xAxis | yAxis | symbolSize | itemStyle | showEffectOn | rippleEffect | scale |
---|---|---|---|---|---|---|---|
图表类型 | x轴 | y轴 | 散点大小 | 散点样式 | 显示时机 | 涟漪效果 | 脱离0值比例 |
3.4 饼图 pie
series[].type | label | radius | roseType | selectedMode | selectedOffset |
---|---|---|---|---|---|
图表类型 | 显示文本 | 半径 | 饼图类型 | 是否多选 | 选中扇区偏移量 |
3.5 地图 map
series[].type | geo | map | roam | zoom | center | label | geoIndex | visualMap | coordinateSystem |
---|---|---|---|---|---|---|---|---|---|
图表类型 | 地理坐标系组件 | 指明地图数据 | 开启鼠标拖动和缩放 | 平均值 | 图表的中心点 | 是否显示地区 | 指明关联的geo组 件 | 视觉映射组件 | 使用坐标系统 |
3.6 雷达图 radar
series[].type | radar | indicator | label | areaStyle | shape |
---|---|---|---|---|---|
图表类型 | 雷达图组件 | 雷达图的指示器 | 文字 | 区域颜色 | 雷达图形状 |
3.7 仪表盘 gauge
series[].type | max | min | itemStyle |
---|---|---|---|
图表类型 | 最大值 | 最小值 | 指针样式 |
3.8 直角坐标系配置
- grid
show[].type | borderWidth | borderColor | left | top | right | bottom | width | height |
---|---|---|---|---|---|---|---|---|
是否可见 | 边框宽度 | 边框颜色 | 左边 | 顶部 | 右边 | 底部 | 宽度 | 高度 |
- axis
type | data | position |
---|---|---|
轴类型 | 数据 | 显示位置 |
- dataZoom
type | xAxisIndex | yAxisIndex | start | end |
---|---|---|---|---|
缩放块类型 | x轴索引 | y轴索引 | 初始值 | 结束值 |
3.9 通用配置
- title
textStyle | borderWidth | borderColor | borderRadius | left | top | right | bottom |
---|---|---|---|---|---|---|---|
文字样式 | 边框宽度 | 边框颜色 | 边框圆角 | 左边 | 顶部 | 右边 | 底部 |
- tooltip
trigger | triggerOn | formatter |
---|---|---|
触发类型 | 触发时机 | 内容自定义 |
- toolbox.feature
saveAsImage | dataView | restore | dataZoom | magicType |
---|---|---|---|---|
保存图片 | 数据视图 | 重置 | 缩放 | 图表转换 |
- legend
data |
---|
图例数据, 需要和series数组中某组数据的name值一致 |
4. ECharts高级
4.1 显示相关
4.1.1 主题
- 默认主题
ECharts 中默认内置了两套主题: light
、dark
在初始化对象方法 init 中可以指明
var chart = echarts.init(dom, 'light')
var chart = echarts.init(dom, 'dark')
自定义主题
- 在主题编辑器中编辑主题(可以自定义很多内容):[去编辑](https://echarts.apache.org/zh/theme-builder.html)- 下载主题, 是一个 js 文件- 引入主题 js 文件- 在 init 方法中使用主题
4.1.2 调色盘
它是一组颜色,图形、系列会自动从其中选择颜色, 不断的循环从头取到尾, 再从头取到尾, 如此往复.
- 主题调色盘
echarts.registerTheme('itcast', {"color": ["#893448", "#d95850", "#eb8146", "#ffb248", "#f2d643", "#ebdba4"],"backgroundColor": "rgba(242,234,191,0.15)",......})
- 全局调色盘(全局调色盘是在 option 下增加一个 color 的数组)
var option = { color: ['red', 'green', 'blue'],// 全局调色盘 ......}mCharts.setOption(option)
- 局部调色盘(局部调色盘就是在 series 下增加一个 color 的数组)
var option = { // 全局调色盘 color: ['red', 'green', 'blue'],series: [{type: 'pie',data: pieData, // 局部调色盘 color: ['pink', 'yellow', 'black']}]}mCharts.setOption(option)
注意:如果全局的调色盘和局部的调色盘都设置
了, 局部调色盘会产生效果
, 这里面遵循的是就近原则
- 渐变颜色的实现(在 ECharts 中, 支持线性渐变和径向渐变两种颜色渐变的方式)
线性渐变
线性渐变
的类型为 linear
, 他需要配置线性的方向
, 通过 x, y, x2, y2
即可进行配置。
x , y , x2 , y2 ,范围从 0 - 1
,相当于在图形包围盒中的百分比
,如果 global 为 true
,则该四个值是绝对的像素位置 在下述代码中的0 0 0 1
意味着从上往下进行渐变
series: [{type: 'bar',data: yDataArr,itemStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'red' // 0% 处的颜色 }, {offset: 1,color: 'blue' // 100% 处的颜色 }],globalCoord: false // 缺省为 false }}}]
径向渐变
径向渐变
的类型为 radial
, 他需要配置径向的方向
, 通过x , y , r 即可
进行配置前三个参数分别是圆心 x , y 和半径
,取值同线性渐变
在下述代码中的 0.5 0.5 0.5 意味
着从柱的重点点, 向外径向扩散半径为宽度一半的圆
series: [{itemStyle: {color: {type: 'radial',x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0,color: 'red' // 0% 处的颜色 }, {offset: 1,color: 'blue' // 100% 处的颜色 }],global: false // 缺省为 false }}}]
4.1.3 样式
- 直接样式
itemStyle
textStyle
lineStyle
areaStyle
label
data: [{value: 11231,name: "淘宝",itemStyle: {color: 'black'}}] title: {text: '我是标题',textStyle: {color: 'red'}}label: {color: 'green'}
注意:这些样式一般都可以设置颜色或者背景或者字体等样式, 他们会覆盖主题中的样式
- 高亮样式
图表中, 其实有很多元素都是有两种状态的, 一种是默认状态
, 另外一种就是鼠标滑过或者点击形成的高亮状态
. 而高亮样式是针对于元素的高亮状态设定的样式(,在 emphasis 中包裹原先的 itemStyle)
series: [{type: 'pie',label: {color: 'green'},emphasis: {label: {color: 'red'},},data: [{value: 11231,name: "淘宝",itemStyle: {color: 'black'},emphasis: {itemStyle: {color: 'blue'},}}]}]
4.1.4 自适应
实现步骤
- 步骤1: 监听窗口大小变化事件
- 步骤2: 在事件处理函数中调用 ECharts 实例对象的 resize 即可
4.2 动画的使用
ECharts 已经内置好了加载数据的动画, 我们只需要在合适的时机显示或者隐藏即可
4.2.1 加载动画
- 显示加载动画
mCharts.showLoading() 一般, 我们会在获取图表数据之前 显示加载动画
- 隐藏加载动画
mCharts.hideLoading() 一般, 我们会在获取图表数据之后 隐藏加载动画, 显示图表
4.2.2 增量动画
所有数据的更新都通过 setOption 实现, 我们不用考虑数据到底产生了那些变化, ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
4.2.3 动画的配置
- 开启动画
animation: true
- 动画时长
animationDuration: 5000
- 缓动动画(众多参数看官网https://echarts.apache.org/examples/zh/editor.html?c=line-easing)
- 动画阈值
animationThreshold: 8
单种形式的元素数量大于这个阈值时会关闭动画
4.3 交互API
4.3.1 全局echarts 对象
全局 echarts 对象是引入 echarts.js 文件之后就可以直接使用的
- echarts.init(初始化ECharts实例对象 使用主题)
- echarts.registerTheme(注册主题 只有注册过的主题,才能在init方法中使用该主题)
- echarts.registerMap(注册地图数据)
- echarts.connect
- 一个页面中可以有多个独立的图表
- 每一个图表对应一个 ECharts 实例对象
- connect 可以实现多图关联,传入联动目标为 EChart 实例,支持数组
4.3.2 echarts实例(echartsInstance)对象
eChartsInstance 对象是通过 echarts.init 方法调用之后得到的
- echartsInstance.setOption
设置或修改图表实例的配置项以及数据 多次调用setOption方法 合并新的配置和旧的配置 增量动画
- echartsInstance.resize
重新计算和绘制图表一般和window对象的resize事件结合使用 window.onresize = function(){ myChart.resize(); }
- echartsInstance.on 、echartsInstance.off
绑定或者解绑事件处理函数(on多用于初始化图标实例后)
- echartsInstance.dispatchAction(主动触发某些行为, 使用代码模拟用户的行为)
// 触发高亮的行为 mCharts.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: 1})// 触发显示提示框的行为 mCharts.dispatchAction({type: "showTip",seriesIndex: 0,dataIndex: 3})
- echartsInstance.clear
清空当前实例,会移除实例中所有的组件和图表
清空之后可以再次 setOption
- echartsInstance.dispose
销毁实例
销毁后实例无法再被使用
OVER(报告大哥:您已成功拿下ECharts)
ECharts实操手册相关推荐
- 【报告分享】见实私域流量白皮书:私域流量案例实操手册.pdf
大家好,我是文文(微信:sscbg2020),今天给大家分享见实科技于2020年10月份发布的报告<见实私域流量白皮书:私域流量案例实操手册.pdf>. 本报告共73页,包含如下鞋服.餐饮 ...
- PCDN服务接入实操手册
摘要: 本文为阿里云P2P内容分发网络(PCDN)实操手册,可根据本文内容接入与操作.参考来源官网文档. 一. PCDN是定义? P2P 内容分发网络(英文名:P2P CDN,以下简称PCDN)是以P ...
- 重磅发布:《AI产品经理的实操手册(2023版)》
今天是咱们社群"AI产品经理大本营"六周年活动的最后一天,正式发布这份大家和我都非常期待的重磅干货--<AI产品经理的实操手册(2023版)> 上周发布的"A ...
- 工欲善其事必先利其器,TI-ONE平台“实操手册”在这里!
为帮助选手们更好地备战赛事,2021腾讯广告算法大赛官方于5月10日至5月12日每晚七点,开启了"视"界杯系列专题直播活动.在5月11日的直播中,腾讯云高级工程师谢博文.彭彪及腾讯 ...
- 实操手册:如何在GKE上部署HTTP(S) Load Balancer及容器应用程式
Kubernetes(下文简称 k8s) 代表了 Google 的第三代容器管理系统,仅次于 Borg 和 Omega ,现在已经成为主要的容器平台.GKE 提供了了全套的 k8s 托管服务,将 Au ...
- 出海季收官,速来 Get 全球化发展实操手册
"出海是这个时代给我们的机遇." 关注[融云全球互联网通信云]了解更多 这是很多互联网出海人的心声.从工具到电商和内容,从出海到全球化和全球本地化,热词背后是一批批出海人的前赴后继 ...
- roc曲线的意义_实用!Biomarker表达差异图、ROC曲线amp;四格表的实操手册
解螺旋·蘑菇老师详细讲解biomarker研究在课题设计方面需要注意的一些共性问题,包括标本类型.样本收集以及病例资料三大部分. 本期课程则汇总了biomarker研究中的典型图表以形成"图 ...
- 《手把手构建人工智能产品》-产品经理的AI实操手册
<手把手构建人工智能产品>-产品经理的AI实操手册 <手把手构建人工智能产品>-产品经理的AI实操手册一书,由电子工业出版社于2020年4月出版,作者是高飞.该书概括了人工智能 ...
- 小红书流量红利词「0基础」实操手册
2021年小红书处于较大变革中,号店一体.建群.知识付费(内测)等商业动作频频.在诸多变化下,占据首页流量38%的搜索流量依然是小红书的常春藤.那么品牌.创作者该如何牢牢把握这部分确定的流量? 本文梳 ...
- [小小明]Python正则表达式速查表与实操手册
v0.3下载地址:https://download.csdn.net/download/as604049322/14504394 目录 文章目录 文档简介 作者简介 阅读建议 版权声明 Python ...
最新文章
- Android之startActivityForResult的使用
- CentOS7系统ifconfig无法使用的解决方法
- 特斯拉「断网」致500名车主被锁车外,最长5小时,网友:有些东西就不该经过网络...
- python语言的官方网站地址-字符串中的街道地址搜索-Python或Ruby
- centos7安装sftp服务器
- 7 useLayoutEffect、useDebugValue
- 一些实用却很少用到的css以及标签
- 微信小程序定义全局变量_微信小程序第二天学习内容分享
- 【servlet】servlet基础知识总结
- 分布式通信-tcp/ip 单播
- 图神经网络/GCN 入门
- 考研高等数学张宇30讲笔记——第十二讲 二重积分
- git 版本控制~ 文件没有绿色和红色图标
- 关于浮点运算和定点运算
- 使用ubuntu遇到的问题-An error occurred,please run Package Manager...
- Android 4.4 Kit Kat 源码下载
- C++的explicit是什么?
- 安心做技术研究的技术的少,为了名气,改写文章如此泛滥!
- 【离散系统】传递函数和状态空间方程离散化
- 解决PotPlayer播放视频没有声音
热门文章
- html swf格式转换器,蒲公英SWF格式转换器
- 爬虫日记-采集 快代理 免费 代理ip 并 清洗 ip 附源码gitee,可运行
- Embarcadero官方出品Delphi入门教程学习视频:2小时轻松掌握Delphi快速开发跨平台应用程序APP软件菜鸟教程
- quartz spring配置实例代码demo下载
- 博弈论学习(一)——基础
- python结巴分词下载_jieba: 结巴中文分词做最好的Python分词组件
- 【创建交互式 Dice Roller 应用】
- SpringBoot2集成Quartz配置独立数据源
- 发票识别系统流程以及应用场景
- 酒店管理系统-概要设计报告