下载依赖
npm install highcharts -S
main.js 引入依赖
import highcharts from "highcharts";
import highcharts3d from "highcharts/highcharts-3d";
highcharts3d(highcharts);
使用页面
allData.questionsCount =[{
name:'占比1',
y:'50',
rate:'50%',
},
{
name:'占比2',
y:'50',
rate:'50%',
},
]
import HighCharts from "highcharts";
<template>
<div id="pie1"></div>
</template>
const init = () => {
// 图表配置
var options = {
chart: {
type: "pie",
options3d: {
enabled: true,
alpha: 45,
beta: 0,
},
backgroundColor: "transparent",
},
title: {
style: {
color: "transparent",
},
},
credits: {
//关闭版权信息的标签
enabled: false,
},
tooltip: {
backgroundColor: "#F5F8FA",
borderColor: "transparent",
formatter: function () {
var s =
this.point.options.name +
":" +
this.point.options.y;
return s;
},
animation: true, // 是否启用动画效果
style: {
// 文字内容相关样式\
fontSize: "14px",
fontFamily: "Alibaba PuHuiTi",
color: "#666666",
},
},
plotOptions: {
pie: {
size: "100%",
allowPointSelect: true,
cursor: "pointer",
depth: 50,
showInLegend: false,
dataLabels: {
enabled: true,
style: {
color: "rgba(93, 245, 255, 1)",
fontSize: "12px",
fontWeight: "500",
},
},
},
},
series: [
{
type: "pie",
name: "占比",
data: allData.questionsCount,
colors: ["#0ebd92", "#3f9f30", "#87aecb"],
center: ["50%", "30%"],
},
],
};
// 图表初始化函数
allData.chart = HighCharts.chart("pie1", options);
window.addEventListener("resize", resizeTheChart);
};