小程序echarts-雷达图拐点空心圆

小程序ecahrts雷达图常见参数。

image.png

需自行下载ecahrts对应的小程序版本，详见参考资料。

1 html 动态传入数据可看

 <ec-canvas 
      id="mychart-dom-graph"
      canvas-id="mychart-graph"
      ec="{{ ec }}" 
       bind:init="echartInit"
       data-record="{{tempdata}}"
    ></ec-canvas>

2 js

function initChart(canvas, width, height, recordData) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr, // 图表渲染出的文字模糊可以选2
  });
  canvas.setChart(chart);

  console.log("传入的value", recordData);
  var option = {
    // 背景色
    backgroundColor: "#ffffff",
    // backgroundColor: "red",
    xAxis: {
      show: false,
    },
    yAxis: {
      show: false,
    },
    radar: {
      // shape: 'circle',
      // 区域几块
      splitNumber: 4,
      center:['50%','55%'],
      name: {
       //每个方向的文字配置：也就是，软件，业务，技能，素质，爱好这些字的配置
        show: true,
        formatter: null, 
        textStyle: {
          color: "#1A1A1A", 
          //  标注文字间距  左 上 右
          padding: [0,- 5, -5, -5]
        },
      },
     // 7根坐标轴线向外
     axisLine: {
        show: true, // 默认显示，属性show控制显示与否
        lineStyle: {
          // 属性lineStyle控制线条样式
          color: "#D6DFFD",
          width: 1,
          type: "solid",
        },
      },
  // 图表背景网格线的颜色
       splitLine: {
        lineStyle: {
          color: ["#6084F7", "#A8BCFB", "#A8BCFB", "#A8BCFB", "#A8BCFB"],
        },
      },
      // 背景网格颜色
      splitArea: {
        areaStyle: {
          color: ["#fff"],
        },
      },
      
      indicator: [
        {
          name: "a",
          max: 120,
        },
        {
          name: "b",
          max: 120,
        },
       //  ... 有几个维度就几个，例如两个tempdata就有两个值
      ],
      // 雷达图间隔背景色
      splitArea: {
        areaStyle: {
          color: ["#fff"],
        },
      },
    },
    series: [
      {
        type: "radar",
        symbol: "circle",
        data: [
          {
            value: recordData ? recordData : [0, 0, 0, 0, 0, 0, 0],
            // value: [100, 80, 60, 40, 70, 120, 80],
            itemStyle: {
              //拐点空心圆空心圆
              normal: {
                color: "#fff",
                borderColor: '#FFAE34',
                borderWidth: 1,
              },
            },
            // 背景色
            areaStyle: {
              color: "rgba(255, 161, 18, .7)",
            },
          },
        ],
      },
    ],
  };

  chart.setOption(option);
  return chart;
}

Page({
...
data: {
    ec: {
      // onInit: initChart,
    },
  tempdata:[] // 数据'
},
// 图表初始化注意html中的方法
echartInit(e) {
    console.log(e);
    let recordData = e.target.dataset.record;
    // console.log('触发')
    initChart(e.detail.canvas, e.detail.width, e.detail.height,2,recordData);
 },
onload() {
  // 模拟请求
  this.setData({
   tempdata:[]
  })
}
})

ps：参考资料：小程序中使用echarts雷达图 https://blog.csdn.net/qq_42650665/article/details/105713517
ps：图表渲染模糊解决
https://www.cnblogs.com/moonskies/p/15146977.html