微信小程序中可以使用 echarts-for-weixin 库来实现 echarts 图表的渲染。对于折柱混合图横向渲染的需求，可以在 echarts 的 option 中设置 xAxis 和 yAxis 的 type 为 'value'，同时设置 grid 中的 containLabel 为 true，让图表可以占满整个 canvas 区域。
具体的实现步骤如下：
1. 安装 echarts-for-weixin 库
```bash
npm install echarts-for-weixin --save
```
2. 在页面的 JSON 配置中添加 canvas 组件
```json
{
"usingComponents": {
"ec-canvas": "echarts-for-weixin/ec-canvas"
}
}
```
3. 在页面的 WXML 中添加 canvas 组件
```html
<view class="chart-container">
<ec-canvas id="mychart" canvas-id="mychart-canvas" ec="{{ ec }}" />
</view>
```
4. 在页面的 JS 中引入 echarts 库和 echarts-for-weixin 库
```javascript
import * as echarts from 'echarts';
import * as echartsForWeixin from 'echarts-for-weixin';
```
5. 在页面的 JS 中设置 option，并将其传递给 echarts-for-weixin
```javascript
Page({
data: {
ec: {
onInit: initChart
}
}
});
function initChart(canvas, width, height) {
const chart = echartsForWeixin.init(canvas, null, {
width,
height
});
const option = {
xAxis: {
type: 'value',
position: 'top'
},
yAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
grid: {
containLabel: true
},
series: [
{
name: 'bar',
type: 'bar',
stack: '总量',
label: {
show: true
},
data: [320, 302, 301, 334, 390, 330, 320]
},
{
name: 'line',
type: 'line',
stack: '总量',
label: {
show: true,
position: 'right'
},
data: [220, 182, 191, 234, 290, 330, 310]
}
]
};
chart.setOption(option);
return chart;
}
```
在这个例子中，我们将 xAxis 的 type 设置为 'value'，并将 yAxis 的 type 设置为 'category'。同时，我们将 xAxis 的 position 设置为 'top'，让它位于图表上方。为了让图表能够横向渲染，我们将 grid 中的 containLabel 设置为 true，这样就可以让图表占满整个 canvas 区域了。
扫一扫
2293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
