ECharts 微信小程序上的应用--柱形图与折线图叠加使用

在微信小程序上使用ECharts添加图表–柱形图与折线图叠加使用

1. 很好用的一个组件[传送门]
2. 现在列举一个示例进行解析

先在json中配置

"usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }

在wxml中

<ec-canvas id="mychart-receiveRecord-multi-bar" 
canvas-id="mychart-receiveRecord-bar" ec="{{ ecBar }}">
</ec-canvas>

在wxss中

#mychart-receiveRecord-multi-bar{
  width: 100%;
  height: 600px;
  display: block;
}

在js中

import * as echarts from "../../ec-canvas/echarts.min";
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 柱形图
    ecBar: {
      onInit: function (canvas, width, height, dpr) {
        const barChart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        canvas.setChart(barChart);
        barChart.setOption(getBarOption());

        return barChart;
      }
    },
  }
})

function getBarOption () {
  const data = dReceiveRecordList.sort(function (a, b) {
    return b.ReceiveCount - a.ReceiveCount;
  });
  // console.log(data)
  const dataLaboratoryNamelist = [];
  const dataReceiveCountlist = [];
  const dataSendCountlist = [];
  const datanotReceiveCount = [];
  const dataCurrentReceptionRatess = [];
  data.forEach(Element => {
    dataLaboratoryNamelist.push(Element.LaboratoryName);
    dataReceiveCountlist.push(Element.ReceiveCount);
    dataSendCountlist.push(Element.SendCount);
    datanotReceiveCount.push(Element.notReceiveCount);
    dataCurrentReceptionRatess.push(((Element.ReceiveCount / Element.TotalReceiveCount) * 100).toFixed(2));
  });
  //以上是将数据数组化便于后面调用
  return {
    color: ["#F7A35C", "#8085E9", "#F15C80"],
    tooltip: {
      trigger: "axis",
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {// 可选值及数据的分类
      data: ["接收量", "发送量", "滞留量", "总接收率"]
    },
    grid: {
      left: "2%",
      right: "2%",
      bottom: "5%",
      top: "5%",
      containLabel: true
    },
    xAxis: [{//bottom x轴
      type: "value",//数据类型 
      axisLine: {
        lineStyle: {
          color: "#999"
        }
      },
      axisLabel: {
        color: "#666"
      }
    }, {//top x轴
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#999"
        }
      },
      axisLabel: {
        color: "#666"
      }
    }],
    yAxis: [{//left y轴
      type: "category",
      axisTick: {
        show: false
      },
      data: dataLaboratoryNamelist,// y轴数据
      axisLine: {
        lineStyle: {
          color: "#999"
        }
      },
      axisLabel: {
        color: "#666"
      }
    }],
    series: [{
      name: "接收量",
      type: "bar",// 柱状形式
      data: dataReceiveCountlist// 数据  注：以数组形式
      //例子： ["50","20","30","40","60","70"]
    },
    {
      name: "发送量",
      type: "bar",
      data: dataSendCountlist
    },
    {
      name: "滞留量",
      type: "bar",
      data: datanotReceiveCount
    },
    {
      name: "总接收率",
      type: "line",//折线形式
      xAxisIndex: 1,// x轴下标，在这里是指top x轴
      data: dataCurrentReceptionRatess
    }
    ]
  };
}