highcharts 3D饼图

最新推荐文章于 2024-05-28 02:05:55 发布

年轻即出发

最新推荐文章于 2024-05-28 02:05:55 发布

阅读量2.6w

点赞数 1

分类专栏：笔记 Vue 文章标签： Vue Highcharts 3D饼图图表配置 npm安装

本文链接：https://blog.csdn.net/weixin_42246997/article/details/121510397

版权

Vue 同时被 2 个专栏收录

36 篇文章 2 订阅

订阅专栏

笔记

4 篇文章 0 订阅

订阅专栏

详细介绍highcharts在vue中的使用和配置方法。首先需要说明的是这个插件并不是开源的，如果是商业用途的，最好还是获取授权！

第一步：
首先使用 npm在你的项目中安装vue-highcharts

npm install vue-highcharts --save

由于vue-highcharts依赖于highcharts，我们还需要安装后者

npm install highcharts --save

第二步：

安装完成后，进入项目main.js进行配置：

import highcharts from 'highcharts'

引入以上两项之后，因为我们需要使用3d图表，还需要引入：

 import highcharts3d from 'highcharts/highcharts-3d'

调用3d图表：（注意这一点，一定要加上不然会报错）

highcharts3d(highcharts)

已经在vue中配置好highcharts。同时需要在package.json里面检查是不是有 当前插件的版本号。

我使用时：在package.json的“dependencies”里加版本号：“highcharts”："^9.3.1"

第三步：
新建一个饼图的子组件：

<template>
    <div class="container">
        <div :id="id" :option="option"></div>
    </div>
</template>

<script>
import HighCharts from 'highcharts'
export default {
    props: {
        id: {
            type: String
        },
            //option 是图表的配置数据
        option: {
            type: Object
        }
    },
    mounted() {
        HighCharts.chart(this.id, this.option)
    }
}
</script>

<style scoped>
/* 容器 */    
.container {
width: 1000px;
height: 550px;
}
</style>

在需要使用饼图的页面（父组件）里配置option数据:

<template>
    <div class="charts">
        <Pie :id="id" :option="option"></Pie>
    </div>
</template>

<script>
import Pie from '../components/Pie'
export default {
    components: {
        Pie,
    },
    data() {
        return {
            id: 'test',
            option: {
                credits:{
                    enabled: false, //去掉右下角的"https://highcharts.com"的所有权
                },
                label:{
                    style:{
                        fontWeight: 'normal'
                    }
                },
                color:['red','green','pink','blue','white'],
                chart: {
                    type: 'pie',//饼图
                    backgroundColor:'transparent',
                     options3d: {
                         enabled: true,//使用3d功能
                         alpha: 60,//延y轴向内的倾斜角度
                         beta: 0,   
                     },
                    spacingTop: -155, //调整饼图在页面中的位置
                },
                title: {
                    text: '测试用'//图表的标题文字，不显示标题的话属性值为null
                },
                subtitle: {
                    text: ''//副标题文字
                },
                tooltip:{//悬浮框中的文字
                    pointFormat:'{point.name}:<b> {point.y}({point.percentage:.2f}%)</b>',
                    headerFormat:'{series.name}<br>'
                },
                slicedOffset:20,//选中的时候有个滑动的效果
                plotOptions: {
                    pie: {
                        allowPointSelect: true,//每个扇块能否选中
                        cursor: 'pointer',//鼠标指针
                        depth: 35,//饼图的厚度
                        dataLabels: {
                            enabled: true,//是否显示饼图的线形tip
                            format:'{point.name}{point.percentage:.2f}%',//牵引线上的文字
                            style：{//样式调整
                                color: '#fff',
                                fontSize: '12'
                            }
                        },
                        events:{
                            click:funtion(e){
                                //绑定的事件+传参：我绑的事件pieClick
                                pieClick(e.point)
                            }
                        }
                    }
                },
                series: [
                {
                    type: 'pie',
                    name: '测试用1',//统一的前置词,非必须
                    data: [
                        ['测试1',12],//模块名和所占比，也可以{name: '测试1',y: 12}
                        ['测试2',23],
                        ['测试3',19],
                        ['测试4',29]
                    ]
                 }
                ]
            }
        }
    },

}
</script>

<style scoped>

</style>

附上官网网址：，图表主要组成 | Highcharts 使用教程