小程序ecahrts雷达图常见参数。
需自行下载ecahrts对应的小程序版本,详见参考资料。
1 html 动态传入数据可看
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