恩，则是一个很恶心的仪表盘，我不是很想写，但是客户需要啊，（捂脸），所以我就照着要求写了一份，做个备份，万一以后还能用到呢对吧。
这是效果图：
不算很好看，不过吧总算是做出来了，这是看一位大佬整理出来的，我不太会写注释，有兴趣的可以先去看看那位大佬的代码，
大佬的代码传送门
在看我的应该会好点
下面上代码，
<body >
<!-- <div id = "gradient60" style="border: 1px solid red;"></div>-->
<img alt="" id = "gradient90" src="/andon/front/board/chartsgauge/img/blueGradient90.png" style="display:none;">
<img alt="" id = "gradient60" src="/andon/front/board/chartsgauge/img/blueGradient60.png" style="display:none;">
<img alt="" id = "linearPic" src="/andon/front/board/chartsgauge/img/innerRing.png" style="display:none;">
<div id="main" style="width: 600px;height:600px;" ></div>
<script type="text/javascript">
$(function(){
var minNum = 0;
var maxNum = 100;
var minAngle = 230;
var maxAngle = -50;
var maxSplit = 60;//底色区刻度数量
var dataVal = (Math.random()*maxNum).toFixed(2) - 0;
//maxNum以内的随机数
console.log("dataValue = " + dataVal);
var offsetAngle = Math.floor(280.00/maxNum*100)*dataVal/100;//总角度默认是230度到-50度，所以应该除以280，这个是偏角谁让他是从230度开始转的呢这是总仰角
console.log("offsetAngle = " + offsetAngle);
var totalAngle = 230- offsetAngle;//因为初始角度为230度，所以计算出的角度要-25这是,偏角
console.log("totalAngle = " + totalAngle);
var scaleNumber = offsetAngle/ Math.floor(360.00/maxSplit);//这里算出最内圈遮盖区的刻度数量
setTimeout(function () {initCharts(minNum,maxNum,minAngle,maxAngle,maxSplit,dataVal,offsetAngle,totalAngle,scaleNumber);}, 500);
})
function initCharts(minNum,maxNum,minAngle,maxAngle,maxSplit,dataVal,offsetAngle,totalAngle,scaleNumber) {
var myChart = echarts.init(document.getElementById('main'));
option = {
backgroundColor:'none' ,//rgba设置透明度0.1
tooltip : {
formatter: "{a} <br/>{c} {b}"
},
toolbox: {
show : false,
feature : {
mark : {show: false},
restore : {show: false},
saveAsImage : {show: false}
},
},
calculable:false,
//animation:false,
series : [
{
name:'内圈底色区',
type:'gauge',
min:minNum,
max:maxNum,
splitNumber:1,
radius: '45%',
startAngle:minAngle,
endAngle:maxAngle,
axisLine: { // 坐标轴线
lineStyle: {
width: 20,
// 透明度设置为0
opacity: 0
}
},
axisLabel: {
show:false
},
axisTick: { // 坐标轴小标记
length: 80,
splitNumber: 300,
lineStyle: {
width: 5,
// 给点颜色
color:
//"rgba(80,130,186, 0.4)"
{
image: document.getElementById('gradient60'),
repeat: 'no-repeat'
}
} // 属性length控制线长
},
splitLine: { // 分隔线
show:false // 属性length控制线长
},
detail : {
show:false
},
pointer: {
//这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
show: false,
},
},
{
name:'内圈遮盖区',
type:'gauge',
min:0,
max:maxNum,
splitNumber:1,
radius: '45%',
startAngle:minAngle,
endAngle:totalAngle,
axisLine: { // 坐标轴线
lineStyle: {
width: 20,
// 透明度设置为0
opacity: 0
}
},
axisLabel: {
show:false
},
axisTick: { // 坐标轴小标记
length: 80,
splitNumber: 300,
lineStyle: {
width: 5,
// 给点颜色
color:
// "rgba(80,130,186, 0.9)"
{
image: document.getElementById('gradient90'),
repeat: 'no-repeat'
}
} // 属性length控制线长
},
splitLine: { // 分隔线
length :60, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width:3,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
//'rgba(48,109,227,0.5)',
shadowColor : 'rgba(48,109,227,0.5)', //默认透明
shadowBlur: 10
} // 属性length控制线长
},
detail : {
show:false
},
pointer: {
//这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
show:false,
//指针长度
//length:'90%',
//width:0,
},
},
{
name:'外圈',
type:'gauge',
min:0,
max:maxNum,
splitNumber:10,
radius: '50%',
startAngle:minAngle,
endAngle:maxAngle,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[1, 'rgba(40,104,231, 0.4)']],
width: 15,
shadowColor : 'rgba(80,130,186, 1)', //默认透明
shadowBlur:50
}
},
axisLabel: { // 坐标轴小标记
textStyle: { // 属性lineStyle控制线条样式
fontWeight: 'bolder',
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
length :20, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
splitLine: { // 分隔线
length :26, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width:3,
color: '#05E9F6',
shadowColor : 'rgba(5,233,246,1)', //默认透明
shadowBlur: 10
}
},
detail : {
show:false
},
pointer: { show: false },
// 指针样式
itemStyle: {},
title: { show: false },
detail: { show: false }
},
{
name: '最内圈底色区',
type: 'gauge',
splitNumber: 1,
radius: '20%',
startAngle:230,
endAngle:-129,
axisLine: {
lineStyle: {
width: 20,
// 透明度设置为0
opacity: 0
}
},
splitLine: {
show: false
},
axisLabel: {
show:false
},
axisTick: {
length: 10,
splitNumber: maxSplit,
lineStyle: {
width: 3,
// 给点颜色
color:"#555"
}
},
axisLabel: { show: false },
pointer: { show: false },
// 指针样式
itemStyle: {},
title: { show: false },
detail: { show: false }
},
{
name: '最内圈遮盖区',
type: 'gauge',
splitNumber: 1,
radius: '20%',
startAngle:minAngle,
endAngle:totalAngle,
axisLine: {
lineStyle: {
width: 20,
// 透明度设置为0
opacity: 0
}
},
splitLine: {
show: false
},
axisLabel: {
show:false
},
axisTick: {
length: 10,
splitNumber: scaleNumber,
lineStyle: {
width: 3,
// 给点颜色
color:
//"rgba(39,103,231,1)"
{
image: document.getElementById('linearPic'),
repeat: 'no-repeat'
}
}
},
pointer: {
//指针长度
show:false,
},
title: {
fontSize: 15,
offsetCenter: [0, '-35%'],
color: '#999'
},
detail: {
color: '#36444b',
fontSize: 15,
offsetCenter: [0, '20%'],
formatter: function (val) {
return val.toFixed(2) + '\n{unit|Mbps}'
},
rich: {
unit: {
fontSize: 10,
color: '#999',
lineHeight: 30
}
}
},
data: [{
value: dataVal,
name: "完成率"
}]
}
]
};
myChart.setOption(option);
}
</script>
</body>好，写完了，告辞
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
