als slab axis etop 分享 sys style golden trigge

極坐標圖

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); }//結束

eCharts圖表（polar極坐標圖）