highcharts 实现3d饼图

最新推荐文章于 2025-01-09 11:42:15 发布

原创最新推荐文章于 2025-01-09 11:42:15 发布 · 1.7k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #html5 #前端 #javascript

vue 同时被 2 个专栏收录

8 篇文章

订阅专栏

插件

6 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中使用highcharts和vue-highcharts插件创建3D饼图，包括下载依赖、配置main.js、设置图表选项及自定义样式等内容。

1、下载

npm install vue-highcharts --save
npm install highcharts --save

2、main.js中

import highcharts from 'highcharts'

import VueHighCharts from 'vue-highcharts'

import highcharts3d from 'highcharts/highcharts-3d'

Vue.use(VueHighCharts)

highcharts3d(highcharts)

3、3d饼图组件中

import HighCharts from "highcharts";

4、html部分

 <div class="pie-wrap" id="pie">
      <div :id="id"></div>
    </div>

5、js中data部分

        id: "test",
        option: {
          chart: {
            type: "pie",
            options3d: {
              enabled: true,
              alpha: 68,
              beta: 0
            },
            backgroundColor: "rgba(1,1,1,0)"
          },
          credits: {
            //关闭版权信息的标签
            enabled: false
          },
          title: {
            text: "xx图",
            align: "left",
            x: 30,
            y: 30,
            style: {
              color: "#fff",
              fontWeight: "bold",
              fontSize: 16
            }
          },
          tooltip: {
            enabled: false
          },
          plotOptions: {
            pie: {
              allowPointSelect: true,
              cursor: "pointer",
              depth: 100,
              dataLabels: {
                enabled: true,
                distance: 30,
                connectorWidth: '3',
   				format: "<b>{point.name}</b>:<br/> {point.percentage:.1f} %",
                style: {
                  fontSize: "10px",
                  fontWeight: "400",
                  color: "#fff",
                  textOutline: "none"
                }
              },
              states: {
                halo: {
                  pacity: 1
                }
              },
              borderWidth: 0.5,
              center: ["50%", "25%"]
            }
          },
          series: [{
            type: "pie",
            name: "namexxxx",
            zIndex: 1,
            size: '50%',
            data: [{
                name: "aa",
                color: "#3399ff",
                y: 46
              },

              {
                name: "bb",
                color: "#ffcc66",
                y: 24
              },
              {
                name: "cc",
                color: "#ff9966",
                y: 26
              },

              {
                name: "dd",
                color: "#00ccff",
                y: 12
              }
            ]
          }]
        }

6、mounted部分

  HighCharts.chart(this.id, this.option);

7、所有的颜色、高度、尺寸都可以自己配置
https://www.highcharts.com.cn/docs/highcharts-vue，和echarts大同小异
8、目前只是简单的3d饼图，可以要做出来高度差，参考https://jshare.com.cn/jianshu/NZSA7x