数据可视化【highchart】——横向柱状图

基本案例
在这里插入图片描述
基于案例修改后效果图如下:
在这里插入图片描述

在这里插入图片描述
代码:

<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <style>
    .container {
      width: 600px;
      margin: 20px auto;
      padding: 20px;
      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
      border-radius: 12px;
      text-align: center;
    }
    h1 {
      border-bottom: 3px solid #000;
      padding-bottom: 12px;
    }
  </style>
  <body>
    <div class="container">
      <h1>应用使用时长</h1>
      <div id="highchart"></div>
    </div>
  </body>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/highcharts.js"></script>
  <script>
    let max = 21600;
    let min = 3600;
    let appxa = [
      "王者荣耀",
      "微信",
      "百度网盘",
      "VS code",
      "网易云",
      "QQ",
      "谷歌浏览器",
      "新浪微博微博",
      "微信开发者工具",
    ];
    let option = {
      chart: {
        type: "bar",
      },
      colors: ["#D84E13"],
      title: {
        text: null,
      },
      legend: {
        enabled: false,
      },
      credits: {
        enabled: false,
      },
      xAxis: {
        lineWidth: 0,
        gridLineWidth: 0,
      },
      yAxis: {
        min: 0,
        title: {
          text: null,
        },
        labels: {
          enabled: false,
        },
        lineWidth: 0,
        gridLineWidth: 0,
      },
      tooltip: {
        pointFormat:
          '<span style="color:#D84E13">\u25CF</span>{series.name} : {point.time}<br/>',
      },
      plotOptions: {
        series: {
          borderRadius: 6,
        },
        bar: {
          dataLabels: {
            enabled: true,
            align: "left",
            style: {
              fontWeight: "normal",
              textOutline: "none",
            },
            formatter: function () {
              return this.point.time;
            },
          },
        },
      },
      series: [
        {
          name: "使用时间",
          data: [],
        },
      ],
    };
    $(function () {
      let fomatDate = (sec) => {
        let h = Math.floor(sec / 3600);
        let m = Math.floor((sec % 3600) / 60);
        return `${h}小时${m}分钟`;
      };

      for (let i = 0; i < 9; i++) {
        let time = min + Math.round(Math.random() * (max - min));
        option.series[0].data[i] = {
          name: appxa[i],
          y: time,
          time: fomatDate(time),
          dataLabels: {
            inside: time > 7200 ? true : false,
            style: {
              color: time > 7200 ? "#fff" : "#000",
            },
          },
        };
      }
      // 排序
      option.series[0].data.sort((a, b) => {
        return b.y - a.y;
      });

      // 设置 x轴
      let formatName = [];
      for (let j = 0; j < appxa.length; j++) {
        formatName[j] = option.series[0].data[j].name;
      }
      option.xAxis.categories = formatName;

      $("#highchart").highcharts(option);
    });
  </script>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

岁月可贵

您的鼓励将是我前进的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值