echarts-bar+line - Githubissues

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="container" style="min-height: 420px; margin: 30px auto"></div>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"
    ></script>
    <script type="text/javascript">
      /**
       * 修改参数
       * **/
      function buildCharts(all, issues, temperature, lines) {
        var dom = document.getElementById('container'); // dom id
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
          title: {
            text: '考勤图表',
            left: 'center',
            align: 'right'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            },
            formatter: function (params) {
              var relVal = params[0].name;
              for (var i = 0, len = params.length; i < len; i++) {
                relVal +=
                  '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                  params[i].color +
                  '"></span>';
                if (params[i].seriesName === '考勤率') {
                  relVal +=
                    params[i].seriesName + ' : ' + params[i].value * 100 + '%';
                } else {
                  relVal += params[i].seriesName + ' : ' + params[i].value;
                }
              }
              return relVal;
            }
          },
          legend: {
            right: 20,
            data: ['打卡人数', '考勤异常人数', '体温异常人数', '考勤率']
          },
          xAxis: [
            {
              type: 'category',
              data: [
                '早上入校',
                '中午离校',
                '中午入校',
                '下午离校',
                '晚上入校',
                '晚上离校'
              ],
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '人数',
              min: 0,
              max: 3000,
              interval: 300,
              axisLabel: {
                formatter: '{value} 人'
              }
            },
            {
              type: 'value',
              name: '考勤率',
              axisLabel: {
                formatter: function (value, index) {
                  var per_value = value * 100 + '%';
                  return per_value;
                }
              }
            }
          ],
          series: [
            {
              name: '打卡人数',
              type: 'bar',
              itemStyle: {
                color: 'rgb(237,127,140)'
              },
              data: all
            },
            {
              name: '考勤异常人数',
              type: 'bar',
              itemStyle: {
                color: 'rgb(250,206,145)'
              },
              data: issues
            },
            {
              name: '体温异常人数',
              type: 'bar',
              itemStyle: {
                color: 'rgb(255,255,128)'
              },
              data: temperature
            },
            {
              name: '考勤率',
              type: 'line',
              yAxisIndex: 1,
              data: lines
            }
          ]
        };
        if (option && typeof option === 'object') {
          myChart.setOption(option, true);
        }
      }
      window.onload = function () {
        const all = [2000, 490, 700, 232, 256, 767];
        const issues = [135, 162, 32, 20, 64, 33];
        const temperature = [26, 59, 90, 26, 28, 70];
        const lines = [];
        for (var i = 0; i < all.length; i++) {
          const line = (issues[i] / (all[i] + issues[i])).toFixed(2);
          lines.push(line);
        }
        buildCharts(all, issues, temperature, lines);
      };
    </script>
  </body>
</html>
wolichuang / dailyInterview

echarts-bar+line #32
