3d_0">在Vue中使用highCharts绘制3d饼图的方法
文章目录
参考： 在Vue中使用highCharts绘制3d饼图的方法
vuehighcharts_7">首先使用 npm在你的项目中安装vue-highcharts
npm install vue-highcharts --save
由于vue-highcharts依赖于highcharts，我们还需要安装后者
npm install highcharts --save
或者
yarn add highcharts --save
yarn add vue-highcharts --save
安装完成后，进入项目main.js进行配置：
import highcharts from 'highcharts'
import VueHighCharts from 'vue-highcharts'
引入以上两项之后，因为我们需要使用3d图表，还需要引入：
import highcharts3d from 'highcharts/highcharts-3d'
调用3d图表：
highcharts3d(highcharts)
OK，到此为止已经在vue中配置好highcharts,接下来根据API绘制一份3d饼图
3d_51">无高低差的3d饼图
新建一个饼图的组件：
<template>
<div class="container">
<div :id="id" :option="option"></div>
</div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
props: {
id: {
type: String
},
//option 是图表的配置数据
option: {
type: Object
}
},
mounted() {
HighCharts.chart(this.id, this.option)
}
}
</script>
<style scoped>
/* 容器 */
.container {
width: 1000px;
height: 550px;
}
</style>
在需要使用饼图的页面里配置option数据
<template>
<div class="charts">
<pie :id="id" :option="option"></pie>
</div>
</div>
</template>
<script>
import pie from '../components/pie'
import manes from '../components/list'
export default {
components: {
pie,
},
data() {
return {
id: 'test',
option: {
chart: {
type: 'pie',//饼图
options3d: {
enabled: true,//使用3d功能
alpha: 60,//延y轴向内的倾斜角度
beta: 0,
}
},
title: {
text: '测试用'//图表的标题文字
},
subtitle: {
text: ''//副标题文字
},
plotOptions: {
pie: {
allowPointSelect: true,//每个扇块能否选中
cursor: 'pointer',//鼠标指针
depth: 35,//饼图的厚度
dataLabels: {
enabled: true,//是否显示饼图的线形tip
}
}
},
series: [
{
type: 'pie',
name: '测试用1',//统一的前置词,非必须
data: [
['测试1',12],//模块名和所占比，也可以{name: '测试1',y: 12}
['测试2',23],
['测试3',19],
['测试4',29]
]
}
]
}
}
},
}
</script>
<style scoped>
</style>
3ditemhevents3d_160">推荐用这个：有高低差的3d饼图（item.h设一样的、events里面注释掉，也能变成无高低差的3d饼图）
<div class="rc4-chart" id="rc4-chart"></div>
import { highchartsPie } from './hightChart.js'
initRight4Chart() {
let pieData = []
let total = 0
const percent = {}
const data = [
{
area: '泉州',
value: '2767.6',
},
{
area: '福州',
value: '2894.67',
},
{
area: '南平',
value: '350.28',
},
{
area: '厦门',
value: '1767.71',
},
{
area: '宁德',
value: '460.56',
},
{
area: '漳州',
value: '1306.77',
},
{
area: '龙岩',
value: '582.58',
},
{
area: '莆田',
value: '502.8',
},
{
area: '三明',
value: '488.15',
},
]
//饼图
pieData = data.map((item, index) => {
item.name = item.area
item.y = item.value - ''
item.h = (index + 6) * 10
return item
})
highchartsPie('rc4-chart', pieData, '吨')
},
// 新增hightChart.js
import Highcharts from 'highcharts'
export function highchartsPie(id,pieData,unit) {
// 修改3d饼图绘制过程
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));
// 生成不同高度的3d饼图
Highcharts.chart(id, {
chart: {
type: 'pie',
animation: false,
backgroundColor: '#051723',
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
}
},
credits:{
enabled:false
},
title:{
align:'right',
text:'单位: t/h',
style: {
fontSize: 40,
color: '#fff',
},
},
lenged:{
align: 'left',
verticalAlign:'top',
x: 0,
y: 0
},
tooltip: {
pointFormat: '{point.name}: <b>{point.y}</b>',
},
colors: [
'#3adcb0',
'#FDCA2D',
'#1384F4',
'#ed9de8',
'#8ae48f',
],
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: false,
depth: 35,
dataLabels: {
distance: 60,
enabled: true,
formatter: function() {
return this.key+': <b>'+this.y+'</b><br/>'+ Highcharts.numberFormat(this .percentage,2)+'%'
},
style: {
fontSize: 35,
color: '#fff',
},
}
}
},
series: [{
type: 'pie',
name: '碳排放',
data: pieData
}]
});
}
