1、微信小程式使用echarts,首先下載echarts並導入小程式項目中,因小程式後期上線對文件大小有要求,所以建議進行定製下載導入可減少文件大小占比,也可以下載以前舊版本文件比較小的應付使用 下載echarts: https://echarts.apache.org/zh/download.ht ...
1、微信小程式使用echarts,首先下載echarts並導入小程式項目中,因小程式後期上線對文件大小有要求,所以建議進行定製下載導入可減少文件大小占比,也可以下載以前舊版本文件比較小的應付使用
下載echarts: https://echarts.apache.org/zh/download.html
定製下載:https://echarts.apache.org/zh/builder.html
舊版本查看: https://archive.apache.org/dist/echarts/
下載好後,在使用頁面的json文件中配置
1 { 2 "component": true, 3 "usingComponents": { 4 "ec-canvas": "../../../ec-canvas/ec-canvas" 5 } 6 }
在需要使用的wxml和wxss中寫好容器的樣式代碼
1 <view class="echarts1" > 2 <view wx:if="{{canvasIsShow}}" class="container" style="width: 100%; height: 100%;"> 3 <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas> 4 </view> 5 </view>
最後在js文件中引用並編寫圖例代碼及數據即可
1 import * as echarts from '../../../ec-canvas/echarts' 2 3 function initChart(canvas, width, height, dpr) { 4 const chart = echarts.init(canvas, null, { 5 width: width, 6 height: height, 7 devicePixelRatio: dpr // 像素 8 }); 9 canvas.setChart(chart); 10 11 var option = { 12 barWidth: 20, 13 grid:{ 14 x:40, //圖例左邊距 15 y:30, //圖例上邊距 16 x2:25, //圖例右邊距 17 y2:20, //圖例下邊距 18 }, 19 xAxis: { 20 type: 'category', 21 data: ['1','2','3','5','6','7','8'], //x軸數據 22 axisLabel: { 23 interval: 0, 24 textStyle: { 25 show:true, 26 fontSize: '9', 27 }, 28 }, 29 }, 30 yAxis: { 31 type: 'value', 32 axisLabel: { 33 textStyle: { 34 show:true, 35 fontSize: '10', 36 }, 37 }, 38 }, 39 series: [ 40 //柱形圖 41 { 42 data: [10,20,30,40,50,60,70], 43 type: 'bar', 44 color: 'rgb(0, 153, 255)', 45 }, 46 //線型圖 47 { 48 data: [15,25,35,45,55,65,75], 49 type: 'line', 50 color: 'rgb(255, 136, 0)', 51 itemStyle: { 52 normal: { 53 label: { 54 show: true, //開啟顯示 55 position: 'top', //在上方顯示 56 textStyle: { //數值樣式 57 color: 'black', 58 fontSize: '9' 59 } 60 } 61 } 62 }, 63 } 64 ] 65 }; 66 chart.setOption(option); 67 return chart; 68 } 69 70 Page({ 71 data: { 72 ec: { 73 onInit: initChart 74 }, 75 canvasIsShow: true, //圖表是否渲染 76 }, 77 })
2、圖例重新渲染方法
使用後,如果需要讓圖例隨數據變化而變化或者重新渲染,可直接使用
wx:if="{{ }}" 來進行條件渲染,即可做到重新刷新 3、圖例圖層太高,可能會導致部分樣式被遮擋,如下圖情況:
給被遮擋標簽加入position: fixed;z-index: 9999後,在模擬器中顯示正常,但在真機上這個問題依舊存在,把被遮擋的<view>改為<cover-view>就可以解決問題,如下圖
但是在<cover-view>標簽里,無法使用<input>或者<picker>等標簽,那可以投機取巧靈活使用
1 <picker bindchange="bindCasPickerChange" value="{{casIndex1}}" range="{{casArray}}"> 2 <cover-view class="epidemic-header"> 3 <cover-view class="cover-input"> 4 {{casArray[casIndex]}} 5 </cover-view> 6 </cover-view> 7 </picker>
這樣就可以修改<cover-view>里的顯示內容啦