————————————————
版权声明：本文为CSDN博主「争儿不脱发」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_55734030/article/details/127559434
一.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语法
2.1 echarts常见术语
英文
汉语
title
标题
legend
图例
tooltip
提示
xAxis
x轴线
yAxis
y轴线
series
系列
data
数据
2.2 图表常见类型
1. bar 柱状图
2. line折线图
（1）曲线图：加上smooth:true;就会变成曲线图（平滑线形图）
（2）面积图：加上areaStyle:{fill:“#f70”} 会变成面积图（面型图）
3. pie 饼形图
（1）加上radius:[80,50] 会变成环形图
2.3 echarts 中的样式简介
1. 颜色主题
（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"} //强调样式
}
2. 特殊样式
渐变色
（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]
}
3. 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}
}
]}
]
2.4 动态显示局部
定义option
修改option值
echart.setOption(option);更新数据和视图
2.5 缓动动画
动画延迟animationDelay
动画时长animationDuration,
动画缓动函数animationEasing
animationDelay: function(idx) {
// 越往后的数据延迟越大
return idx * 200;
},
animationDuration: function(idx) {
// 每小格动画的时候
return idx * 200;
},
// 弹性的方式出现动画
animationEasing: "bounceInOut"
}
2.6 事件
事件的监听
echart.on（”事件名“，处理函数）
发送事件
dispatchAction
echart.dispatchAction({
type: 'showTip',
// 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
seriesIndex: 0,
// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
dataIndex: ind,
// 可选，数据项名称，在有 dataIndex 的时候忽略
position:"top",
})
三.echarts应用
实践出真知，学过前面的语法，快来创建属于自己的图表吧。练习完案例，就掌握了80%的echarts。宝子们快动手练习吧。
案例1
点击查看 案例1 代码
案例2
点击查看 案例2 代码
案例3
点击查看 案例3 代码
案例4
点击查看 案例4 代码
案例5
点击查看 案例5 代码
案例6
点击查看 案例6 代码
案例7
点击查看 案例7 代码
案例8
点击查看 案例8 代码
案例9
点击查看 案例9 代码
案例10
点击查看 案例10 代码