投稿
  1. 半码博客首页
  2. 技术随笔

一文带你快速上手Highcharts框架

小半 • • 技术随笔 • 阅读 88

导读：本篇文章讲解 一文带你快速上手Highcharts框架，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

前言

前端开发中，数据可视化尤为重要，最有效的方式可以通过图表库进行数据可视化，其中 ECharts、Highcharts 提供了丰富的图表，适用各种各样的功能，ECharts 相对来说基本可满足日常使用。但如果你的需求是立体3D图表时，ECharts 就显得力不从心了，这个时候 Highcharts 的优势就体现出来了。

Highcharts概述

Highcharts（官网） 是一个用纯 JavaScript 编写的一个图表库。它能够很简单便捷的在 web 网站或是 web 应用程序添加有交互性的图表。

一、安装

通过npm安装

npm install highcharts --save
npm install highcharts-vue

Highcharts Vue 是 Highcharts 基于 Vue 框架封装的 Highcharts，可以很方便的在 Vue 开发环境中使用 Highcharts 创建交互性图表。

main.js 中全局引入并注册

import Highcharts from 'highcharts'
import HighchartsVue from 'highcharts-vue'
Vue.use(Highcharts)
Vue.use(HighchartsVue)

二、Highcharts 图表组成

一般情况下，Highcharts 包含标题（Title）、坐标轴（Axis）、数据列（Series）、数据提示框（Tooltip）、图例（Legend）、版权标签（Credits）等，另外还可以包括导出功能按钮（Exporting）、标示线（PlotLines）、标示区域（PlotBands）、数据标签（dataLabels）等。

Highcharts 基本组成部分如下图所示：

在这里插入图片描述

三、生成一个 Highcharts

1. 为 Highcharts 准备一个具有宽高的div容器（简单来说就是存放图表的一个占位）

  <div :style="{ width: '100%', height: '500px' }" id="cookieChart"></div>

2. Highcharts 实例化中绑定容器

Highcharts.chart('cookieChart', {
  // Highcharts 配置
});

当你想愉快的开始使用 Highcharts 时，你会发现页面报了这个错误：在这里插入图片描述
解决： 只需要在页面上再次将 Highcharts 引入即可。

import Highcharts from "highcharts";

四、实例

介于大家用 Highcharts 图表工具可能更趋向于其中的3D图表，所以我们直接看具有3D效果的图表。平面图表大家可参考博主另一篇文章 —– 史上最全echarts可视化图表详解 。

1. 金字塔图（3D）

金字塔图所需的外部资源，在页面引入并注册即可。
在这里插入图片描述

实现效果：
在这里插入图片描述
源码如下：

<template>
  <!-- //用来放Highcharts图表的容器，一定要有宽高 -->
  <div class="ChartBox">
    <div :style="{ width: '100%', height: '100%' }" id="cookieChart"></div>
  </div>
</template>
<script>
import Highcharts from "highcharts"; //为防止报错在页面上再次引入Highcharts
// 引用所需外部资源
import Highcharts3d from "highcharts/highcharts-3d";
import exporting from "highcharts/modules/exporting";
import oldie from "highcharts/modules/oldie";
import funnel3d from "highcharts/modules/funnel3d";
import cylinder from "highcharts/modules/cylinder";
import pyramid3d from "highcharts/modules/pyramid3d";
// 注册所需外部资源
Highcharts3d(Highcharts);
funnel3d(Highcharts);
exporting(Highcharts);
oldie(Highcharts);
cylinder(Highcharts);
pyramid3d(Highcharts);
export default {
  data() {
    return {
      // 模拟数据
      dataList: [
        {
          name: "数据一",
          y: 435,
        },
        {
          name: "数据二",
          y: 435,
        },
        {
          name: "数据三",
          y: 543,
        },
        {
          name: "数据四",
          y: 654,
        },
      ],
    };
  },
  mounted() {
    this.init(); //定义一个图表方法在methods中调用
  },
  methods: {
    // 调用init方法
    init() {
      Highcharts.chart("cookieChart", {
        chart: {
          type: "pyramid3d", //图表类型
          options3d: {
            enabled: true, // 是否启用 3D 功能,默认为false
            alpha: 10, // 内旋转角度
            depth: 50, // 外旋转角度
            viewDistance: 50,
          },
        },
        title: {
          text: "标题", //标题
        },
        plotOptions: {
          series: {
            dataLabels: {
              //数据标签
              enabled: true, //是否默认显示数据项
              format: "<b>{point.name}</b>", //通过format函数对当前数据点的点值格式化
              allowOverlap: true,
              x: 10, //数据项x轴方向调整
              y: -5, //数据项y轴方向调整
            },
            width: "50%", //图表宽
            height: "50%", //图表宽
            center: ["50%", "40%"], //图表位置，左右、上下
          },
        },
        series: [
          // 数据列
          {
            name: "数量", //名称
            data: this.dataList, //数据
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
.ChartBox {
  width: 50em;
  height: 50vh;
}
</style>

2. 饼图（3D）

饼图所需的外部资源，在页面引入并注册即可。
在这里插入图片描述

实现效果：
在这里插入图片描述
源码如下：

<template>
  <!-- //用来放Highcharts图表的容器，一定要有宽高 -->
  <div class="ChartBox">
    <div :style="{ width: '100%', height: '100%' }" id="pieChart"></div>
  </div>
</template>
<script>
import Highcharts from "highcharts"; //为防止报错在页面上再次引入Highcharts
// 引用所需外部资源
import Highcharts3d from "highcharts/highcharts-3d";
import exporting from "highcharts/modules/exporting";
import oldie from "highcharts/modules/oldie";
// 注册所需外部资源
Highcharts3d(Highcharts);
exporting(Highcharts);
oldie(Highcharts);
export default {
  data() {
    return {
      // 模拟数据
      dataList: [
        {
          name: "数据一",
          y: 435,
        },
        {
          name: "数据二",
          y: 435,
        },
        {
          name: "数据三",
          y: 543,
        },
        {
          name: "数据四",
          y: 654,
        },
      ],
    };
  },
  mounted() {
    this.init(); //定义一个图表方法在methods中调用
  },
  methods: {
    // 调用init方法
    init() {
      Highcharts.chart("pieChart", {
        chart: {
          type: "pie",//类型
          options3d: {
            enabled: true, // 是否启用 3D 功能,默认为false
            alpha: 45,// 内旋转角度
            beta: 0, // 外旋转角度
          },
        },
        title: {
          text: "标题",//标题
        },
        tooltip: {//鼠标触摸显示值
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,//是否允许数据点的点击
            cursor: "pointer",//鼠标触摸变小手
            depth: 35,//图表高度
            dataLabels: {
              enabled: true,//是否允许数据标签
              format: "{point.name}",
            },
          },
        },
        series: [
           // 数据列
          {
            type: "pie",//类型
            name: "占比", //名称
            data: this.dataList, //数据
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
.ChartBox {
  width: 50em;
  height: 50vh;
}
</style>

3. 柱图（3D）

柱图所需的外部资源，在页面引入并注册即可。
在这里插入图片描述

实现效果：
在这里插入图片描述

源码如下：

<template>
  <!-- //用来放Highcharts图表的容器，一定要有宽高 -->
  <div class="ChartBox">
    <div :style="{ width: '100%', height: '100%' }" id="pillarChart"></div>
  </div>
</template>
<script>
import Highcharts from "highcharts"; //为防止报错在页面上再次引入Highcharts
// 引用所需外部资源
import Highcharts3d from "highcharts/highcharts-3d";
import exporting from "highcharts/modules/exporting";
// 注册所需外部资源
Highcharts3d(Highcharts);
exporting(Highcharts);
export default {
  data() {
    return {
      // 模拟数据
      dataList: [
        {
          name: "数据一",
          y: 435,
        },
        {
          name: "数据二",
          y: 435,
        },
        {
          name: "数据三",
          y: 543,
        },
        {
          name: "数据四",
          y: 321,
        },
        {
          name: "数据五",
          y: 112,
        },
        {
          name: "数据六",
          y: 214,
        },
        {
          name: "数据七",
          y: 432,
        },
        {
          name: "数据八",
          y: 644,
        },
      ],
    };
  },
  mounted() {
    this.init(); //定义一个图表方法在methods中调用
  },
  methods: {
    // 调用init方法
    init() {
      Highcharts.chart("pillarChart", {
        chart: {
          renderTo: "pillarChart", //图表放置的容器，一般在html中放置一个DIV，获取DIV的id属性值
          type: "column", //类型
          options3d: {
            enabled: true,// 是否启用 3D 功能,默认为false
            alpha: 15, // 内旋转角度
            beta: 15, // 外旋转角度
            depth: 100, //3D场景的大小(深度)
            viewDistance: 25,
          },
        },
        title: {
          text: "标题", //标题
        },
        subtitle: {
          text: "副标题", //副标题
        },
        yAxis: {
          title: {
            text: "y轴标题", //左侧标题
          },
        },
        xAxis: {
          title: {
            text: "x轴标题",//x轴标题
          },
          // 数据项
          categories: ["x轴1","x轴2","x轴3","x轴4","x轴5","x轴6","x轴7","x轴8"],//x轴数据
        },
        plotOptions: {
          column: {
            depth: 25, //柱子的横截面宽度
          },
        },
        series: [
          {
            name: "图例1", //名称
            data: this.dataList, //数据
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
.ChartBox {
  width: 50em;
  height: 50vh;
}
</style>

4. 面积图（3D）

面积图所需的外部资源，在页面引入并注册即可。
在这里插入图片描述

实现效果：

在这里插入图片描述

源码如下：

<template>
  <!-- //用来放Highcharts图表的容器，一定要有宽高 -->
  <div class="ChartBox">
    <div :style="{ width: '100%', height: '100%' }" id="pillarChart"></div>
  </div>
</template>
<script>
import Highcharts from "highcharts"; //为防止报错在页面上再次引入Highcharts
// 引用所需外部资源
import Highcharts3d from "highcharts/highcharts-3d";
import exporting from "highcharts/modules/exporting";
// 注册所需外部资源
Highcharts3d(Highcharts);
exporting(Highcharts);
export default {
  data() {
    return {
      // 模拟数据
      dataList: [
        {
          name: "数据一",
          y: 51,
        },
        {
          name: "数据二",
          y: 51,
        },
        {
          name: "数据三",
          y: 32,
        },
        {
          name: "数据四",
          y: 31,
        },
        {
          name: "数据五",
          y: 22,
        },
        {
          name: "数据六",
          y: 24,
        },
        {
          name: "数据七",
          y: 32,
        },
        {
          name: "数据八",
          y: 34,
        },
      ],
      dataListTwo: [
        {
          name: "数据一",
          y: 87,
        },
        {
          name: "数据二",
          y: 86,
        },
        {
          name: "数据三",
          y: 90,
        },
        {
          name: "数据四",
          y: 96,
        },
        {
          name: "数据五",
          y: 86,
        },
        {
          name: "数据六",
          y: 81,
        },
        {
          name: "数据七",
          y: 82,
        },
        {
          name: "数据八",
          y: 88,
        },
      ],
      dataListTherr: [
        {
          name: "数据一",
          y: 123,
        },
        {
          name: "数据二",
          y: 144,
        },
        {
          name: "数据三",
          y: 113,
        },
        {
          name: "数据四",
          y: 131,
        },
        {
          name: "数据五",
          y: 112,
        },
        {
          name: "数据六",
          y: 134,
        },
        {
          name: "数据七",
          y: 132,
        },
        {
          name: "数据八",
          y: 164,
        },
      ],
    };
  },
  mounted() {
    this.init(); //定义一个图表方法在methods中调用
  },
  methods: {
    // 调用init方法
    init() {
      Highcharts.chart("pillarChart", {
        chart: {
          type: "area", //类型
          options3d: {
            enabled: true,// 是否启用 3D 功能,默认为false
            alpha: 15, // 内旋转角度
            beta: 30,// 外旋转角度
            depth: 200,//3D场景的大小(深度)
          },
        },
        title: {
          text: "标题", //标题
        },
        yAxis: {
          title: {
            text: "y轴标题",
            x: -40, //x方向
          },
          labels: {
            //图例
            format: "{value:,.0f} ml",
          },
          gridLineDashStyle: "Dash",//网格线线条样式，Solid、Dot、Dash
        },
        xAxis: [
          {
            visible: false,//加载时，数据序列默认隐藏。
          },
          {
            visible: false,//加载时，数据序列默认隐藏。
          },
          {
            visible: false,//加载时，数据序列默认隐藏。
          },
        ],
        plotOptions: {
          area: {
            depth: 100,
            marker: {
              enabled: false,
            },
            states: {
              inactive: {
                enabled: false,
              },
            },
          },
        },
        tooltip: {
          valueSuffix: "ml", //提示框内容拼接的文字
        },
        series: [
          {
            name: "数据一", //名称
            lineColor: "rgb(180,90,50)", //线条颜色
            color: "rgb(200,110,50)", //文字颜色
            fillColor: "rgb(200,110,50)", //背景色
            data: this.dataList, //数据
          },
          {
            name: "数据四",
            xAxis: 1,
            lineColor: "rgb(120,160,180)",
            color: "rgb(140,180,200)",
            fillColor: "rgb(140,180,200)",
            data: this.dataListTwo,
          },
          {
            name: "数据三",
            xAxis: 2,
            lineColor: "rgb(200, 190, 140)",
            color: "rgb(200, 190, 140)",
            fillColor: "rgb(230, 220, 180)",
            data: this.dataListTherr,
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
.ChartBox {
  width: 50em;
  height: 50vh;
}
</style>

5. 圆柱图（3D）

圆柱图所需的外部资源，在页面引入并注册即可。
在这里插入图片描述
实现效果：
在这里插入图片描述
源码如下：

<template>
  <!-- //用来放Highcharts图表的容器，一定要有宽高 -->
  <div class="ChartBox">
    <div :style="{ width: '100%', height: '100%' }" id="pillarChart"></div>
  </div>
</template>
<script>
import Highcharts from "highcharts"; //为防止报错在页面上再次引入Highcharts
// 引用所需外部资源
import Highcharts3d from "highcharts/highcharts-3d";
import exporting from "highcharts/modules/exporting";
import oldie from "highcharts/modules/oldie";
import cylinder from "highcharts/modules/cylinder";
// 注册所需外部资源
Highcharts3d(Highcharts);
exporting(Highcharts);
oldie(Highcharts);
cylinder(Highcharts);
export default {
  data() {
    return {
      // 模拟数据
      dataList: [
        {
          name: "数据一",
          y: 51,
        },
        {
          name: "数据二",
          y: 51,
        },
        {
          name: "数据三",
          y: 32,
        },
        {
          name: "数据四",
          y: 31,
        },
        {
          name: "数据五",
          y: 22,
        },
        {
          name: "数据六",
          y: 24,
        },
        {
          name: "数据七",
          y: 32,
        },
        {
          name: "数据八",
          y: 34,
        },
      ],
    };
  },
  mounted() {
    this.init(); //定义一个图表方法在methods中调用
  },
  methods: {
    // 调用init方法
    init() {
      Highcharts.chart("pillarChart", {
        chart: {
          type: "cylinder",//类型
          options3d: {
            enabled: true,// 是否启用 3D 功能,默认为false
            alpha: 15,// 内旋转角度
            beta: 15,// 外旋转角度
            depth: 50,//3D场景的大小(深度)
            viewDistance: 25,
          },
        },
         yAxis: {
          title: {
            text: "y轴标题",
            x: -40, //x方向
          },
         },
         xAxis:{
           title: {
            text: "x轴标题",//x轴标题
          },
          // 数据项
          categories: ["x轴1","x轴2","x轴3","x轴4","x轴5","x轴6","x轴7","x轴8"],//x轴数据
         },
        title: {
          text: "标题",
        },
        plotOptions: {
          series: {
            depth: 25,//柱子所在位置(深度)
            colorByPoint: true,//随机颜色
          },
        },
        series: [
          {
            data: this.dataList,//数据
            name: "名称",
            showInLegend: false,//是否显示图例
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
.ChartBox {
  width: 50em;
  height: 50vh;
}
</style>

6. 散点图 （3D）

散点图所需的外部资源，在页面引入并注册即可。
在这里插入图片描述

实现效果：
在这里插入图片描述

源码如下：

<template>
  <!-- //用来放Highcharts图表的容器，一定要有宽高 -->
  <div class="ChartBox">
    <div :style="{ width: '100%', height: '100%' }" id="pillarChart"></div>
  </div>
</template>
<script>
import Highcharts from "highcharts"; //为防止报错在页面上再次引入Highcharts
// 引用所需外部资源
import Highcharts3d from "highcharts/highcharts-3d";
import exporting from "highcharts/modules/exporting";
import oldie from "highcharts/modules/oldie";
// 注册所需外部资源
Highcharts3d(Highcharts);
exporting(Highcharts);
oldie(Highcharts);
export default {
  data() {
    return {
      // 模拟数据
      dataList:[[1, 6, 5], [8, 7, 9], [1, 3, 4], [4, 6, 8], [5, 7, 7], [6, 9, 6], [7, 0, 5], [2, 3, 3], [3, 9, 8], [3, 6, 5], [4, 9, 4]],
    };
  },
  mounted() {
    this.init(); //定义一个图表方法在methods中调用
  },
  methods: {
    // 调用init方法
    init() {
      Highcharts.chart("pillarChart", {
        chart: {
          renderTo: "pillarChart", //图表放置的容器，一般在html中放置一个DIV，获取DIV的id属性值
          margin: 100,
          type: "scatter",//类型
          options3d: {
            enabled: true,// 是否启用 3D 功能,默认为false
            alpha: 10,// 内旋转角度
            beta: 30,// 外旋转角度
            depth: 250,//3D场景的大小(深度)
            viewDistance: 5,
            frame: {
              // 背景三个面的颜色
              bottom: { size: 1, color: "rgba(0,0,0,0.02)" },
              back: { size: 1, color: "rgba(0,0,0,0.04)" },
              side: { size: 1, color: "rgba(0,0,0,0.06)" },
            },
          },
        },
        title: {
          text: "标题",
        },
        subtitle: {
          text: "副标题", //副标题
        },
        plotOptions: {
          scatter: {
            width: 10, //宽
            height: 10, //高
            depth: 10,//3D场景的大小(深度)
          },
        },
        yAxis: {
          title: "y轴标题",//y轴标题
        },
        xAxis:{
           title: {
            text: "x轴标题",//x轴标题
          },
          // 数据项
          categories: ["x轴1","x轴2","x轴3","x轴4","x轴5","x轴6","x轴7","x轴8"],//x轴数据
         },
        zAxis: {
          min: 0, // z轴最小值
          max: 100, // z轴最大值
        },
        legend: {
          enabled: false,//图例显示
        },
        series: [
          {
            name: "随机数据",//名称
            colorByPoint: true,//随机颜色
            data: this.dataList,//数据
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
.ChartBox {
  width: 50em;
  height: 50vh;
}
</style>

7. 堆叠柱图 （3D）

堆叠柱图所需的外部资源，在页面引入并注册即可。
在这里插入图片描述

实现效果：
在这里插入图片描述

源码如下：

<template>
  <!-- //用来放Highcharts图表的容器，一定要有宽高 -->
  <div class="ChartBox">
    <div :style="{ width: '100%', height: '100%' }" id="pillarChart"></div>
  </div>
</template>
<script>
import Highcharts from "highcharts"; //为防止报错在页面上再次引入Highcharts
// 引用所需外部资源
import Highcharts3d from "highcharts/highcharts-3d";
import exporting from "highcharts/modules/exporting";
// 注册所需外部资源
Highcharts3d(Highcharts);
exporting(Highcharts);
export default {
  data() {
    return {
      // 模拟数据
      dataList: [
        {
          name: "小张",
          data: [5, 3, 4, 7, 2],
        },
        {
          name: "小王",
          data: [3, 4, 4, 2, 5],
        },
        {
          name: "小彭",
          data: [2, 5, 6, 2, 1],
        },
        {
          name: "小潘",
          data: [3, 0, 4, 4, 3],
        },
      ],
    };
  },
  mounted() {
    this.init(); //定义一个图表方法在methods中调用
  },
  methods: {
    // 调用init方法
    init() {
      Highcharts.chart("pillarChart", {
        chart: {
          type: "column", //类型
          options3d: {
            enabled: true, // 是否启用 3D 功能,默认为false
            alpha: 15, // 内旋转角度
            beta: 15, // 外旋转角度
            depth: 40, //3D场景的大小(深度)
            viewDistance: 25,
          },
          marginTop: 80, //图表距离顶部间距
          marginRight: 40, //图表距离右边间距
        },
        title: {
          text: "标题", //标题
        },
        xAxis: {
          categories: ["x轴1", "x轴2", "x轴3", "x轴4", "x轴5"],
        },
        yAxis: {
          min: 0, //最小值为0
          allowDecimals: false,
          title: {
            text: "y轴标题",
          },
        },
        tooltip: {
          // 鼠标触摸显示
          headerFormat: "<b>{point.key}</b><br>",
          pointFormat:
            '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}',
        },
        plotOptions: {
          column: {
            stacking: "normal", //堆叠,禁止堆叠设置null
            depth: 40, //柱子横截面宽度
          },
        },
        series: this.dataList, //数据
      });
    },
  },
};
</script>
<style scoped>
.ChartBox {
  width: 50em;
  height: 50vh;
}
</style>

五、常用配置项

看完以上几个实例，相信你对 Highcharts 图表更加得心应手了，但是在使用 Highcharts 图表的时候避免不了要修改一些官方的配置，下面这些配置你一定会用到，一起往下看吧。

credits: {
  enabled: false,
  //href: "http://www.hcharts.cn", //自定义链接
  //text:"", //自定义内容
},

在这里插入图片描述

2.去掉右上角导出

exporting: {
  enabled: false,
},

在这里插入图片描述

3.图例在图表中上方显示

legend: {
  layout: "vertical", // 布局类型：horizontal、vertical，即水平布局和垂直布局
  align: "right", // 水平对齐方式，left、center、right。
  verticalAlign: "top", // 垂直对齐标准
  itemMarginTop: 5, // 图例项顶部外边距
  itemMarginBottom: 3, // 图例项底部外边距
  floating: true, // 是否浮动，浮动则在图表中显示图例
},

在这里插入图片描述

4.设置导出信息为中文

lang: {
  viewFullscreen: "全屏",
  contextButtonTitle: "图表导出菜单",
  decimalPoint: ".",
  downloadJPEG: "下载JPEG图片",
  downloadPDF: "下载PDF文件",
  downloadPNG: "下载PNG文件",
  downloadSVG: "下载SVG文件",
  printChart: "打印图表",
},

调整前：
在这里插入图片描述
调整后：
在这里插入图片描述

5.去掉背景网格线

yAxis: {
  gridLineWidth: 0,
  minorGridLineWidth: 0,
},

在这里插入图片描述

6.文字倾斜

xAxis: {
  labels: {
    rotation: -90, //竖直放
    rotation: -45, //45度倾斜
  },
},

在这里插入图片描述

7.数据直接显示在柱体上

series: [
  {
    dataLabels: {
      enabled: true,
      rotation: -90,
      color: "#FFFFFF",
      align: "right",
      format: "{point.y:.1f}", // :.1f 为保留 1 位小数
      y: 10,
    },
  },
],

在这里插入图片描述

8.设置柱体的宽度

plotOptions: {
  column: {
    pointWidth: 30, //设置柱形的宽度
    borderWidth: 1, //设置柱子的边框，默认是1
  },
},

在这里插入图片描述

9.设置背景网格线颜色、宽度

yAxis: {
  gridLineColor: "red",
  gridLineWidth: "10",
},

在这里插入图片描述

10.折现图线条设置平滑

yAxis: {
  type:'spline',
},

在这里插入图片描述

11.去掉饼图外部文字带白边

plotOptions: {
  pie: {
    dataLabels: {
      format: "{point.name}",
      style: {
        textOutline: "none",//去掉白边
      },
    },
  },
},

在这里插入图片描述

12.饼图字体颜色跟饼图颜色一致

plotOptions: {
  pie: {
    dataLabels: {
      formatter: function () {//饼图字体颜色跟饼图颜色一致
        return (
          '<p style="color:' +
          this.color +
          '">' +
          this.point.name +
          '</p><br><p style="color:' +
          this.color +
          '">' +
          this.percentage.toFixed(1) +
          "%</p>"
        );
      },
    },
  },
},

在这里插入图片描述

此文章持续更新中…

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由半码博客整理，本文链接：https://www.bmabk.com/index.php/post/79378.html

赞 (0)
小半的头像小半
0 0

相关推荐

半码博客——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！