Vue3 highCharts 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>

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值