一、引入echarts插件:canvas
import * as echarts from '../../ec-canvas/echarts';小程序
二、data中定義:
ecBar: {
onInit: initChart
},
三、app.js中定義全局變量:
globalData: {
userInfo: null,
all_date: []
},
四、onload中,定義一個 all_date ,用來接收數據
五、循環出來的數據,賦值:app.globalData.all_date = all_date
六、在 value 中賦值:
function initChart(canvas, width, height) { const chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); var option = { backgroundColor: "#ffffff", color: ["#37A2DA", "#FF9F7F"], tooltip: {}, xAxis: { show: false }, yAxis: { show: false }, radar: { indicator: [{ name: '10米折返跑', max: 5 }, { name: '立定跳遠', max: 5 }, { name: '網球擲遠', max: 5 }, { name: '走平衡木', max: 5 }, { name: '坐位體前屈', max: 5 }, { name: '雙腳連續跳', max: 5 } ] }, series: [{ name: '', type: 'radar', itemStyle: { normal: { areaStyle: { type: 'default' } } }, data: [{ value: app.globalData.all_date, name: '' }] }] }; chart.setOption(option); return chart; }
七、在 wxml 調用:<ec-canvas id="mychart" canvas-id="mychart-line" ec="{{ ecBar }}"></ec-canvas>app
整體來講,設置單頁的全局變量,不能改變小程序圖表的二次渲染,要設置成app.js的全局變量才行echarts