目录
echarts-for-weixin: Apache ECharts 的微信小程序版本
使用
ec-canva要和pages在同一级。
app.json
"usingComponents": {
"ec-canvas": "../ec-canvas/ec-canvas"
}
app.wxml
<view class="container">
<ec-canvas id="echarts" canvas-id="echarts" ec="{{ec2}}" ></ec-canvas>
</view>
app.js
import * as echarts from '../../ec-canvas/echarts';
Page({
data: {
ec2: {onInit: initChart},
},
})
function initChart(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
canvas.setChart(chart);
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
chart.setOption(option);
return chart;
}
app.wxss
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
ec-canvas {
height: 400rpx;
width: 400rpx;
}
echart.js文件过大
大概有964kB
在微信开发者工具中不跟随滑动
force-use-old-canvas="true"
<ec-canvas
force-use-old-canvas="true"
id="echarts"
canvas-id="echarts"
ec="{{ec2}}"
></ec-canvas>