Echarts3单仪表盘和多仪表盘
⼀. 简介
ECharts，⼀个使⽤ JavaScript 实现的开源可视化库，可以流畅的运⾏在 PC 和移动设备上，兼容当前绝⼤部分浏览器
（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖⽮量图形库 ZRender，提供直观，交互丰富，可⾼度个性化定制的数据可视化图表。
⼆. 特性
1. 丰富的可视化类型
ECharts 提供了常规的、、、、，⽤于统计的，⽤于地理数据可视化的、、，⽤于关系数据可视化的、、，多维数据可视化的，还有⽤于 BI 的，，并且⽀持图与图之间的混搭。
除了已经内置的包含了丰富功能的图表，ECharts 还提供了，只需要传⼊⼀个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使⽤⽽不需要操⼼其它事情。
2. ⾃定义主题构建
你可以在下载包含所有图表的构建⽂件，如果只是需要其中⼀两个图表，⼜嫌包含所有图表的构建⽂件太⼤，也可以在中选择需要的图表类型后⾃定义构建。
三. ⽰例
1. ⾸先引⼊ ECharts
通过标签⽅式直接引⼊构建好的 echarts ⽂件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引⼊ ECharts ⽂件 -->
<script src="echarts.min.js"></script>
</head>
</html>
2. 为 ECharts 准备⼀个具备⾼宽的 DOM 容器
<body>
<!-- 为 ECharts 准备⼀个具备⼤⼩（宽⾼）的 DOM -->
<div id="myChart" ></div>
</body>
3. 实例化⽣成
通过 echarts.init ⽅法初始化⼀个 echarts 实例，并通过 setOption ⽅法⽣成⼀个简单的仪表盘，下⾯是完整代码。
（1）常规单仪表盘
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引⼊ echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备⼀个具备⼤⼩（宽⾼）的Dom -->
<div id="main" ></div>
<script type="text/javascript">
/
/ 基于准备好的dom，初始化echarts实例
var myChart = echarts.ElementById('myChart'));
// 指定图表的配置项和数据
var option ={
tooltip:{
formatter:'{a} <br/>{b} : {c}KM/H'
},
toolbox:{
feature:{
restore:{},
saveAsImage:{}
}
},
series:[
{
name:'速度指标',
type:'gauge',
detail:{formatter:'{value}KM/H'},
data:[{value:50, name:'速度'}]
}
]
};
/
/ 使⽤刚指定的配置项和数据显⽰图表。
myChart.setOption(option);
</script>
</body>
</html>
效果图
（2）⾃定义属性单仪表盘
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引⼊ echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备⼀个具备⼤⼩（宽⾼）的Dom -->
<div id="main" ></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.ElementById('myChart'));
// 指定图表的配置项和数据
var option ={
tooltip :{//提⽰框浮层属性
show:true,
transitionDuration:0.8,//提⽰框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着⿏标移动。 formatter:"{a} - {c}KM/H"//提⽰框浮层内容格式器，⽀持字符串模板和回调函数两种形式。
},
toolbox:{//⼯具栏。内置有导出图⽚，数据视图，动态类型切换，数据区域缩放，重置五个⼯具。
show :true,
feature :{
mark :{show:true},
restore :{show:true},
saveAsImage :{show:true}
}
},
series :[//系列列表。每个系列通过 type 决定⾃⼰的图表类型
{
{
name:'速度',
type:'gauge',// 仪表盘
min:0,// 最⼩值
max:100,// 最⼤值
precision:2,// ⼩数精度，默认为0，⽆⼩数点
splitNumber:10,// 分割段数，默认为5
axisLine:{// 轴线相关配置
lineStyle:{// 轴线样式
color:[[0.2,'#5FB878'],[0.8,'#01AAED'],[1,'#FF5722']],//轴线可以被分成不同颜⾊的多段，每段的结束位置和颜⾊可以通过⼀个数组来表⽰ width:50
}
},
axisTick:{// 刻度样式
splitNumber:10,// 分隔线之间分割的刻度数
length :15,// 刻度线长，⽀持相对半径的百分⽐
lineStyle:{// 刻度线样式
color:'#EEE'
}
},
axisLabel:{// 刻度标签
textStyle:{// 其余属性默认使⽤全局⽂本样式，详见TEXTSTYLE
color:'auto'
}
font weight bolder},
splitLine:{// 分隔线样式
show:true,// 默认显⽰，属性show控制显⽰与否
length :50,// 分隔线线长，⽀持相对半径的百分⽐
lineStyle:{// 分隔线条样式
color:'#CCC'
}
},
pointer :{// 仪表盘指针
width :10
},
title :{// 仪表盘标题
show :true,
offsetCenter:[0,'90%'],// x, y，单位px
textStyle:{// 其余属性默认使⽤全局⽂本样式，详见TEXTSTYLE
color:'rgba(255,255,255,0.7)',
fontSize:16,
fontWeight:'bolder'
}
},
detail :{// 仪表盘详情，⽤于显⽰数据
formatter:'{value}KM/H',
offsetCenter:[0,'56%'],
textStyle:{// 其余属性默认使⽤全局⽂本样式，详见TEXTSTYLE
color:'auto',
fontSize:20,
fontWeight:'bolder'
}
},
data:[{value:50, name:'速度'}]
}
]
};
// 使⽤刚指定的配置项和数据显⽰图表，加个定时⽣成，让你的仪表盘动起来
setInterval(function(){
option.series[0].data[0].value =(Math.random()*100).toFixed(2)-0;
myChart.setOption(option,true);
},2000);
</script>
</body>
</html>
效果图
（4）多仪表盘
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引⼊ echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备⼀个具备⼤⼩（宽⾼）的Dom -->
<div id="main" ></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.ElementById('myChart'));
// 指定图表的配置项和数据
var option ={
backgroundColor:'#1b1b1b',
tooltip:{
formatter:'{a} <br/>{c} {b}'
},
toolbox:{
show:true,
feature:{
mark:{show:true},
restore:{show:true},
saveAsImage:{show:true}
}
},
series:[
{
name:'速度',
type:'gauge',
min:0,
max:220,
splitNumber:11,
radius:'50%',
axisLine:{// 坐标轴线
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论