数据大屏可视化-highcharts-3D实心饼图
highcharts官网地址,HIGHCHARTS 图集引入npm install highcharts --save在main,js中// highcharts引入import HighchartsVue from 'vue-highcharts'import Highcharts from 'highcharts'import highcharts3d from 'highcharts/hig
·
highcharts官网地址,HIGHCHARTS 图集
引入npm install highcharts --save
在main.js中
// highcharts引入
import HighchartsVue from 'vue-highcharts'
import Highcharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
highcharts3d(Highcharts)
Vue.prototype.$HighCharts = Highcharts
在要用到的页面
<template>
<div>
<div class="bodyblock2">
<div id="pie1"></div>
</div>
</div>
</template>
import * as Highcharts from "highcharts";
export default {
data() {
return {
myChart: null,
option: {},
};
},
mounted() {
this.setPie();
},
watch: {
//观察option的变化
option: {
handler(newVal, oldVal) {
if (this.myChart) {
if (newVal) {
this.myChart.setOption(newVal);
} else {
this.myChart.setOption(oldVal);
}
}
},
deep: true, //对象内部属性的监听,关键。
},
},
methods: {
setPie() {
var each = Highcharts.each,
round = Math.round,
cos = Math.cos,
sin = Math.sin,
deg2rad = Math.deg2rad;
Highcharts.wrap(
Highcharts.seriesTypes.pie.prototype,
"translate",
function (proceed) {
proceed.apply(this, [].slice.call(arguments, 1));
// Do not do this if the chart is not 3D
if (!this.chart.is3d()) {
return;
}
var series = this,
chart = series.chart,
options = chart.options,
seriesOptions = series.options,
depth = seriesOptions.depth || 0,
options3d = options.chart.options3d,
alpha = options3d.alpha,
beta = options3d.beta,
z = seriesOptions.stacking
? (seriesOptions.stack || 0) * depth
: series._i * depth;
z += depth / 2;
if (seriesOptions.grouping !== false) {
z = 0;
}
each(series.data, function (point) {
var shapeArgs = point.shapeArgs,
angle;
point.shapeType = "arc3d";
var ran = point.options.h;
shapeArgs.z = z;
shapeArgs.depth = depth * 0.75 + ran;
shapeArgs.alpha = alpha;
shapeArgs.beta = beta;
shapeArgs.center = series.center;
shapeArgs.ran = ran;
angle = (shapeArgs.end + shapeArgs.start) / 2;
point.slicedTranslation = {
translateX: round(
cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
),
translateY: round(
sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
),
};
});
}
);
(function (H) {
H.wrap(Highcharts.SVGRenderer.prototype, "arc3dPath", function (proceed) {
// Run original proceed method
var ret = proceed.apply(this, [].slice.call(arguments, 1));
ret.zTop = (ret.zOut + 0.5) / 100;
return ret;
});
})(Highcharts);
this.option = {
// pane: {
// background: [{backgroundColor: 'red'}],
// },
tooltip:{
formatter:function(){
return this.point.name+':'+this.y;
},
style:{fontWeight:700}
},
title: {
text: null
},
credits: {
enabled: false
},
// style:{color:'red'},
chart: {
type: "pie",
animation: false,
events: {
load: function () {
var each = Highcharts.each,
points = this.series[0].points;
each(points, function (p, i) {
p.graphic.attr({
translateY: -p.shapeArgs.ran,
});
p.graphic.side1.attr({
translateY: -p.shapeArgs.ran,
});
p.graphic.side2.attr({
translateY: -p.shapeArgs.ran,
});
});
},
},
options3d: {
enabled: true,
alpha: 75,
beta: 0,
},
backgroundColor: 'transparent',
},
colors: ["#fe6265", "#58d6fc", "#ffcc00", "#3dbc6a"],
plotOptions: {
pie: {
allowPointSelect: true,
cursor: "pointer",
depth: 45, //饼图厚度
dataLabels: {
enabled: true, //是否显示饼图的线形tip
// format: " {point.percentage:.1f} %<br/>{point.name}",
formatter: function() {//设置图的字体颜色和饼状图保存一致
return (
'<p style="color:' +
this.color +
'">' +
this.point.name +
'</p><br><p style="color:' +
this.color +
'">' +
this.percentage.toFixed(1) +
"%</p>"
);
},
connectorColor: "white", //连接线颜色,默认是扇区颜色
distance: 10, // 数据标签与扇区距离
connectorPadding: 15, // 数据标签与连接线的距离
style: {
// fontFamily:'',
color:'#fff',
fontSize:'15px'
}
},
},
},
series: [
{
type: "pie",
name: "占比",
data: [
{
name: "电气工程",
y: 40,
h: 40,
},
{
name: "道路工程",
y: 15,
h: 20,
},
{
name: "交通工程",
y: 10,
h: 10,
},
{
name: "绿化工程",
y: 35,
h: 30,
},
],
},
],
};
this.$HighCharts.chart("pie1", this.option);
},
},
};
<style>
.gcgkblock .bodyblock2 {
width: 100%;
height: 100%;
}
#pie1 {
width: 560px;
height: 280px;
}
</style>
更多推荐
所有评论(0)