echarts
介绍
作用：展示图表的（大数据可视化）
百度，捐给apache 免费开源
竟品：
heightCharts
D3
术语
https://echarts.apache.org/zh/cheat-sheet.html
legend 图例
tooltip提示
xAxis x轴线
yAxis y轴线
series系列
title 标题
data数据
图表常见类型
bar 柱状图
smooth:true 曲线图
line折线图
areaStyle:{fill:“#f70”} 面积图
pie 饼形图
radius:[80,50] 环形图
颜色
主题
light
dark
自定义
https://echarts.apache.org/zh/theme-builder.html
color 调色盘
option.color
color:["#55aaff","#aaff7f","#55007f","#ffff00"],
series.item.color
itemStyle(项的颜色)
itemStyle:{color:"#f30"}
itemStyle:{
normal:{color:"#93da6c"}, //正常颜色
emphasis:{color:"#bcff57"},//强调颜色
}
特殊样式(官网查找)
itemStyle:{
color:linear, //渐变颜色
borderRadius:[30,30,0,0] //圆角半径
}
// 定义渐变
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,
动态显示局部
定义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,//数据系列下标
dataIndex: ind,//数据下标
position:"top",//位置
}）
效果图
echarts官网使用
网址https://echarts.apache.org/zh/index.html
入门实例https://echarts.apache.org/handbook/zh/get-started/
类的方法
实例方法
动作与事件
选项配置：option如何修改
