【微信小程序】echarts 正态分布图 区间柱形图

功能需求：x轴设置成某一段区间

解决思路：一般正常设置，只能一个刻度对应一个值。而现在需要使用两个x轴来实现。

效果展示：

代码：

let xAxis= ['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100'];//百分比区间
let yAxis = [5,10,50,30,60,40,50,52,10,30];
 var option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      },
      backgroundColor: 'rgba(97, 127, 251, 0.8)',
      padding: [5, 20, 5, 10],//上 右 下 左
      confine: true,//将 tooltip 限制在该容器
      formatter: function (params) {

        let index = params[0].dataIndex;
        let htmlStr = '';
        let like = xAxis[index];
        let take = yAxis[index];
        if (!take) {
          take = 0;
        }
        htmlStr += 'x轴：' + take + '\n' + 'y轴：' + like+"-"+ (parseInt(like) + 10);
        if (cb != null) cb(index);
        if (cb != null) cb(index);
        return htmlStr;
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      height: '80%',
      containLabel: true,
    },
    xAxis: [
      //因为一般正常设置，只能一个刻度对应一个值。若需要在范围区间显示一个值，就需要使用两个x轴来解决
      {
        data: yAxis, 
        show: false
      },
      {
        data: xAxis,
        axisLabel: {
          interval: 0,
          show: true,
        },
        position: 'bottom',
        boundaryGap: false,
        axisPointer: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            type: 'solid',
            color: '#D2D2D2',//左边线的颜色
          }
        },
      },
    ],
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#98B1FF',//左边线的颜色
        }
      },
      splitLine: { show: false },//去除网格线

    },
    series: [{
      type: 'bar',
      data: yAxis,
      itemStyle: {
        normal: {
          color: '#98B1FF',
        }
      },
      barCategoryGap: '0%'
    }],
  }

全部代码下班后加上~ 2021.4.19
参考：
https://www.cnblogs.com/zion0707/p/13844620.html