<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.dg-dashboard{
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
.dg-chart{
display: inline-block;
width: 300px;
height: 300px;
}
</style>
<script type="text/javascript">
var options = {
series: [{
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 240,
splitNumber: 8,
pointer: {
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
length: '75%',
width: 10,
offsetCenter: [0, '5%']
},
axisTick: {
splitNumber: 2,
lineStyle: {
width: 2,
color: '#999'
}
},
title: {
show: true
},
detail: {
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: 2,
width: '60%',
lineHeight: 40,
height: 60,
borderRadius: 8,
offsetCenter: [0, '35%'],
valueAnimation: true
},
data: [{
value: 50,
name: 'SCORE'
}]
}]
}
//初始化ECharts
//自定义图表渲染器
var myChartRenderer=
{
render: function(chart)
{
chart.echartsInit(options);
},
update: function(chart, results)
{
options.series[0].data[0].value=100;
options.series[0].data[0].name='名称';
chart.echartsInit(options,true);
}
};
</script>
</head>
<body class="dg-dashboard">
<div class="dg-chart" dg-chart-renderer="myChartRenderer" dg-chart-widget="945fb531517747f3cfdc"></div>
</body>
</html>
3129
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
