下載echarts
git clone https://github.com/ecomfe/echarts-for-weixin.git
將下載好的ec-canvas放到微信工程里面，和pages同級別
1718186109604.png
在組件里使用
index.json 文件
{
"component": true,
"usingComponents": {
"ec-canvas": "../../../../../ec-canvas/ec-canvas"
}
}
index.wxml文件
<ec-canvas class="mychart" id="mychart-bar1" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
index.wxss文件
.mychart{
height:150px;
width:200px
index.js文件
import * as echarts from '@/ec-canvas/echarts';
ready: function () { // 此處attached的聲明會被lifetimes字段中的聲明覆蓋
this.selectComponent('#mychart-bar1').init((canvas, width, height,dpr) => {
console.log('=======',canvas,width,height,dpr)
let chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chart);
let option= {
title: {
show:false
},
legend: {
show:false
},
tooltip: {
show: false,
trigger: 'axis'
},
xAxis: {
show: false
},
yAxis: {
show: false
},
series: [{
type: 'bar',
data: this.data.totalArr // 請求來的數據
}]
};
chart.setOption(option);
});
},
效果
1718186294416.png
