1. 程式人生 > 其它 >echarts-雷達圖

echarts-雷達圖

效果圖:

<div style="width: 462px; height: 290px;id="propertyRightTop"></div>
 // 自適應字型大小變化
    WidthAdaptive(res) {
      var windth = window.innerWidth;
      let fontSize = windth / 1920;
      return fontSize * res;
    },
    drawLine() {
      // 基於準備好的dom,初始化echarts例項
      let myChart = this
.$echarts.init( document.getElementById("propertyRightTop") ); let option = { backgroundColor: "transparent", grid: { top: "20%", }, radar: { splitNumber: 4, // 雷達圖圈數設定 splitLine: { lineStyle: { color: [
"rgba(255,255,255,0.4)", "rgba(255,255,255,0.4)", "rgba(255,255,255,0.4)", "rgba(255,255,255,0.4)", "rgba(255,255,255,0.4)", "rgba(255,255,255,.4)", ], }, }, splitArea: { show:
false, }, axisLine: { lineStyle: { color: "rgba(255,255,255,0.1)", }, }, indicator: [ { name: "", max: 100, }, { name: "", max: 100, }, { name: "", max: 100, }, { name: "", max: 100, }, ], }, series: [ { type: "radar", data: [ { value: [88, 85, 65, 88], name: "預算分配(Allocated Budget)", }, ], itemStyle: { normal: { color: "#00C9A3", }, }, areaStyle: { normal: { opacity: 0.2, }, }, }, ], }; window.onresize = function () { myChart.resize(); }; myChart.setOption(option); },