第一步:安装
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>