echarts histogram display interval data

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="margin: 30px; padding: 10px; border: 1px solid #ddd; width: 800px;height:400px;"></div>

  <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script> -->
  <!-- <script src="../lib/echarts.min.js"></script> -->
  <!-- <script src="../lib/lodash.4.17.5.js"></script> -->
  <script src="https://cdn.staticfile.org/echarts/5.4.1/echarts.min.js"></script>
  <script src="https://cdn.staticfile.org/lodash.js/4.17.21/lodash.min.js"></script>

  <script type="text/javascript">
   // 借鉴
    // 1. https://echarts.apache.org/examples/zh/editor.html?c=bar-waterfall
    // 2. https://echarts.apache.org/examples/zh/editor.html?c=bar-waterfall2

    var isReverse = false;
    var showLabel = true;

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var option = setOption();
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    function isReverseFn () {
      isReverse = !isReverse;
      option = setOption();
      myChart.setOption(option);
    }

    function setOption() {
      let option;

      const category = ["北京", "上海", "南京", "天津", "杭州", "苏州"];
      const name = ['苹果收获了', '橙子收获了'];
      const data = [
        [
          [0, 2900],
          [1700, 2900],
          [1400, 1700],
          [1200, 1400],
          [300, 900],
          [0, 300]
        ],
        [
          [3500, 3800],
          [3800, 4200],
          [2430, 3800],
          [2200, 2900],
          [1300, 1400],
          [800, 3000]
        ]
      ]
	  let first = data[0];
	  let second = data[1];
	  first.forEach((item, i) => {
		item.push('red')
	  })
	  second.forEach((item, i) => {
		item.push('blue')
	  })
      
      let series = [];
      data.forEach((item, i) => {
        series = [...series, ...createSeries(item, name[i], showLabel, isReverse)]
      })

      let yAxis = {
        type: 'value'
      }

      let xAxis = {
        type: 'category',
        splitLine: {
          show: false
        },
        data: category
      }

      if (isReverse) {
        [xAxis, yAxis] = [yAxis, xAxis];
      }

      option = {
        title: {
          text: '城市水果收获',
          // subtext: 'From ExcelHome',
          // sublink: 'http://e.weibo.com/1341556070/AjQH99che'
        },
        color: ['lawngreen', 'orange'],
        legend: {
          data: name
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            var html = '';
            var axisValue = '';
            params.forEach(item => {
              axisValue = item.axisValue;
              const range = item.data.range;
              html += item.marker + item.name + range[0] + ' - ' + range[1] + '<br/>';
            })
            const {name, data: {range}} = params[0];
            return axisValue + '<br/>' + html;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: xAxis,
        yAxis: yAxis,
        series: series
      };

      return option;
    }

    // 轴数据处理
    function dataFormat (data, name, isReverse) {
      let min = []; // 区间的最小值
      let max = []; // 区间的最大值
      let minLabel = []; // 显示区间的最小值的 label 数据，在 max 上通过 markpoint 实现，以控制 label 颜色值和显示的柱子颜色值一致，并且显示隐藏有效

      data.forEach((item, i) => {
        min.push(item[0])

        // 横向：coord: [offsetx，y]，等同于 xAxis: offsetx, yAxis: y。其中，offsetx 表示偏移值，y 表示bar的索引。
        // 竖向：[x, offsety]
        const coord = isReverse ? [item[0], i] : [i, item[0]];
        minLabel.push({
          value: item[0], // 对值进行格式化
          coord: item[0] ? coord : []
        })

        max.push({
          value: item[1] - item[0], // 差值作为叠加值
          range: item, // tooltip 显示
          name, // legend 显示
          label: {
            formatter: '' + item[1], // 最终值作为显示值
          },
          itemStyle: {
            color: item[2]
          }
        })
      })

      return {
        min,
        max,
        minLabel
      }
    }

    // 生成序列数据
    function createSeries (arr, name, showLabel, isReverse) {
      let newSeries = [];

      const {min, max, minLabel} = dataFormat(arr, name, isReverse);
      
      const maxPosition = isReverse ? 'right' : 'top';
      const minPosition = isReverse ? 'left' : 'bottom';

      newSeries = [
        {
          type: 'bar',
          stack: name,
          tooltip: {
            show: false
          },
          // 透明
          itemStyle: {
            barBorderColor: 'rgba(0,0,0,0)',
            color: 'rgba(0,0,0,0)'
          },
          emphasis: {
            itemStyle: {
              barBorderColor: 'rgba(0,0,0,0)',
              color: 'rgba(0,0,0,0)'
            }
          },
          label: {
            show: false,
          },
          data: min
        },
        {
          type: 'bar',
          stack: name,
          name: name,
          tooltip: {
            show: true,
          },
          label: {
            show: showLabel,
            position: maxPosition,
          },
          markPoint: {
            symbol: 'rect',
            // 图形上面的小头隐藏
            symbolSize: 0.000000000000001,
            label: {
              show: showLabel,
              position: minPosition,
            },
            data: minLabel
          },
          data: max,
        }
      ]

      return newSeries;
    }
  </script>
</body>

</html>
echarts histogram display interval data

Guess you like
