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

最新推荐文章于 2024-09-21 11:29:05 发布

???xixi

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量1.6k

点赞数 2

文章标签： js vue.js

本文链接：https://blog.csdn.net/xixi_csdn/article/details/112969058

版权

文章目录

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

一、数据千分位显示

这个是正常情况下的（默认是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   // 显示图例，默认在图的下面，横向排
            }
          },