極坐標圖
HTML:
<div id="eChart"></div>
css:
#eChart{
width:500px;
height:500px;
}
js:
/*渲染echart表格 */
function echart(redData, blueData, yellowData, clockwise, echartId) {
var myChart = echarts.init(document.getElementById(echartId));
var option = {
title: {
text: ''
},
polar: {
center: ['50%', '50%']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
angleAxis: {//極坐標系的角度軸
type: 'value',
startAngle: 90,
splitNumber: 30, //坐標軸分割段數
clockwise: clockwise, //是否逆時針
axisLine: { //坐標軸軸線設置
lineStyle: {
color: '#ccc',
}
},
axisTick: { //坐標軸刻度設置
show: false
},
splitLine: { //分割線設置
show: false,
},
axisLabel: { //刻度標簽設置
textStyle: {
color: '#333'
}
}
},
radiusAxis: {//極坐標系的徑向軸。
min: 0,
axisLine: { //坐標軸軸線設置
show: false,
// lineStyle: {
// color: "#ccc"
// }
},
axisTick: { //坐標軸刻度設置
show: false
},
axisLabel: { //刻度標簽設置
margin: 0, //刻度與坐標軸之間的距離
textStyle: {
color: '#333'
}
}
},
series: [{
coordinateSystem: 'polar',
name: 'line',
type: 'line',
showSymbol: false,
smooth: true,
data: redData, //紅線數據參數
lineStyle: {
normal: {
color: '#f00'
}
}
}, {
coordinateSystem: 'polar',
name: 'line',
type: 'line',
showSymbol: false,
smooth: true,
data: blueData, //藍線數據參數
lineStyle: {
normal: {
color: '#0000ff'
}
}
}, {
coordinateSystem: 'polar',
name: 'line',
type: 'line',
showSymbol: false,
smooth: true,
data: yellowData, //黃線數據參數
lineStyle: {
normal: {
color: 'goldenrod'
}
}
}],
animationDuration: 2000
};
myChart.clear(); //清空數據緩存
myChart.setOption(option);
}//結束