highcharts绘制3d饼状图

        let dataValue1=['香蕉', 8], ['猕猴桃', 3], ['桃子', 1], ['橘子', 6], ['苹果', 8], ['梨', 4], ['柑橘', 4], ['橙子', 1], ['葡萄', 1]
	    let option = {
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 60,
                    beta: 0
                },
                backgroundColor: 'none'
            },
            title: {
                floating: true,
                verticalAlign: 'middle',
                x: -50,
                useHTML: true,
                text: ''
            },
            tooltip: {
                pointFormat: '{point.percentage:.1f}%',
                style: {
                    textOutline: "0px 0px contrast",
                    fontSize: 14,
                    color: "#000",
                    fontFamily: "SourceHanSansCN-Normal"
                }
            },
            legend: {
                enabled: true,
                layout: 'vertical',
                verticalAlign: 'middle',
                align: 'right',
                useHTML: true,
                itemStyle: {
                    color: "#fff",
                    fontWeight: 'normal',
                    fontFamily: '宋体'
                },
            },
            colors: ['#76F3A5', '#0080F8', '#1B51FF', '#2A00FF', '#518DDF', '#FFD074', '#FFD75B', '#FF5168'],
            credits: {
                enabled: false //禁用版权url    此处不设置,会显示highecharts.com
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    // size: 240,
                    depth: 25, //饼图厚度
                    color: 'red',
                    center: ['50%', '55%'],
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: '',
                startAngle: 0, //调整饼图的角度   方向:顺时针
                dataLabels: {
                    enabled: true,
                    inside: false,
                    distance: '10%',
                    // format : '{point.name}{series.name}<br><span style="color:#FF8040">{point.y} </span>% ' ,
                    useHTML: true,
                },
                data: dataValue1
            }]
        };
        $('#zuozhongpie').highcharts(option);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue中使用Highcharts绘制3D饼图,首先需要在你的项目中安装vue-highcharts库,并在main.js中引入HighchartsHighcharts-3D模块。可以按照以下步骤进行操作: 1. 使用npm在你的项目中安装vue-highcharts库。 2. 在main.js中引入HighchartsHighcharts-3D模块: import highcharts from 'highcharts' import highcharts3d from 'highcharts/highcharts-3d' highcharts3d(highcharts) 3. 在Vue组件中使用vue-highcharts组件,并设置你的3D饼图的配置。 4. 参考上述的Vue教程来绘制3D饼图。 通过以上步骤,你就可以在Vue中使用Highcharts绘制3D饼图了。请确保你已经正确安装了依赖库并按照引用和引用提供的方法进行配置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [【highCharts绘制3d饼图】有、无高低差的3d饼图](https://blog.csdn.net/phhzhhh/article/details/125807211)[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: 50%"] - *3* [vue单页面中使用 highcharts 绘制3D饼图](https://blog.csdn.net/qq_46566911/article/details/121280786)[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: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值