highcharts 3d图表在vue中的使用

今天学vue了吗

已于 2024-07-09 16:14:34 修改

阅读量741

点赞数 8

分类专栏：前端那些事儿文章标签：前端 vue.js

于 2024-07-09 16:02:56 首次发布

本文链接：https://blog.csdn.net/qq_41148615/article/details/140297922

版权

前端那些事儿专栏收录该内容

2 篇文章

订阅专栏

在这里插入图片描述

vue中使用highcharts绘制3d图的一些坑

入职第二周，做一些简单的页面。使用到了3d饼图，echarts没有提供3d图标，因此我使用了highcharts绘制3d图标。

1.安装highcharts(最好不要安装最新版本，容易报错。我安装的是7.2.2)


npm install highcharts --save;

2.在main.js中引入

import Highcharts from 'highcharts'
import Highcharts3d from 'highcharts/highcharts-3d'
Highcharts3d(Highcharts)

3.在vue中使用

import HighCharts from 'highcharts
<script>
	let option = {
            chart: {
                backgroundColor: "none",
                type: "pie", //饼图
                margin: [0, 0, 0, 50],
                options3d: {
                    enabled: true, //使用3d功能
                    alpha: 30, //延y轴向内的倾斜角度
                    beta: 0,
                },
            },
            title: {
                    text: "",
                },
            plotOptions: {
                pie: {
                    allowPointSelect: true, //每个扇块能否选中
                    cursor: "pointer", //鼠标指针
                    depth: 20, //饼图的厚度
                    showInLegend: false, // 是否显示图例
                    dataLabels: {       //是否显示指示线
                        enabled: false
                    },
                    size: 100, // 外圈直径大小
                    innerSize: 55, // 内圈直径大小
                    center: ["0", "50%"],
                    events: {
                    //点击事件
                    click: () => {},
                    },
                },
            },
            legend: {    //图例信息
                align: "right", //水平方向位置
                verticalAlign: "top", //垂直方向位置
                layout: "vertical",
                symbolPadding: 12,
                symbolWidth: 20,
                symbolHeight: 12,
                symbolRadius: 0,
                x: -100,          //x,y设置图例位置
                y: 10,
                top:'20%',
                itemStyle: {
                    color: "#ffff",
                    fontSize: 14,
                },
            },
            credits: {
                enabled: false, // 禁用版权信息
                },
        
            series: [
                {
                    type: "pie",
                    name: "", //统一的前置词,非必须
                    data: processedData,    
                    radius: ['30%', '70%'],
                    label:{
                        show:false
                    },
                    
                },
            ],
  };
  HighCharts.chart(this.$refs.echart, option);
</script>

其中，series数据列中的data类型有限制。第一种为一维数组，第二种为二维数组，第三种为key-value对象集合。第三种数据类型需要进行处理，将字段key-value调整为key-y（data中数值的键名必须为y才可以显示图标，否则不显示）

					{
                        name: 'PCS-9559',
                        y: 111
                    },

总结

highcharts在vue中的应用