新人求助,完全参考官网EXAMPLE的gauge3怎么指针的颜色不是白色
echarts吧
全部回复
仅看楼主
level 1
参照的这个示例http://echarts.baidu.com/echarts2/doc/example/gauge3.html
第一个图是我参照的,第二个图是官网示例的
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ECharts · Example</title>
<script src="js/echarts.min.js" type="text/javascript"></script>
<script src="js/macarons.js" type="text/javascript"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main">
</div>
<script type="text/javascript">
//echart图初始化
var container = document.getElementById('main');
//自适应窗口大小
container.style.width = window.innerWidth * 0.95 + 'px';
container.style.height = window.innerHeight * 0.91 + 'px';
var timeTicket;
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'), 'macarons');
var option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name:'业务指标',
type:'gauge',
startAngle: 180,
endAngle: 0,
center : ['50%', '90%'], // 默认全局居中
radius : 320,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 200
}
},
axisTick: { // 坐标轴小标记
splitNumber: 10, // 每份split细分多少段
length :12, // 属性length控制线长
},
axisLabel: { // 坐标轴文本标签,详见axis.axisLabel
formatter: function(v){
switch (v+''){
case '10': return '低';
case '50': return '中';
case '90': return '高';
default: return '';
}
},
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#fff',
fontSize: 15,
fontWeight: 'bolder'
}
},
pointer: {
width:50,
length: '90%',
color: 'rgba(255, 255, 255, 0.8)'
},
title : {
show : true,
offsetCenter: [0, '-60%'], // x, y,单位px
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#fff',
fontSize: 30
}
},
detail : {
show : true,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: '#ccc',
width: 100,
height: 40,
offsetCenter: [0, -40], // x, y,单位px
formatter:'{value}%',
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
fontSize : 50
}
},
data:[{value: 50, name: '完成率'}]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
clearInterval(timeTicket);
timeTicket = setInterval(function () {
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
myChart.setOption(option, true);
}, 2000);
</script>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
</body>
</html>
2018年09月14日 07点09分 1
1