最近在做superset的二次开发，可是superset提供的视图样式不能满足项目的需求，所以只好寻找其他出路，后来发现了echarts，由百度开源的一款前端框架，样式很丰富，效果也是非常棒，下面随便欣赏几个。
image.png
image.png
image.png
确实很好看，可是自己做的差很多了，一点一点的完善吧。
下面是我做的一个仪表盘。
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/echarts.js" type="text/javascript"></script>
</head>
<body>
<!--仪表盘gauge-->
<div id="main" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
// 初始化
var mychart = echarts.init(document.getElementById('main'));
// 配置项
var option = {
tooltip: {
formatter: "{a} <br/>{c} {b}"
},
toolbox: {
show: true,
feature: {
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
series: {
name: '速度',
type: 'gauge',
z: 3,
min: 0,
max: 220,
splitNumber: 11,
radius: '100%',
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 10
}
},
axisTick: { // 坐标轴小标记
length: 15, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length: 20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
axisLabel: {
backgroundColor: 'auto',
borderRadius: 2,
color: '#eee',
padding: 3,
textShadowBlur: 2,
textShadowOffsetX: 1,
textShadowOffsetY: 1,
textShadowColor: '#222'
},
title: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 20,
fontStyle: 'italic'
},
detail: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
formatter: function(value) {
value = (value + '').split('.');
value.length < 2 && (value.push('00'));
return('00' + value[0]).slice(-2) +
'.' + (value[1] + '00').slice(0, 2);
},
fontWeight: 'bolder',
borderRadius: 3,
backgroundColor: '#444',
borderColor: '#aaa',
shadowBlur: 5,
shadowColor: '#333',
shadowOffsetX: 0,
shadowOffsetY: 3,
borderWidth: 2,
textBorderColor: '#000',
textBorderWidth: 2,
textShadowBlur: 2,
textShadowColor: '#fff',
textShadowOffsetX: 0,
textShadowOffsetY: 0,
fontFamily: 'Arial',
width: 100,
color: '#eee',
rich: {}
},
data: [{
value: 40,
name: 'km/h'
}]
}
};
// 加载
mychart.setOption(option);
</script>
</body>
</html>
官方还有一个很夜间汽车的仪表盘，很炫酷。我截取了里面的水表盘的代码。
image.png
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/echarts.js" type="text/javascript"></script>
</head>
<body>
<div id="main" style="width: 1000px; height: 800px;"></div>
<img src="img/kedu.png" id="kedu" hidden="hidden" style="width: 15px; height: 15px;">
<script type="text/javascript">
mychart = echarts.init(document.getElementById("main"));
var datavalue=123;
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',
center : ['50%', '0%'], // 默认全局居中
radius : '120%',
min:10,
max:170,
startAngle:282,
endAngle:258,
splitNumber:8,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2,'rgba(100,179,206,0.8)'],[0.8,'rgba(100,179,206,0.8)'],[1,'rgba(100,179,206,0.8)']],
width: 2,
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
show: false
},
axisLabel: {
textStyle: { // 属性lineStyle控制线条样式
fontWeight: 'bolder',
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
},
formatter:function(v){
return (170 + 10 - v) + '';
}
},
splitLine: { // 分隔线
length :0, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width:15,
// color: '#fff',
color: {
image: document.getElementById('kedu'),
// repeat: 'no-repeat'
},
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
pointer: {
width:2,
shadowColor : '#fff', //默认透明
shadowBlur: 5
},
title : {
show: false
},
detail : {
show: false
},
data:[{value: datavalue, name: '逆序数列'}]
}
]
};
mychart.setOption(option);
</script>
</body>
</html>
网友评论