ECharts 雷达图在类目值下面显示数值
生活随笔
收集整理的這篇文章主要介紹了
ECharts 雷达图在类目值下面显示数值
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
需要實現的效果：
?
官網里面的demo顯示數值，都是在拐點處：
【解決】
1、只顯示類目
?
<div id="mychart" style="width:300px;height:300px;margin:0 auto;"></div><script>var arr1 = [60,73,85,40,60];var arr2 = [23,90,23,32,67];var mychart = echarts.init(document.getElementById('mychart'));var option = {radar: [{indicator: [{text: '品牌', max: 100},{text: '內容', max: 100},{text: '可用性', max: 100},{text: '功能', max: 100},{text: '屏幕', max: 100}],center: ['50%','54%'],//調整雷達圖的位置radius: 80,//半徑，可放大放小雷達圖axisLine: {//坐標軸線相關設置show: true,lineStyle: {color: 'red'}},splitLine : {show : true,lineStyle : {width : 1,color : 'red' // 圖表背景網格線的顏色}},splitArea: {show: false,},name: {rich: {a: {color: 'red',lineHeight: 20},},formatter: (a)=>{return `{a|${a}}`}}},],series: [{type: 'radar',symbol: 'none',//去掉拐點的圈data: [{value: arr1,name: '某軟件',areaStyle: {normal: {color: 'blue'}},lineStyle: {color:"rgba(255,255,255,0)"},},{value: arr2,name:'jja',areaStyle: {normal: {color: 'red' // 圖表中各個圖區域的顏色}},lineStyle: {color:"rgba(255,255,255,0)" // 圖表中各個圖區域的邊框線顏色},}]},]};mychart.setOption(option);</script>實現效果：
2、實現最簡單的數值在類目下
?
<div id="mychart" style="width:300px;height:300px;margin:0 auto;"></div><script>var arr1 = [60,73,85,40,60];var arr2 = [23,90,23,32,67];var mychart = echarts.init(document.getElementById('mychart'));var option = {radar: [{indicator: [{text: '品牌', max: 100},{text: '內容', max: 100},{text: '可用性', max: 100},{text: '功能', max: 100},{text: '屏幕', max: 100}],center: ['50%','54%'],//調整雷達圖的位置radius: 80,//半徑，可放大放小雷達圖axisLine: {//坐標軸線相關設置show: true,lineStyle: {color: 'red'}},splitLine : {show : true,lineStyle : {width : 1,color : 'red' // 圖表背景網格線的顏色}},splitArea: {show: false,},name: {rich: {a: {color: 'red',lineHeight: 20},b: {color: '#fff',align: 'center',backgroundColor: '#666',padding: 2,borderRadius: 4}},formatter: (a,b)=>{return `{a|${a}}\n{b|999}`}}},],series: [{type: 'radar',symbol: 'none',//去掉拐點的圈data: [{value: arr1,name: '某軟件',areaStyle: {normal: {color: 'blue'}},lineStyle: {color:"rgba(255,255,255,0)"},},{value: arr2,name:'jja',areaStyle: {normal: {color: 'red' // 圖表中各個圖區域的顏色}},lineStyle: {color:"rgba(255,255,255,0)" // 圖表中各個圖區域的邊框線顏色},}]},]};mychart.setOption(option);</script>?
?
3、實現最終效果
?
<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title></title><script src="js/jquery.min.js"></script><script src="js/echarts.js"></script></head><body><div id="mychart" style="width:300px;height:300px;margin:0 auto;"></div><script>var arr1 = [60,73,85,40,60];var arr2 = [23,90,23,32,67];var mychart = echarts.init(document.getElementById('mychart'));var option = {radar: [{indicator: [{text: '品牌', max: 100},{text: '內容', max: 100},{text: '可用性', max: 100},{text: '功能', max: 100},{text: '屏幕', max: 100}],center: ['50%','54%'],//調整雷達圖的位置radius: 80,//半徑，可放大放小雷達圖axisLine: {//坐標軸線相關設置show: true,lineStyle: {color: 'red'}},splitLine : {show : true,lineStyle : {width : 1,color : 'red' // 圖表背景網格線的顏色}},splitArea: {show: false,},},],series: [{type: 'radar',symbol: 'none',//去掉拐點的圈data: [{value: arr1,name: '某軟件',areaStyle: {normal: {color: 'blue'}},lineStyle: {color:"rgba(255,255,255,0)"},},{value: arr2,name:'jja',areaStyle: {normal: {color: 'red' // 圖表中各個圖區域的顏色}},lineStyle: {color:"rgba(255,255,255,0)" // 圖表中各個圖區域的邊框線顏色},}]},]};mychart.setOption(option);var i = -1;mychart.setOption({radar: [{name: {rich: {a: {color: 'red',lineHeight: 20},b: {color: '#fff',align: 'center',backgroundColor: '#666',padding: 2,borderRadius: 4}},formatter: (a,b)=>{i++;return `{a|${a}}\n{b|${arr1[i]}}`}}}]})</script></body> </html>效果：
總結
以上是生活随笔為你收集整理的ECharts 雷达图在类目值下面显示数值的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 自定义input[type=file]的
- 下一篇： echarts tooltip在图表范围