echarts入门
2021-08-02 本文已影响0人
易路先登
简介：echarts
Echarts，一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11,Chrome,Firefox,Safari），底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化表。
1、入门案例
入门柱状图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.js"></script>
<style>
#chart{
width:800px;
height:400px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
const chartDom = document.getElementById('chart');
const chart = echarts.init(chartDom,'dark');
chart.setOption({
title:{
text:'Echarts 入门'
},
xAxis:{//x轴数据
data:['食品','服饰','数码','箱包']
},
yAxis:{},//y轴数据
series:{//数据
type:'bar',
data:[100,120,50,90]
}
})
</script>
</body>
</html>
2、自定义主题
echarts官方只提供了light和dark两种模式。如果开发中遇到其他需求，需要自定义。
官网路径
官网--->教程--->样式简介--->主题编辑器
echarts.init(chartDom,'主题名称')
3、svg渲染
echarts.init(chartDom,'主题名称',{renderer:'svg'})
4、系列
系列（series）是指：一组数值映射成对应的图。
多系列效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.js"></script>
<style>
#chart{
width:800px;
height:400px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
const chartDom = document.getElementById('chart');
const chart = echarts.init(chartDom,'dark');
chart.setOption({
dataset:[
],
title:{
text:'Echarts 多系列示例'
},
xAxis:{
data:['一季度','二季度','三季度','四季度']
},
yAxis:{},
series:[
{
type:'pie',
center:['65%',60],
radius:35,
data:[{
name:'一季度',
value:50
},{
name:'二季度',
value:30
},{
name:'三季度',
value:80
},{
name:'四季度',
value:20
}]
},{
type:'line',
data:[100,112,96,123]
},{
type:'bar',
data:[79,81,88,7]
}
]
})
</script>
</body>
</html>
5、ECharts 4.0新特性：dataset
ECharts 4开始支持了数据集(dataset)组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这一特性能将逻辑和数据分离，带来更好的复用，并易于理解。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.js"></script>
<style>
#chart{
width:800px;
height:400px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
const chartDom = document.getElementById('chart');
const chart = echarts.init(chartDom,'dark');
chart.setOption({
dataset:{
source:[
['一季度',100,79,'分类一',50],
['二季度',112,81,'分类二',60],
['三季度',96,88,'分类三',55],
['四季度',123,72,'分类四',70]
]
},
title:{
text:'Echarts 多系列示例'
},
xAxis:{
data:['一季度','二季度','三季度','四季度']
},
yAxis:{},
series:[
{
type:'pie',
center:['65%',60],
radius:35,
encode:{itemName:3,value:4}
},{
type:'line',
encode:{
x:0,y:1
}
},{
type:'bar',
encode:{
x:0,y:2
}
}
]
})
</script>
</body>
</html>
6、组件
ECharts中除了绘图之外其他部分，都可抽象为“组件”。例如：xAxis(直角坐标系x轴)、yAxis（直角坐标系y轴）、grid(直角坐标系底板)、angleAxis(极坐标系角度轴)...
常用组件
（1）、副标题
title:{
text:'Echarts 多系列示例',
subtext:'副标题'
},
（2）、图例组件
注意：图例数据要和系列数据相绑定
图例组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.js"></script>
<style>
#chart{
width:800px;
height:400px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
const chartDom = document.getElementById('chart');
const chart = echarts.init(chartDom,'dark');
chart.setOption({
dataset:{
source:[
['一季度',100,79,'分类一',50],
['二季度',112,81,'分类二',60],
['三季度',96,88,'分类三',55],
['四季度',123,72,'分类四',70]
]
},
title:{
text:'Echarts 多系列示例',
subtext:'副标题'
},
//legend:{//常规设置
//data:['分类','折线图','柱状图']
//},
legend:{
data:[{
name:'分类',
icon:'circle',
textStyle:{
color:'red'
}
},'折线图','柱状图'],
left:300
},
xAxis:{
data:['一季度','二季度','三季度','四季度']
},
yAxis:{},
series:[
{
name:'分类',
type:'pie',
center:['65%',60],
radius:35,
encode:{itemName:3,value:4}
},{
name:'折线图',
type:'line',
encode:{
x:0,y:1
}
},{
name:'柱状图',
type:'bar',
encode:{
x:0,y:2
}
}
]
})
</script>
</body>
</html>
（3）、toolBox
...
toolbox:{
feature:{
saveAsImage:{},
dataZoom:{
yAxisIndex:false
},
restore:{}
}
},
dataZoom:[{
show:true,
start:0,
end:100
}],
...
（4）、grid定位组件
支持像素与百分比两种书写形式
grid:{
top:100,
left:10,
right:10,
bottom:100
}
7、坐标系
（1）、散点图
散点图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.js"></script>
<style>
#chart{
width:800px;
height:400px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
const chartDom = document.getElementById('chart');
const chart = echarts.init(chartDom,'linght');
chart.setOption({
xAxis:{},
yAxis:{},
dataset:{
source:[
[13,44],
[51,51],
[51,32],
[67,19],
[19,33]
]
},
series:[{
type:'scatter',
encode:{
x:0,
y:1
}
}]
})
</script>
</body>
</html>
（2）、双坐标系
双坐标系
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.js"></script>
<style>
#chart{
width:800px;
height:400px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
const chartDom = document.getElementById('chart');
const chart = echarts.init(chartDom,'linght');
chart.setOption({
xAxis:{
type:'category'
},
yAxis:[{
min:0,
max:100
},{
splitLine:{
show:false
}
}],
dataset:{
source:[
['product',2012,'2013','2014','2015'],
['Matcha Latte',41.1,30.4,65.1,53.3],
['Milk Tea',86.5,92.1,85.7,83.1]
]
},
series:[{
type:'bar',
seriesLayoutBy:'row',
yAxisIndex:0
},
{
type:'line',
seriesLayoutBy:'row',
yAxisIndex:1
}]
})
</script>
</body>
</html>
双坐标系：
双坐标系
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.js"></script>
<style>
#chart{
width:800px;
height:400px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
const chartDom = document.getElementById('chart');
const chart = echarts.init(chartDom,'linght');
chart.setOption({
xAxis:[{
type:'category',
gridIndex:0
},
{
type:'category',
gridIndex:1
}],
yAxis:[{
min:0,
max:100,
gridIndex:0
},{
splitLine:{
show:false
},
gridIndex:0
},{
min:0,
max:150,
gridIndex:1
}],
dataset:{
source:[
['product',2012,'2013','2014','2015'],
['Matcha Latte',41.1,30.4,65.1,53.3],
['Milk Tea',86.5,92.1,85.7,83.1]
]
},
grid:[{
bottom:'55%'
},{
top:'55%'
}],
series:[{
type:'bar',
seriesLayoutBy:'row',
xAxisIndex:0,
yAxisIndex:0
},
{
type:'line',
seriesLayoutBy:'row',
xAxisIndex:0,
yAxisIndex:1
},
{
type:'line',
seriesLayoutBy:'row',
xAxisIndex:1,
yAxisIndex:2
}]
})
</script>
</body>
</html>
