ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。
开始第一个ECharts实例
多柱状图实例及优化
折线图实例
通用配置
最终案例
开始第一个ECharts实例
- 准备好ECharts源码文件，这里我使用 echarts.min.js，可以到官方网站下载，也可以到github下载
官方网站
GitHub
- 新建一个html文件，准备一个容器，将echarts源码引入其中(一定要为容器设置宽高)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./echarts.min.js" type="text/javascript" charset="utf-8"></script>
<style>
#app{
width:600px;
height:400px;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
// 接下来的代码全部在此处
</script>
</body>
</html>- 初始化echarts，将其与容器绑定
let e = echarts.init(document.querySelector("#app"));
- 创建一个配置对象，并将其与echarts实例绑定
let option = {};
e.setOption(option);- 准备x轴分类数据，y轴数值数据，这里以成绩为例
let xdata = ["小明","小王","小刚"];
let ydata = [84,65,90];- 配置option对象(详见注释)
let option = {
xAxis:{ // 这里配置的是x轴 也就是横轴数据
type:"category", // 分类类型
data:xdata // x轴的分类数据 这里每个分类就是每个人
},
yAxis:{ // 这里配置的是y轴 也就是纵轴数据
type:"value" // 值类型
},
series:[ // 这里配置的就是图表中的数据
{
name:"数学", // 名字 后期会有用
type:"bar", // 柱状图类型
data:ydata // 数据源
}
]
};- 实例效果
- 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./echarts.min.js" type="text/javascript" charset="utf-8"></script>
<style>
#app{
width:600px;
height:400px;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
let e = echarts.init(document.querySelector("#app"));
let xdata = ["小明","小王","小刚"];
let ydata = [84,65,90];
let option = {
xAxis:{
type:"category",
data:xdata
},
yAxis:{
type:"value"
},
series:[
{
name:"数学",
type:"bar",
data:ydata
}
]
};
e.setOption(option);
</script>
</body>
</html>多柱状图实例及优化
如果每个人有多个成绩，那么应该如何来实现呢？
- 准备好数据
let xdata = ["小明","小王","小刚"];
let ydata = [84,65,90];
let ydata2 = [77,88,99];
let ydata3 = [69,59,100];- 修改option配置对象
let option = {
xAxis:{
type:"category",
data:xdata
},
yAxis:{
type:"value"
},
series:[ // 这里的修改，其实就是多加了两个数据对象
{
name:"数学",
type:"bar",
data:ydata
},{
name:"语文",
type:"bar",
data:ydata2
},{
name:"英语",
type:"bar",
data:ydata3
}
]
};优化
1. 增加各项数据 最大值 最小值标记
markPoint:{
data:[
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
}- 修改之后
let option = {
xAxis:{type:"category",data:xdata},
yAxis:{type:"value"},
series:[
{
name:"数学",
type:"bar",
data:ydata,
markPoint:{
data:[
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
}
},{
name:"语文",
type:"bar",
data:ydata2,
markPoint:{
data:[
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
},{
name:"英语",
type:"bar",
data:ydata3,
markPoint:{
data:[
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
}
]
};- 效果图
2. 增加各项数据平均值
markLine:{
data:[
{type:'average',name:'平均'}
]
}- 用法如下，哪个数据需要就加在哪个数据上面
{
name:"数学",
type:"bar",
data:ydata,
markLine:{
data:[
{type:'average',name:'平均'}
]
}
}- 效果
3. 增加数值显示 旋转数值 数值位置
label:{
show:true, // 是否显示数值
rotate:40, // 旋转角度
position:'top' // 数值显示位置
}- 修改配置对象
let option = {
xAxis:{
type:"category",
data:xdata
},
yAxis:{
type:"value"
},
series:[
{
name:"数学",
type:"bar",
data:ydata,
label:{
show:true,
rotate:40,
position:'top'
}
},{
name:"语文",
type:"bar",
data:ydata2,
label:{
show:true,
rotate:40,
position:'top'
}
},{
name:"英语",
type:"bar",
data:ydata3,
label:{
show:true,
rotate:40,
position:'top'
}
}
]
};- 效果
4. 柱宽度 横向柱状图
- 设置柱宽度
barWidth:“30%”
{
name:"数学",
type:"bar",
data:ydata,
label:{show:true},
barWidth:"30%",
}- 横向柱状图的实现，要颠倒xy轴的配置
let option = {
xAxis:{
type:"value"
},
yAxis:{
type:"category",
data:xdata
},
series:[
{
name:"数学",
type:"bar",
data:ydata,
label:{show:true},
},{
name:"语文",
type:"bar",
data:ydata2,
label:{show:true}
},{
name:"英语",
type:"bar",
data:ydata3,
label:{show:true}
}
]
};- 效果
折线图实例
最顶级的食材往往只需要最简单的烹饪。。。跑题了
- 将 bar 改为 line 一个最基本的折线图就出来了
let option = {
xAxis:{
type:"category",
data:xdata
},
yAxis:{
type:"value"
},
series:[
{
name:"数学",
type:"line",
data:ydata,
label:{show:true},
},{
name:"语文",
type:"line",
data:ydata2,
label:{show:true}
},{
name:"英语",
type:"line",
data:ydata3,
label:{show:true}
}
]
};
通用配置
标题 title
- 文字样式 textStyle
- color 文字颜色
- fontStyle 字体风格
- fontWeight 文字粗细
let option = {
title:{
text:"成绩单",
textStyle:{
color:"#ff8800"
}
}- 标题边框
- borderWidth
- borderColor
- borderRadius
title:{
text:"成绩单",
textStyle:{
color:"#ff8800"
},
borderWidth:3,
borderColor:"#eeeeee",
borderRadius:6
}- 标题位置
- left
- top
- right
- bottom
title:{
text:"成绩单",
textStyle:{
color:"#ff8800"
},
left:100,
top:10
}提示 tooltip
提示框组件，用于配置鼠标划过或点击图表时的显示框
- 触发类型 trigger
- item
- axis
- 触发时机 triggerOn
- mouseover
- click
- 格式化 formatter
- 字符串模板
- 回调函数
tooltip:{
trigger:'axis',
triggerOn:"click",
// formatter:"{b} 的成绩是 {c}"
formatter:function(arg){
return arg[0].name + '的分数是:'+arg[0].data
}
}工具按钮 toolbox
toolbox ECharts提供的工具栏
- 内置有到处图片、数据视图，动态类型切换，数据区域缩放，重置五个工具
toolbox:{
feature:{
saveAsImage:{}, // 保存为图片
dataView:{}, // 数据视图
restore:{}, // 重置
dataZoom:{}, // 区域缩放
magicType:{ // 动态类型切换
type:['bar','line']
}
}
}图例 legend
图例，用于筛选系列，需要和series配合使用
- legend 中的 data 是一个数组
- legend 中的 data 的值需要和 series 数组中某组数据的name值一致
legend:{data:['数学','语文']},
series:[
{
name:'数学',
type:'bar',
data:ydata
},
{
name:"语文",
type:'bar',
data:ydata2,
}
]最终案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./lib/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#app{
width:600px;
height:400px;
}
</style>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript">
let mCharts = echarts.init(document.querySelector("#app"));
let xdata = ['小张','小王','小明','小红','小芳']
let ydata = [80,88,99,82,68];
let ydata2 = [66,59,100,80,73];
let option = {
title:{
text:"成绩单",
textStyle:{
color:"#ff8800"
},
borderWidth:3,
borderColor:"#eeeeee",
borderRadius:6,
left:100,
top:10
},
tooltip:{
trigger:'axis',
triggerOn:"click",
// formatter:"{b} 的成绩是 {c}"
formatter:function(arg){
return arg[0].name + '的分数是:'+arg[0].data
}
},
toolbox:{
feature:{
saveAsImage:{}, // 保存为图片
dataView:{}, // 数据视图
restore:{}, // 重置
dataZoom:{}, // 区域缩放
magicType:{ // 动态类型切换
type:['bar','line']
}
}
},
legend:{
data:['数学','语文']
},
xAxis:{
type:'value'
},
yAxis:{
type:'category',
data:xdata
},
series:[
{
name:'数学',
type:'bar',
markPoint:{
data:[
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine:{
data:[{type:'average',name:'平均'}]
},
label:{
show:true,
rotate:40,
position:'top'
},
barWidth:"30%",
data:ydata
},
{
name:"语文",
type:'bar',
data:ydata2,
label:{
show:true,
rotate:40,
position:'bottom'
},
barWidth:"30%"
}
]
}
mCharts.setOption(option);
</script>
</body>
</html>- 效果
