一.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 | 提示 |
xAxis | x轴线 |
yAxis | y轴线 |
series | 系列 |
data | 数据 |
二.图表常见类型
1.bar 柱状图
2.line折线图
(1)曲线图
加上smooth:true;就会变成曲线图
(2)面积图
加上areaStyle:{fill:“#f70”} 会变成面积图
3.pie 饼形图
(1)加上radius:[80,50] 会变成环形图
三.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}
}
]
}
]
四.动态显示局部
- 定义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.案例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 01 导入js -->
<script src="js/echarts.min.js"></script>
<!-- 03 设置容器的样式 -->
<style>
#container{
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<!-- 02 创建个容器 -->
<div id="container"></div>
</body>
<script>
//04 实例化echarts
// 4.1 创建一个实例
var echart = echarts.init(document.getElementById("container"))
// 4.2 定义配置项
var option = {
// 图表的标题
title:{
text:"我的第一个图表"
},
// 图表的提示
tooltip:{
},
// 图例
legend:{
data:["睡眠时长"]},
// x轴线
xAxis:{
data:["周一","周二","周三","周四","周五","周六","周日"]},
// y轴线
yAxis:{
},
// 设置数据
series:[
{
// 数据名称
name:"睡眠时长",
// 类型为柱状图
type:"bar",
// 数据data
data:[8,10,4,5,9,4,8]
}
]
}
// 4.3 更新配置
echart.setOption(option);
// chart图表,set设置 Option选项 data数据 type类型 bar条(柱状条),series系列(数据) Axis轴线 xAxis水平轴线
// legend传奇(图例) tooltip 提示 init初始化 document文档
</script>
</html>
2.案例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 01 导入js -->
<script src="js/echarts.min.js"></script>
<!-- 03 设置容器的样式 -->
<style>
#container{
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<!-- 02 创建个容器 -->
<div id="container"></div>
</body>
<script>
//04 实例化echarts
// 4.1 创建一个实例
var echart = echarts.init(document.getElementById("container"))
// 4.2 定义配置项
var option = {
// 图表的标题
title:{
text:"我的第一个图表"
},
// 图表的提示
tooltip:{
},
// 图例
legend:{
data:["睡眠时长","玩游戏时长",&