echarts
介绍
作用:展示图表的(大数据可视化)
百度,捐赠给apache基金会,免费开源
竞品
heightCharts
D3
术语
网址:https://echarts.apache.org/zh/cheat-sheet.html
示例:
title标题
legend图例
xAxis、yAxis轴线
tooltip提示
toolbox工具箱
图表常见类型
bar 柱状图
line折线图
line 折线图
smooth:true 曲线图
areaStyle:“#f70” 面积图
pie 饼状图
pie 饼状图
radius:[80,50] 环形图
颜色
主题
light
dark
自定义
https://echarts.apache.org/zh/theme-builder.html
color
调色盘
option.color
color:["#55aaf","#aff7f","#55007f",#fff00"],
series.item.color
itemStyle
项的颜色
itemStyle:{color:"#f30"}
itemStyle:{
normal:{color:"#93da6c"}//正常颜色
emphasis:{color:"#bcff57"}//强调颜色
}
特殊样式(查官网)
1.使用渐变
itenStyle:{
color:linear,//渐变颜色
borderRadius:[30,30,0,0]//圆角半径
}
2.定义渐变
var linear = {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2:1,
colorStops: [{
offset: 0, color: '#02bcff' // 0% 处的颜色
}, {
offset: 1, color: '#5555ff' // 100% 处的颜色
}],
global: false // 缺省为 false
}
堆叠图
stack:true
label
标签
show:true
是否显示
position:”insideRight“
位置
formatter
格式
formatter:"{a}\n{c}分"
{a}系列名
{b}数据名
{c}数值
{d}百分百
rich富文本
formatter:"{big|{d}}{small|%}\n{b}",
rich:{
big:{
color:"#f70",
fontSize:"48px",
fontWeight:900,
},
small:{
color:"#f70",
}
}
动态显示局部
定义option
修改option值
echart.setOption(option);更新数据和视图
缓存动画
动画延迟
animationDelay:function(idx){
//越往后的数据延迟越大
return idx*200;
}
idx当前动画元素的下标
动画时长
animationDuration:function(idx){
//每小格动画的时间
return idx*200;
}
动画缓动函数
animationEasing:"bounceInOut"
弹性布局
事件的监听
echart.on(事件名,处理函数)
echart.on("mouseover",e=>{})
发送事件(dispatch)
echart.dispatchAction({
type: 'showTip'//显示提示
seriesIndex:0.//数据系列下标
datalndex: ind,//数据下标.
position:"top"//位置
})
echarts官网使用
网址https://echarts.apache.org/zh/index.html
入门实例https://echarts.apache.org/handbook/zh/get-started/
类的方法
先找到文档,再点击API进行查找
实例方法
先找到文档,再点击API进行查找,再在echarts中找自己需要的实例;
比如setOption...(设置选项),on...(注册事件)
动作与事件
在文档→教程查找;例如;action:{}动作,events:{}事件
选项配置:option如何修改
在文档→教程查找;在title:{}中查找所有的选项option的配置;
在series:[{}]中,可以根据不同的图表类型有不同的参数选项