Vue3 highCharts 3D

最新推荐文章于 2025-11-25 09:25:05 发布

原创最新推荐文章于 2025-11-25 09:25:05 发布 · 983 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #npm #前端

该文章介绍了如何在Vue项目中安装并使用Highcharts和Highcharts-3d库来创建3D饼图，包括设置图表选项如类型、颜色、倾斜角度、数据标签等，以及自定义图例和数据。

第一步：安装

npm install highcharts --save

npm install highcharts-3d

npm install highcharts-vue

第二步：引入

import { Chart } from 'highcharts-vue';

import Highcharts from 'highcharts';

import Highcharts3d from 'highcharts/highcharts-3d';

第三步：使用

<template>
  <div class="absolute-left-right-top-bottom charts-main">
    <div class="content">
      <Chart :options="chartOptions1" class="content-pic" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { Chart } from 'highcharts-vue';
  import Highcharts from 'highcharts';
  import Highcharts3d from 'highcharts/highcharts-3d';

  Highcharts3d(Highcharts);
  const chartOptions1 = {
    chart: {
		type: 'pie',//饼图
		backgroundColor: 'rgba(0, 0, 0, 0)', //去掉白色背景
		options3d: {
			enabled: true,//使用3d功能
			alpha: 55,//延y轴向内的倾斜角度，仰视角度
			beta: 0//图表视图旋转角度，倾斜角度
		}
	},
	title: {
		text: '2014年某网站不同浏览器访问量占比'//图表的标题文字 这个得加上，不然头部会默认有字，可默认为‘’
	},
	subtitle: {
		text: '', //副标题文字
	},
	tooltip: {
		pointFormat: '{series.name}'//只显示扇区名称
		//pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'//显示扇区名称和百分比
	},
	// 去掉右底部的文字
	credits: {
		enabled: false,
	},
	// 更改图例文字颜色
	legend: {
		itemStyle: { color: '#000' },
		backgroundColor: 'rgba(0, 0, 0, 0)', //去掉背景
	},
	plotOptions: {
		pie: {
			// borderColor:'orange',//在2d中有效果，3d没用
			// borderWidth: 3,//在2d中有效果，3d没用
			//innerSize: 100,//配置这个属性，就变成了环形图
			allowPointSelect: true,//每个扇块能否选中
			cursor: 'pointer',//鼠标指针
			depth: 35,//饼图的厚度
			//colors:[],//每个饼的颜色，也可以放在series的data中,不设置时是系统自动填充的颜色
			showInLegend: true, //显示图例
			slicedOffset:30,// 突出间距
			dataLabels: {
				enabled: true,//是否显示饼图的线形tip
				format: '{point.name}',//显示系列名称 //'{point.y}':显示数值
				style: {
					//样式配置
					textOutline: 'true', //去掉文字白边
					color: '#000',
					fontSize: 11,
				},
			}
		}
	},
	series: [{
		type: 'pie',
		name: '',//tooltip上显示的系列名称
		//data的顺序：按业务等级排序，颜色是固定顺序；如果按y值排序，颜色根据值来判断
		data: [
			['Firefox',   45.0],
			['IE',       26.8],
			{
				name: 'Chrome',
				y: 12.8,
				sliced: true,//饼图 突出 Chrome项
				selected: true,
				color:'orange'
			},
			['Safari',    8.5],
			['Opera',     6.2],
			['Others',   0.7]
		]
	}]
    };
</script>

<style>
  .highcharts-container {
    width: 600px;
    height: 400px;
    border: 1px solid #ddd;
    margin: auto;
  }
</style>