<div id="main" style="width: 400px;height: 300px;"></div>
<script>
var myChart = echarts.init(document.getElementById("main"));
option = {
//提示框组件。开发实际中去掉了指针,提示框可以不用设置。
tooltip: {
formatter: "{a} <br/>{b} : {c}%"
},
//工具栏。本次好像也没用到,刷新,下载,我觉得还是挺实用的,具体开需求!
toolbox: {
feature: {
restore: {},
saveAsImage: {}
}
},
//下面属性才是仪表盘的核心!!反正我是这么认为的!!!
series: [{
//类型
type: 'gauge',
//半径
radius: 150,
//起始角度。圆心 正右手侧为0度,正上方为90度,正左手侧为180度。
startAngle: 180,
//结束角度。
endAngle: 0,
center: ['50%', '90%'],
//仪表盘轴线相关配置。
axisLine: {
show:true,
// 属性lineStyle控制线条样式
lineStyle: {
width: 60,
color:[[1, '#63869e']]
}
},
//分隔线样式。
splitLine: {
show: false,
},
//刻度样式。
axisTick: {
show: false,
},
//刻度标签。
axisLabel: {
show:false,
},
//仪表盘指针。
pointer: {
//这个show属性好像有问题,因为在这次开发中,需要去掉指正,我设置false的时候,还是显示指针,估计是BUG吧,我用的echarts-3.2.3;希望改进。最终,我把width属性设置为0,成功搞定!
show: false,
//指针长度
length:'90%',
width:0,
},
//仪表盘标题。
title: {
show: true,
offsetCenter: [0, '-40%'], // x, y,单位px
textStyle: {
color: '#hhh',
fontSize: 30
}
},
//仪表盘详情,用于显示数据。
detail: {
show: true,
offsetCenter: [0, '-10%'],
formatter: '{value}%',
textStyle: {
fontSize: 30
}
},
data: [{
value: 0,
name: '存储量'
}]
}]
};
myChart.setOption(option);
//设置定时,加载随机数据,可以直观显示
timeTicket = setInterval(function() {
var random=(Math.random() * 100).toFixed(2);
var color=[[random/100, '#63869e'], [1, '#c23531']];
option.series[0].axisLine.lineStyle.color=color;
option.series[0].data[0].value =random ;
myChart.setOption(option, true);
}, 200)
</script>
仪表盘各个属性的意思
最新推荐文章于 2023-08-31 17:06:43 发布