一.echarts的介绍
1.echarts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。 2.学习一项技术的关键，还是需要多读官方文档，官网链接Apache ECharts,与之类似的图表库还有D3，HeightCharts。 3.echarts的下载 （1）从 npm 获取 npm install echarts --save （2）从 CDN 获取 （3）从 GitHub 获取
二.echarts语法
一.echarts常见术语
英文汉语title标题legend图例tooltip提示xAxisx轴线yAxisy轴线series系列data数据
二.图表常见类型
bar 柱状图line折线图 (1)曲线图 加上smooth:true;就会变成曲线图 (2)面积图 加上areaStyle:{fill:“#f70”} 会变成面积图pie 饼形图 （1）加上radius:[80,50] 会变成环形图
三.echarts 中的样式简介
颜色主题 （1）主题可以通过切换深色模式，直接看到采用主题的效果
通过light 、dark切换定制主题，具体可以参考官网，需要导入下载的js文件
// HTML 引入 vintage.js 文件后（假设主题名称是 "vintage"）
var chart = echarts.init(dom, 'vintage');
// ...
（2）color调色盘 在 option 中设置。可以设置全局的调色盘，也可以设置系列自己专属的调色盘。 全局调色盘option.color
option.color：color: ["pink", "#ff0", "#f0f", "#0ff"]
局部调色盘series.item.color
series: [
{
type: 'bar',
// 此系列自己的调色盘。
color: [
'#dd6b66',
'#759aa0',
'#e69d87',
'#8dc1a9',
'#ea7e53',
'#eedd78',
'#73a373',
'#73b9bc',
'#7289ab',
'#91ca8c',
'#f49f42'
]
},
（3）itemStyle项的颜色
itemStyle:{color:“#00f” }高亮的样式emphasis
itemStyle:{
normal:{color:"#93da6c"},
emphasis:{color:"#bcff57"}
}
特殊样式 渐变色 （1）定义渐变
// 定义渐变
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
}
（2）使用渐变
itemStyle:{
color:linear,
borderRadius:[30,30,0,0]
}
label标签
show：true是否显示position：”insideRight“位置formatter格式 formatter: “{a}\n{c}分” {a}系列名 {b}数据名 {c}数值 {d}百分百rich富文本
series:[
{type:"pie",radius:[200,110],data:[
{name:"百度",value:1200,
label:{show:true,
position:"center",
// {d}百分比 {big|内容} 使用样式
formatter:"{big|{d}}{small|%}\n{b}",
// 定义样式（富文本）
rich:{
big:{
color:"#f70",
fontSize:"48px",
fontWeight:900,
},
small:{ color:"#f70"
}
}
}},
{name:"其他",value:360,
// 样式灰色
itemStyle:{color:"#ccc"},
// 标签不显示
label:{show:false},
// 提示不显示
tooltip:{show:false}}
]}
]
}
四.动态显示局部
定义option修改option值echart.setOption(option);更新数据和视图
五.缓动动画
动画延迟animationDelay
动画时长animationDuration,
动画缓动函数animationEasing
animationDelay: function(idx) {
// 越往后的数据延迟越大
return idx * 200;
},
animationDuration: function(idx) {
// 每小格动画的时候
return idx * 200;
},
// 弹性的方式出现动画
animationEasing: "bounceInOut"
}
六.事件
事件的监听 echart.on（”事件名“，处理函数）发送事件 dispatchAction
echart.dispatchAction({
type: 'showTip',
// 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
seriesIndex: 0,
// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
dataIndex: ind,
// 可选，数据项名称，在有 dataIndex 的时候忽略
position:"top",
})
三.echarts应用
实践出真知，学过前面的语法，快来创建属于自己的图表吧。练习完案例，就掌握了80%的echarts。宝子们快动手练习吧。
案例1
案例2
案例3
案例4
案例5
案例6
案例7
案例8
案例9
案例10
终于到底啦，你是最棒的哟
推荐文章
您阅读本篇文章共花了：
发表评论