1. 程式人生 > >微信小程式中使用ECharts實現報表圖表展示

微信小程式中使用ECharts實現報表圖表展示

getData() { wx.showLoading({ title: '載入中...', }); let that = this; util.request(傳送ajax請求).then(function (res) { if (res.errno === 0) {//第一個 barGraph.setOption({ color: ['#37a2da', '#32c5e9', '#67e0e3'], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow'
} }, grid: { left: 20, right: 20, bottom: 15, top: 40, containLabel: true }, xAxis: [ { type: 'value', axisLine: { lineStyle: { color: '#999'
} }, axisLabel: { color: '#666' } } ], yAxis: [ { type: 'category', axisTick: { show: false }, data: ['縱座標資料',...], axisLine: { lineStyle: { color: '#999'
} }, axisLabel: { color: '#666' } } ],            series: [ { name: '肉豬', type: 'bar', stack: '總量', label: { normal: { show: true } }, data: [res.data.value,...],//後臺資料 itemStyle: {
} } ] });

//第二個

pieChart.setOption({ backgroundColor: "#ffffff", color: ["#37A2DA", "#32C5E9", "#67E0E3", "#91F2DE", "#007500"], series: [{ label: { normal: { fontSize: 14 } }, type: 'pie', center: ['50%', '50%'], radius: [0, '40%'], data: [{ value: res.data.sowCount,//資料 name: '餅圖模組名稱' },{...} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 2, 2, 0.3)' } } }] }); } wx.hideLoading(); }); }