数据可视化【highchart】—— 环形图

你听雪飘过的声音

已于 2022-07-10 13:16:47 修改

阅读量1.4k

点赞数 3

分类专栏：实习数据可视化-highchart 文章标签：前端 highchart 数据可视化

于 2022-01-15 14:26:04 首次发布

本文链接：https://blog.csdn.net/weixin_44659458/article/details/122509823

版权

实习同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

数据可视化-highchart

4 篇文章 1 订阅

订阅专栏

基本案例

在这里插入图片描述

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

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>环形图</title>
    <style>
      .container {
        width: 600px;
        margin: 100px 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>
  </head>
  <body>
    <div class="container">
        <h1>游客渠道来源</h1>
      <div id="highchart"></div>
    </div>
    <script src="./js/jquery.js"></script>
    <script src="./js/highchart.js"></script>
    <script>
      // highcharts 配置选项
      var option = {
        // 设置图例
        legend: {
          // 设置图例圆角为 0
          symbolRadius: 0,
        },
        // 图表标题
        title: {
          // 是否设置浮动
          floating: true,
          // 是否使用 HTML 标签
          useHTML: true,
          // 格式化显示内容
          text: "总人数：1924",
          // 设置标题样式
          style: {
            fontSize: "18px",
            color: "#809CC1",
            textAlign: "center",
            fontWeight: "normal"
          },
        },
        // 隐藏 highchart标签
        credits: {
          enabled: false,
        },
        // 配置环形图项
        plotOptions: {
          pie: {
            // 是否允许点击
            allowPointSelect: true,
            // 鼠标移动到圆环上变手指
            cursor: "pointer",
            // 圆环大小
            size: 220,
            dataLabels: {
              // 格式化数据标签显示的内容
              format: "<b>{point.name}:</b>{point.y}",
              // 设置鼠标标签离圆环的距离
              distance: 10,
            },
            // 是否显示图例
            showInLegend: true,
          },
        },
        // 配置数据项
        series: [
          {
            // 图表类型（环形图）
            type: "pie",
            // 内圆大小
            innerSize: "70%",
            // 数据名字（数据类型）
            name: "总人数",
            // 数据
            data: [
              { name: "涂牛", y: 399, color: "#E8110F" },
              { name: "去哪儿", y: 197, color: "#FBC723" },
              { name: "携程", y: 254, color: "#1B6AA5" },
              { name: "飞猪", y: 358, color: "#fed95c" },
              { name: "窗口购票", y: 508, color: "#fa6e57" },
              { name: "东山旅行", y: 208, color: "#f69e53" },
            ],
          },
        ],
      };
      $("#highchart").highcharts(option, function (c) {
          // 回调函数设置标题居中
        var centerY = c.series[0].center[1],
          titleHeight = parseInt(c.title.styles.fontSize);
        c.setTitle({
          y: centerY + titleHeight / 2 ,
        });
      });
    </script>
  </body>
</html>