highCharts动态渲染3d环形图
<template>
<div>
<div style="display: flex; height: 200px">
<div class="bar-title" style="width: 50%">
<div id="container" style="width: 100%; min-height:180px;float: left;" />
</div>
//min-height:180px;float: left; 防止环形图变大变小
</div>
</template>
<script>
//引用之前先npm install --save highcharts 然后直接引用需要的文件就可以了
import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
import HighchartsDrilldown from "highcharts/modules/drilldown";
import Highcharts3D from "highcharts/highcharts-3d";
import Highmaps from "highcharts/modules/map";
HighchartsMore(Highcharts);
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
Highmaps(Highcharts);
//环形图需要的动态数据js文件，这个就自己项目里的js替换就行
import { screen } from "@/api/daping1.js";
export default {
name: "screen1",
data() {
return {
data1: [
{
name: "",
data: [
["电力通信服务", 1],
["电网数字化转型支撑", 1],
["基础资源运营", 1],
],
},
],
};
},
created() {
this.getPie();
}，
methods: {
// 初始化 Highcharts 图表
moreChart() {
// if (this.chart) {
// this.chart.destroy();
// }
//颜色渐变效果添加
let color1 = ["#C6F9F9", "#BAF3FC", "#FFC700"] let color2 = ["#31FFB9", "#1ADBFB", "#FAF1D3"] Highcharts.getOptions().colors = Highcharts.map( Highcharts.getOptions().colors, function (color, index) { return { radialGradient: { cx: 0.5, cy: 0.3, r: 0.7},
stops: [ [0, color2[index]], [0.2, color2[index]], [1, color1[index]], // darken ],
this.chart = new Highcharts.Chart("container", {
//colors: ["#31FFB9", "#1ADBFB", "#FFC700"],有渐变就隐藏此代码
chart: {
type: "pie",
backgroundColor: "rgba(0,0,0,0)",
options3d: {
enabled: true,
alpha: 45, // 内旋转角度 从前后看 我理解为以x轴为基准的旋转
},
},
title: {
text: "",
},
tooltip: {
pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
},
plotOptions: {
pie: {
size: 130, // 设置饼图大小
innerSize: 40, //环形图大小
depth: 25, //饼图厚度
dataLabels: {
enabled: true,
style: {
textOutline: "none", // 解决文字重影问题
color: "#ffffff",
},
dataLabels: {
enabled: true,// 显示连线
format: "{point.name}",
},
},
},
},
credits: {
enabled: false,
},
//数据渲染，data在上面定义过了
series:this.data1,
});
});
},
getPie() {
screen().then((res) => {
if (res.code == 200) {
//this.data1[0]代表series，ysDltxfw代表接口返回的数据
this.data1[0].data[0][1] = parseFloat(res.data.ysDltxfw);
this.data1[0].data[1][1]= parseFloat(res.data.ysDwszh);
this.data1[0].data[2][1] = parseFloat(res.data.ysJczyyy);
}
//拿到数据重新渲染图
this.moreChart();
});
},
},
};
</script>