微信小程序横向渲染echarts折柱混合图

微信小程序中可以使用 echarts-for-weixin 库来实现 echarts 图表的渲染。对于折柱混合图横向渲染的需求，可以在 echarts 的 option 中设置 xAxis 和 yAxis 的 type 为 'value'，同时设置 grid 中的 containLabel 为 true，让图表可以占满整个 canvas 区域。

具体的实现步骤如下：

1. 安装 echarts-for-weixin 库

npm install echarts-for-weixin --save

2. 在页面的 JSON 配置中添加 canvas 组件

{
  "usingComponents": {
    "ec-canvas": "echarts-for-weixin/ec-canvas"
  }
}

3. 在页面的 WXML 中添加 canvas 组件

<view class="chart-container">
  <ec-canvas id="mychart" canvas-id="mychart-canvas" ec="{{ ec }}" />
</view>

4. 在页面的 JS 中引入 echarts 库和 echarts-for-weixin 库

import * as echarts from 'echarts';
import * as echartsForWeixin from 'echarts-for-weixin';

5. 在页面的 JS 中设置 option，并将其传递给 echarts-for-weixin

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 区域了。