相关文章推荐
酷酷的仙人球  ·  kube-apiserver不规律报load ...·  1 月前    · 
小胡子的荔枝  ·  简单又高大上的项目（应付复试的小demo） ...·  3 月前    · 
有情有义的山羊  ·  nginx配置多个conf文件_nginx ...·  4 月前    · 
不拘小节的太阳  ·  Hologres技术揭秘: ...·  1 年前    · 
飞奔的马铃薯  ·  react native ...·  1 年前    · 
Code  ›  HighCharts实现3D不同高度圆环图、3D饼图_highcharts 3d饼图
chart 饼图 highcharts
https://blog.csdn.net/m0_51431448/article/details/123947854
飘逸的核桃
6 月前

最近做可视化比较多，就常用的图表类型做了一下总结。

因为做可视化的图表代码量非常大，所以会把echarts图表单独抽离出来，封装成一个组件，也可以复用，所以这里我直接把封装的组件直接放在这里，是可以直接拿来用的，根据所需稍作修改即可。

这里都是用的vue3，其实和vue2差不多，在写法上稍作修改即可。

其中用到了一个 fontChart 的方法，这样是为了在window变化（改变缩放）的时候能够让字体也达到自适应，因为默认的单位是px，如果不使用的话，当我们去减小屏幕缩放的时候，这时候屏幕分辨率就会变大，但是我们的字体还是xxpx，就会让我们的字体看上去特别小，所以这里使用了这个方法，fontChart方法如下：

scr/utils/echartPxToRem.js 

export function fontChart(res) {
  let docEl = document.documentElement,
    clientWidth =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth;
  if (!clientWidth) return;
  // 此处的3840 为设计稿的宽度，记得修改！
  let fontSize = clientWidth / 1920;
  return res * fontSize;

 接下来正题：
 

 第一步首先安装 highcharts 
 

npm install highcharts --save
 

 第二步 main.js 引入 3d相关 
 

import highcharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
highcharts3d(highcharts)
 

 然后封装成组件
 

一.  3D饼图
 

<template>
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import highcharts from "highcharts";
import { fontChart } from "@/utils/echartPxToRem";
import { onMounted, watch, onUnmounted } from "vue";
const props = defineProps({
  id: {
    type: String,
    required: true,
  pieData: {
    type: Array,
    default: () => ([
      ["综采", 3],
      ["综掘", 6],
      ["胶带运输", 4],
      ["排水", 3],
      ["通风", 3],
      ["压风", 4],
watch(
  () => props.pieData,
  (newValue) => {
    initOption();
    deep: true,
onMounted(() => {
  initOption();
  window.addEventListener("resize", initOption);
onUnmounted(() => {
  window.removeEventListener("resize", initOption);
//  初始化echarts
const initOption = () => {
  let option = {
    chart: {
      backgroundColor: "none",
      type: "pie", //饼图
      margin: [0, 0, 0, 100],
      options3d: {
        enabled: true, //使用3d功能
        alpha: 18, //延y轴向内的倾斜角度
        beta: 0,
    title: {
      text: "", //图表的标题文字
    plotOptions: {
      pie: {
        allowPointSelect: true, //每个扇块能否选中
        cursor: "pointer", //鼠标指针
        depth: fontChart(105), //饼图的厚度
        showInLegend: true, // 是否显示图例
        // center: ['30%', '60%'],
        size: "78%",
        dataLabels: {
          enabled: true, //是否显示饼图的线形tip
          distance: -fontChart(35),
          align: "center",
          // position:'center',
          format: "<b>{point.y}</b>",
          style: {
            fontSize: fontChart(13),
        events: {
          //点击事件
          click: () => {},
    colors: ["#59678c", "#1760bc", "#1890ff", "#06c8cd", "#03ac32", "#acff02"],
    legend: {
      align: "left", //水平方向位置
      verticalAlign: "top", //垂直方向位置
      layout: "vertical",
      x: fontChart(20),
      y: fontChart(40),
      symbolWidth: fontChart(10),
      symbolHeight: fontChart(10),
      symbolRadius: 0,
      itemMarginBottom: fontChart(4),
      itemStyle: {
        color: "#f4f4f6",
        fontSize: fontChart(14),
    credits: {
      enabled: false, // 禁用版权信息
    series: [
        type: "pie",
        name: "", //统一的前置词,非必须
        data: props.pieData,
  highcharts.chart(props.id, option);
</script>
 

二. 3D不同高度环形图 
 

 Vue2写法 
 

<template>
  <div :id="id" style="height: 100%; width: 100%"></div>
</template>
<script>
import highcharts from "highcharts";
import { fontChart } from "@/utils/echartPxToRem";
export default {
  props: {
    id: {
      type: String,
      required: true,
    dataList: {
      type: Array,
      default: () => ([
          name: "红草莓",
          y: 10254,
          h: 0,
          bfb: 0
          name: "白草莓",
          y: 6894,
          h: 0,
          bfb: 0
          name: "红颜草莓",
          y: 7667,
          h: 0,
          bfb: 0
          name: "甜宝草莓",
          y: 4287,
          h: 0,
          bfb: 0
          name: "红颜草莓",
          y: 8687,
          h: 0,
          bfb: 0
          name: "甜宝草莓",
          y: 16112,
          h: 0,
          bfb: 0
  watch: {
    dataList() {
      this.$nextTick(() => {
        this.initOption();
  mounted() {
    // this.$nextTick(() => {
    this.initOption();
    // });
    window.addEventListener("resize", this.initOption);
  destroyed() {
    window.removeEventListener("resize", this.initOption);
  methods: {
    initOption() {
      let quantity = 0; // 总数
      this.dataList.forEach((item) => {
        quantity += item.y;
      this.dataList.forEach((item) => {
        item.bfb = parseInt((item.y / quantity) * 100);
        item.h = item.bfb * 1.5 >= 70 ? 70 : item.bfb * 1.5
        // item.h = parseInt(0.86 * item.bfb); // 最高高度60，根据比例渲染高度
        // console.log(this.dataList, "dataList----->>>");
      // 修改3d饼图绘制过程
      var each = highcharts.each,
        round = Math.round,
        cos = Math.cos,
        sin = Math.sin,
        deg2rad = Math.deg2rad;
      highcharts.wrap(
        highcharts.seriesTypes.pie.prototype,
        "translate",
        function (proceed) {
          proceed.apply(this, [].slice.call(arguments, 1));
          // Do not do this if the chart is not 3D
          if (!this.chart.is3d()) {
            return;
          var series = this,
            chart = series.chart,
            options = chart.options,
            seriesOptions = series.options,
            depth = seriesOptions.depth || 0,
            options3d = options.chart.options3d,
            alpha = options3d.alpha,
            beta = options3d.beta,
            z = seriesOptions.stacking
              ? (seriesOptions.stack || 0) * depth
              : series._i * depth;
          z += depth / 2;
          if (seriesOptions.grouping !== false) {
            z = 0;
          each(series.data, function (point) {
            var shapeArgs = point.shapeArgs,
              angle;
            point.shapeType = "arc3d";
            var ran = point.options.h;
            shapeArgs.z = z;
            shapeArgs.depth = depth * 0.75 + ran;
            shapeArgs.alpha = alpha;
            shapeArgs.beta = beta;
            shapeArgs.center = series.center;
            shapeArgs.ran = ran;
            angle = (shapeArgs.end + shapeArgs.start) / 2;
            point.slicedTranslation = {
              translateX: round(
                cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
              translateY: round(
                sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
      (function (H) {
        H.wrap(
          highcharts.SVGRenderer.prototype,
          "arc3dPath",
          function (proceed) {
            // Run original proceed method
            var ret = proceed.apply(this, [].slice.call(arguments, 1));
            ret.zTop = (ret.zOut + 0.5) / 100;
            return ret;
      })(highcharts);
      highcharts.chart(this.id, {
        chart: {
          animation: false,
          backgroundColor: "none",
          type: "pie", //饼图
          margin: [0, 0, 0, 0],
          options3d: {
            enabled: true, //使用3d功能
            alpha: 58, //延y轴向内的倾斜角度
            beta: 0,
          events: {
            load: function () {
              var each = highcharts.each,
                points = this.series[0].points;
              each(points, function (p, i) {
                p.graphic.attr({
                  translateY: -p.shapeArgs.ran,
                p.graphic.side1.attr({
                  translateY: -p.shapeArgs.ran,
                p.graphic.side2.attr({
                  translateY: -p.shapeArgs.ran,
        legend: {
          enabled: true, // 关闭图例
          align: "right", //水平方向位置
          verticalAlign: "top", //垂直方向位置
          layout: "vertical",
          x: fontChart(-20),
          y: fontChart(30),
          symbolWidth: fontChart(10),
          symbolHeight: fontChart(10),
          symbolRadius: "50%", // 修改成圆
          itemMarginBottom: fontChart(8),
          useHTML: true,
          //labelFormat: '{name}&nbsp;&nbsp;&nbsp;&nbsp;{y}',
          labelFormatter: function () {
            return (
              '<div style="width: .3125rem;display: inline-block">' +
              this.name +
              ':&nbsp;&nbsp;</div><div style="color: #00d7da;display: inline-block">' +
              this.y +
              "</div>"
          itemStyle: {
            color: "#f4f4f6",
            fontSize: fontChart(12),
        title: {
          // enabled: false,
          text: "",
        subtitle: {
          text: "",
        plotOptions: {
          pie: {
            allowPointSelect: false, // 禁用点击
            cursor: "pointer",
            depth: fontChart(15),
            showInLegend: true,
            size: "75%", // 外圈直径大小
            innerSize: fontChart(95), // 内圈直径大小
            center: ["30%", "50%"],
            colors: [
              "rgb(235,147,39)",
              "rgb(234,219,54)",
              "rgb(12,214,137)",
              "rgb(25,234,219)",
              "rgb(13,145,239)",
              "rgb(167,67,234)",
            dataLabels: {
              useHTML: true,
              enabled: true, //是否显示饼图的线形tip
              distance: 5,
              borderColor: '#007acc',
              align: "center",
              // verticalAlign: 'top',
              position: "right",
              format: "{point.bfb}%",
              // formatter: (point,b) => {
              //   console.log(point,'ponit-->>')
              //   console.log(b,'ponit-->>')
              // },
              color: "#ffffff",
              style: {
                textOutline: "none",
                fontSize: fontChart(13),
        credits: {
          enabled: false, // 禁用版权信息
        series: [
            type: "pie",
            name: "数量",
            data: this.dataList,
</script>
 

Vue3写法 
 

<template>
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import highcharts from "highcharts";
import { fontChart } from "@/utils/echartPxToRem";
import { onMounted, watch, onUnmounted } from "vue";
const props = defineProps({
  id: {
    type: String,
    required: true,
  dataList: {
    type: Array,
    default: () => ([
        name: "红草莓",
        y: 15687,
        h: 16,
        bfb: 29,
        name: "白草莓",
        y: 15687,
        h: 12,
        bfb: 8,
        name: "红颜草莓",
        y: 15687,
        h: 5,
        bfb: 11,
        name: "甜宝草莓",
        y: 15687,
        h: 9,
        bfb: 11,
        name: "红颜草莓",
        y: 15687,
        h: 8,
        bfb: 13,
        name: "甜宝草莓",
        y: 15687,
        h: 36,
        bfb: 18,
watch(
  () => props.dataList,
  (newValue) => {
    initOption();
    deep: true,
onMounted(() => {
  initOption();
  window.addEventListener('resize', initOption)
onUnmounted(() => {
  window.removeEventListener("resize", initOption);
//  初始化echarts
const initOption = () => {
  let quantity = 0; // 总数
  props.dataList.forEach((item) => {
    quantity += item.y;
  props.dataList.forEach((item) => {
    item.bfb = parseInt((item.y / quantity) * 100);
    item.h = item.bfb * 1.5 >= 70 ? 70 : item.bfb * 1.5
    // item.h = parseInt(0.86 * item.bfb); // 最高高度60，根据比例渲染高度
    // console.log(props.dataList, "dataList----->>>");
  // 修改3d饼图绘制过程
  var each = highcharts.each,
    round = Math.round,
    cos = Math.cos,
    sin = Math.sin,
    deg2rad = Math.deg2rad;
  highcharts.wrap(
    highcharts.seriesTypes.pie.prototype,
    "translate",
    function (proceed) {
      proceed.apply(this, [].slice.call(arguments, 1));
      // Do not do this if the chart is not 3D
      if (!this.chart.is3d()) {
        return;
      var series = this,
        chart = series.chart,
        options = chart.options,
        seriesOptions = series.options,
        depth = seriesOptions.depth || 0,
        options3d = options.chart.options3d,
        alpha = options3d.alpha,
        beta = options3d.beta,
        z = seriesOptions.stacking
          ? (seriesOptions.stack || 0) * depth
          : series._i * depth;
      z += depth / 2;
      if (seriesOptions.grouping !== false) {
        z = 0;
      each(series.data, function (point) {
        var shapeArgs = point.shapeArgs,
          angle;
        point.shapeType = "arc3d";
        var ran = point.options.h;
        shapeArgs.z = z;
        shapeArgs.depth = depth * 0.75 + ran;
        shapeArgs.alpha = alpha;
        shapeArgs.beta = beta;
        shapeArgs.center = series.center;
        shapeArgs.ran = ran;
        angle = (shapeArgs.end + shapeArgs.start) / 2;
        point.slicedTranslation = {
          translateX: round(
            cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
          translateY: round(
            sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
  (function (H) {
    H.wrap(highcharts.SVGRenderer.prototype, "arc3dPath", function (proceed) {
      // Run original proceed method
      var ret = proceed.apply(this, [].slice.call(arguments, 1));
      ret.zTop = (ret.zOut + 0.5) / 100;
      return ret;
  })(highcharts);
  highcharts.chart(props.id, {
    chart: {
      animation: false,
      backgroundColor: "none",
      type: "pie", //饼图
      margin: [0, 0, 0, 0],
      options3d: {
        enabled: true, //使用3d功能
        alpha: 58, //延y轴向内的倾斜角度
        beta: 0,
      events: {
        load: function () {
          var each = highcharts.each,
            points = this.series[0].points;
          each(points, function (p, i) {
            p.graphic.attr({
              translateY: -p.shapeArgs.ran,
            p.graphic.side1.attr({
              translateY: -p.shapeArgs.ran,
            p.graphic.side2.attr({
              translateY: -p.shapeArgs.ran,
    legend: {
      enabled: true, // 关闭图例
      align: "right", //水平方向位置
      verticalAlign: "top", //垂直方向位置
      layout: "vertical",
      x: fontChart(0),
      y: fontChart(30),
      symbolWidth: fontChart(10),
      symbolHeight: fontChart(10),
      symbolRadius: "50%", // 修改成圆
      itemMarginBottom: fontChart(8),
      labelFormat: "{name}&nbsp;&nbsp;&nbsp;&nbsp;{y}",
      itemStyle: {
        color: "#f4f4f6",
        fontSize: fontChart(12),
    title: {
      // enabled: false,
      text: "",
    subtitle: {
      text: "",
    plotOptions: {
      pie: {
        allowPointSelect: false, // 禁用点击
        cursor: "pointer",
        depth: fontChart(45),
        showInLegend: true,
        size: "65%", // 外圈直径大小
        innerSize: fontChart(95), // 内圈直径大小
        center: ["30%", "50%"],
        colors: [
          "rgba(157, 88, 32, .9)",
          "rgba(169, 199, 62, .9)",
          "rgba(11, 146, 89, .9)",
          "rgba(16, 138, 174, .9)",
          "rgba(0, 77, 161, .9)",
          "rgba(60, 32, 173, .9)",
        dataLabels: {
          enabled: true, //是否显示饼图的线形tip
          distance: fontChart(0),
          align: "center",
          position: "center",
          format: "{point.bfb}%",
          // formatter: (point,b) => {
          //   console.log(point,'ponit-->>')
          //   console.log(b,'ponit-->>')
          // },
          style: {
            fontSize: fontChart(13),
    credits: {
      enabled: false, // 禁用版权信息
    series: [
        type: "pie",
        name: "Browser share",
        data: props.dataList,
</script>

                    最近做可视化比较多，就常用的图表类型做了一下总结。因为做可视化的图表代码量非常大，所以会把echarts图表单独抽离出来，封装成一个组件，也可以复用，所以这里我直接把封装的组件直接放在这里，是可以直接拿来用的，根据所需稍作修改即可。这里都是用的vue3，其实和vue2差不多，在写法上稍作修改即可第一步首先安装 highchartsnpm install highcharts --save第二步 main.js 引入 3d相关import highcharts from 'hi..
import highcharts from 'highcharts';
// 使用3d图还需要引入下面的
import highcharts3d from 'highcharts/highcharts-3d';
// 调用3d图表
highcharts3d(
				
使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip
使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip
使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip
使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用t




    


				
DotNet图表集合
图表是数据的图形表示，其中“数据由符号表示，例如条形图中的条形图，折线图中的线或饼图中的切片”。 图表可以表示表格数字数据，函数或某些定性结构，并提供不同的信息。
插件或库提供的图表功能
画布JsChart
d3图表
Chart.js
 Morris.js
融合图表
全球共有75万名开发人员下载了Fusioncharts，下载量超过140万次。 “为开发人员，为开发人员”是我们的使命宣言，我们的团队专注于使开发人员的生活变得快乐，同时帮助全世界有效地交流和理解数据。
CanvasJs图表
具有10倍更好的性能和简单APIJavaScript图表。 与流行的JS框架（例如AngularJS等）轻松集成。库附带30种不同类型的图表，包括折线图，柱形图，条形图，面积图，样条图，饼图，圆环图，堆积图等。它支持各种交互式功能，如工具提示，缩放，平移，动画，

				
要在JavaScript中使用Highcharts来实现3D饼图，你需要按照以下步骤进行配置和使用：
1. 首先，确保你已经引入了Highcharts库。你可以在HTML文件中通过使用`<script>`标签来引入Highcharts库的JavaScript文件。
2. 创建一个HTML容器来显示你的图表。在HTML文件中，你可以使用一个空的`<div>`元素，并为其指定一个唯一的ID，例如`<div id="chart-container"></div>`。这将是你的3D饼图的容器。
3. 在JavaScript文件中，你需要使用Highcharts的配置对象来定义你的3D饼图的设置。你可以通过创建一个名为`options`的对象来实现这一点。在`options`对象中，你可以指定图表的类型为`pie`，并设置`options.chart`属性为`{ type: 'pie', options3d: { enabled: true, alpha: 45, beta: 0 } }`以启用3D效果。
4. 在`options.series`属性中，你可以指定饼图的数据。每个数据点都是一个对象，包含`name`和`y`属性，分别表示数据点的名称和值。
5. 最后，你需要使用`Highcharts.chart`函数将图表绘制到指定的容器中。在JavaScript文件中，使用以下代码来创建和绘制3D饼图：`Highcharts.chart('chart-container', options);`。其中，`'chart-container'`是你在第2步中指定的容器的ID。
通过按照上述步骤进行配置和使用，你就能够在JavaScript中实现3D饼图的效果了。记得在绘制图表之前，确保你已经引入了Highcharts库，并正确配置了相关的设置和数据。<span class="em">1</span>
#### 引用[.reference_title]
-  *1* [在Vue中使用highCharts绘制3d饼图的方法](https://download.csdn.net/download/weixin_38656609/13206251)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
 
推荐文章
酷酷的仙人球  ·  kube-apiserver不规律报loading OpenAPI spec for “v1beta1.metrics.k8s.io“ failed with: failed to retrieve_
1 月前
小胡子的荔枝  ·  简单又高大上的项目（应付复试的小demo） - 爲誰心殇 - 博客园
3 月前
有情有义的山羊  ·  nginx配置多个conf文件_nginx include多个conf-CSDN博客
4 月前
不拘小节的太阳  ·  Hologres技术揭秘: JSON半结构化数据的极致分析性能 - 知乎
1 年前
飞奔的马铃薯  ·  react native FlatList内嵌自己的Component不刷新的处理 - 掘金
1 年前
今天看啥   ·   Py中国   ·   codingpro   ·   藏经阁   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号