Echart案例

https://developer.huawei.com/consumer/cn/service/hms/catalog/huaweipush_agent.html?page=hmssdk_huaweipush_devguide_server_agent#1%20%E5%8A%9F%E8%83%BD%E8%AF%B4%E6%98%

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>每分钟薪水对比图</title>
  <style>
    body {
      margin: 0;
      background: #ffffff; /* 白色背景 */
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    }
    #main {
      width: 100%;
      height: 650px;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
  <div id="main"></div>

  <script>
    // 你的数据（中文名 + 分钟 + 薪水 + 每分钟薪水）
    const players = [
      "杰伦·萨格斯",
      "勒布朗·詹姆斯",
      "朱·霍勒迪",
      "扬尼斯·阿德托昆博",
      "保罗·乔治",
      "贾·莫兰特",
      "乔尔·恩比德",
      "克里斯塔普斯·波尔津吉斯",
      "安东尼·戴维斯",
      "多曼塔斯·萨博尼斯"
    ];

    const minutes = [635, 935, 544, 876, 755, 569, 764, 413, 626, 479];
    const salaries = [
      35000000.0,
      52627153.0,
      32400000.0,
      54126450.0,
      51666090.0,
      39446090.0,
      55224526.0,
      30731707.0,
      54126450.0,
      42336000.0
    ];
    const salaryPerMin = [
      55118.11023622047,
      56285.72513368984,
      59558.82352941176,
      61788.18493150685,
      68431.90728476821,
      69325.28998242531,
      72283.4109947644,
      74410.91283292978,
      86463.97763578275,
      88384.13361169102
    ];

    const chartDom = document.getElementById('main');
    const myChart = echarts.init(chartDom);

    const option = {
      backgroundColor: '#ffffff',
      title: {
        text: '每分钟薪水对比（高薪低能观察）',
        left: 'center',
        top: 10,
        textStyle: {
          color: '#333333',
          fontSize: 20,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' },
        formatter: function (params) {
          const p = params[0];
          const idx = p.dataIndex;
          return `
            <div style="font-size:13px;">
              <strong>${players[idx]}</strong><br/>
              上场时间：${minutes[idx]} 分钟<br/>
              薪水：$${salaries[idx].toLocaleString()}<br/>
              每分钟薪水：$${salaryPerMin[idx].toFixed(2)}
            </div>
          `;
        }
      },
      grid: {
        left: '10%',
        right: '6%',
        bottom: '5%',
        top: 80,
        containLabel: true
      },
      xAxis: {
        type: 'value',
        name: '每分钟薪水（美元）',
        nameTextStyle: {
          color: '#444',
          fontSize: 12
        },
        axisLabel: {
          color: '#444',
          formatter: value => '$' + (value / 1000).toFixed(0) + 'k'
        },
        splitLine: {
          lineStyle: { color: '#ddd' }
        }
      },
      yAxis: {
        type: 'category',
        data: players,
        axisLabel: {
          color: '#222',
          fontSize: 14,
          fontWeight: 'bold'
        },
        axisLine: {
          lineStyle: { color: '#aaa' }
        }
      },
      series: [
        {
          name: '每分钟薪水',
          type: 'bar',
          data: salaryPerMin,
          barWidth: 24,
          itemStyle: {
            borderRadius: 4,
            color: function (params) {
              const colors = ['#ff6b6b', '#4dabf7', '#ffa94d', '#845ef7', '#20c997',
                              '#ff922b', '#339af0', '#e64980', '#51cf66', '#748ffc'];
              return colors[params.dataIndex % colors.length];
            }
          },
          label: {
            show: true,
            position: 'right',
            formatter: p => '$' + p.value.toFixed(0),
            color: '#000',
            fontSize: 12,
            fontWeight: 'bold'
          }
        }
      ]
    };

    myChart.setOption(option);
    window.addEventListener('resize', () => myChart.resize());
  </script>
</body>
</html>

 

posted @ 2018-10-29 15:42  taylor.yan  阅读(508)  评论(0)    收藏  举报