vue使用highcharts画3d饼图

最新推荐文章于 2023-10-12 11:14:10 发布

Tanjc518

最新推荐文章于 2023-10-12 11:14:10 发布

阅读量627

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Tanjc518/article/details/127576127

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

vue使用highcharts画3d饼图

安装

npm install --save highcharts

使用
在main.js里注册

// 引入charts
import highcharts from 'highcharts';
// 使用3d图还需要引入下面的
import highcharts3d from 'highcharts/highcharts-3d';
// 调用3d图表
highcharts3d(highcharts);

在组件

import highChart from 'highcharts'

<div class="pie" id="3dpie" :options="chartOptions"> </div>

let chartOptions = {
    return {
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                //设置观看的角度
                alpha: 40,
                beta: 0
            }
        },
        title: {
            text: ''
        },
        tooltip: {
            // pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            pointFormat: '<b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                innerSize: 35,
                allowPointSelect: true,
                cursor: 'pointer',
                colors: ["#60F8F8", "#90ED7D", "#F7A35C", "#8085E9", "#7CB5EC", '#cf6531', '#e66654', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#3a868B', '#FFDAB9', '#E6E6FA', '#e78899', '#0000CD', '#00CD00', '#556B2F', '#FFD700'],
                //设置饼图厚度
                depth: 15,
                dataLabels: {
                    enabled: true,
                    format: '{point.name} {point.percentage:.1f}%',
                    style: { "color": "contrast", "fontSize": "11px", "fontWeight": "bold", "textOutline": "1px 1px contrast" }
                },
                //饼图大小
                size: 90
            },
            line: {
                lineWidth: 2
            }
        },
        series: [{
            type: 'pie',
            name: '信息',
            data: [
                ['压伤', 45.0],
                ['亮边', 26.8],
                {
                    name: '冲压调机',
                    y: 12.8,
                    sliced: false,
                    selected: false
                },
                ['负荷调机', 8.5],
                ['钢片变形', 6.2],
            ]
        }],
        // 去掉右下角链接
        credits: {
            enabled: false
        },
    }
}
// 实例化
highChart.chart('3dpie', chartOptions);

.pie{
    width: 100%;
    height: 90%;
    background: #09184F;
}