我正在使用 Echarts 百度 - 仪表图表。结果,我得到了 30 分(满分 100 分)。我需要将其更改为 50 分中的 30 分。这是我的代码。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- Prepare a Dom with size (width and height) for ECharts -->
<div id="main" style="height:400px"></div>
<!-- ECharts import -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// configure for module loader
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// use
require(
[
'echarts',
'echarts/chart/gauge'
],
function (ec) {
// Initialize after dom ready
var myChart = ec.init(document.getElementById('main'));
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 'R';
case '50': return 'A';
case '90': return 'G';
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: 30, name: 'Your Score'}]
}
]
};
// Load data into the ECharts instance
myChart.setOption(option);
}
);
</script>
我是 JS 新手。我试图查看他们的文档,但大多数文档都是用中文编写的。请帮帮我。提前致谢。