微信使用e-char圖表採坑
阿新 • • 發佈:2020-07-08
話不多說html:請注意這個屬性“
force-use-old-canvas="true"”真機除錯使用,釋出線上版本一定要刪除,你也可以在除錯的時候把他刪掉,刪一次就知道是幹什麼的了,實踐出真知
<view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas> </view>
css
.container{ position: absolute; left:0; top: 0; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; } ec-canvas{ height: 500rpx; width: 100%; }
josn
{ "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" } }
js:這個ec-covers檔案包可以去e-char官網下載:https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts
import * as echarts from '../../ec-canvas/echarts' function initChart(canvas, width, height) { const chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); var option = { title: { subtext: '違章趨勢' }, tooltip: { trigger:'axis' }, xAxis: { type: 'category', boundaryGap: false, data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日'] }, yAxis: { type: 'value', axisLabel: { formatter: '{value} °C' } }, series: [ { name: '最高氣溫', type: 'line', data: [11, 11, 15, 13, 12, 13, 10] } ] }; chart.setOption(option); return chart; } Page({ data: { ec: { onInit: initChart } } });