小程序引入echarts雷达图不显示问题?
在开发者工具上正常显示,但是发了体验版之后在手机上就不显示了,非要再刷新一次下程序它才显示出来。
import * as echarts from '../../../utils/ec-canvas/echarts';
var i = -1;
var arr = [90, 60, 80, 75, 70, 65];
function initChart(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chart);
var option = {
xAxis: {
show: false
},
yAxis: {
show: false
},
grid: {
top: "-80%"
},
radar: {
// shape: 'circle',
radius: "50%",
nameGap: 0,
indicator: [{
name: '理解',
max: 100
},
{
name: '分析',
max: 100
},
{
name: '创造',
max: 100
},
{
name: '品鉴',
max: 100
},
{
name: '认知',
max: 100
},
],
name: {
// textStyle: {
// fontSize: 1,
// },
// rich: {
// a: {
// color: '#405E7D',
// lineHeight: 20,
// fontSize: 10,
// marginBottom: -15
// },
// b: {
// color: '#405E7D',
// fontSize: 10
// },
// },
// formatter: (a, b) => {
// i++;
// return `{a|${a}}{b|${arr[i]}}`
// }
},
axisLine: {
lineStyle: {
color: '#CCCCCC'
}
},
splitLine: {
lineStyle: {
color: '#CCCCCC'
}
}
},
series: [{
label: {
normal: {
fontSize: 10,
rich: {}
}
},
symbolSize: 6,
// type: 'radar',
// color: '#8BB2D7',
// data: [{
// value: arr,
// }, ],
areaStyle: {
color: "#8BB2D7",
},
lineStyle: {
color: '#8BB2D7',
opacity: 0.5
},
}]
};
chart.setOption(option);
return chart;
}
Page({
data:{
ec: {
onInit: initChart
},
}
})
<view class="echarts"> <ec-canvas id="mychart-dom-graph" canvas-id="mychart-graph" ec="{{ ec }}"></ec-canvas> </view>
.echarts { width: 400rpx; height: 350rpx; position: absolute; top: -35rpx; right: 0rpx; display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-sizing: border-box; } ec-canvas { width: 100%; height: 100%; }