highcharts 数据千分位显示和饼图的简单用法

最新推荐文章于 2023-11-04 15:56:27 发布

原创最新推荐文章于 2023-11-04 15:56:27 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue.js

本文介绍了如何使用HighCharts库来定制数据的千分位显示和饼图的样式。通过设置`HighCharts.setOptions`，可以全局改变图表中的千分位分隔符。同时，展示了饼图的配置选项，如外圈大小、数据标签的显示方式、颜色、字体大小等，以及如何调整数据标签的位置和图例的显示。

文章目录

一、数据千分位显示
二、饼图

一、数据千分位显示

这个是正常情况下的（默认是1,433，中间的【，】用空格标识的）
在这里插入图片描述

这是去掉空格之后的之后的
在这里插入图片描述

// 写在 HighCharts.chart()的外面，所有的图表都会被统一设置
 HighCharts.setOptions({
          lang: {
            thousandsSep: ''  // 这里也可以写','，页面会显示为1,433
          }
        });

二、饼图

在这里插入图片描述

plotOptions: {
            pie: {
            	size: '80%',   // 外圈大小
              // innerSize: 20,// 内圈大小
              allowPointSelect: true,
              cursor: 'pointer',
              dataLabels: {
                enabled: true,
                distance: -40,   //这里注释掉，数字就会在外面，并且有牵引线
                color: '#000',
                format: '<b>{point.y}个</b>,<br />{point.percentage:.1f}%',
                style: {
                  "fontSize": "13px",
                  "fontWeight": "none",
                  "textOutline": "none"
                }
              },
              showInLegend: true   // 显示图例，默认在图的下面，横向排
            }
          },