highcharts 3D饼图
highcharts 3D饼图在vue中的应用!
·
详细介绍highcharts在vue中的使用和配置方法。首先需要说明的是这个插件并不是开源的,如果是商业用途的,最好还是获取授权!
第一步:
首先使用 npm在你的项目中安装vue-highcharts
npm install vue-highcharts --save
由于vue-highcharts依赖于highcharts,我们还需要安装后者
npm install highcharts --save
第二步:
安装完成后,进入项目main.js进行配置:
import highcharts from 'highcharts'
引入以上两项之后,因为我们需要使用3d图表,还需要引入:
import highcharts3d from 'highcharts/highcharts-3d'
调用3d图表: (注意这一点,一定要加上不然会报错)
highcharts3d(highcharts)
已经在vue中配置好highcharts。同时需要在package.json里面检查是不是有 当前插件的版本号。
我使用时:在package.json的“dependencies”里加版本号:“highcharts”:"^9.3.1"
第三步:
新建一个饼图的子组件:
<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>
</template>
<script>
import Pie from '../components/Pie'
export default {
components: {
Pie,
},
data() {
return {
id: 'test',
option: {
credits:{
enabled: false, //去掉右下角的"https://highcharts.com"的所有权
},
label:{
style:{
fontWeight: 'normal'
}
},
color:['red','green','pink','blue','white'],
chart: {
type: 'pie',//饼图
backgroundColor:'transparent',
options3d: {
enabled: true,//使用3d功能
alpha: 60,//延y轴向内的倾斜角度
beta: 0,
},
spacingTop: -155, //调整饼图在页面中的位置
},
title: {
text: '测试用'//图表的标题文字,不显示标题的话属性值为null
},
subtitle: {
text: ''//副标题文字
},
tooltip:{//悬浮框中的文字
pointFormat:'{point.name}:<b> {point.y}({point.percentage:.2f}%)</b>',
headerFormat:'{series.name}<br>'
},
slicedOffset:20,//选中的时候有个滑动的效果
plotOptions: {
pie: {
allowPointSelect: true,//每个扇块能否选中
cursor: 'pointer',//鼠标指针
depth: 35,//饼图的厚度
dataLabels: {
enabled: true,//是否显示饼图的线形tip
format:'{point.name}{point.percentage:.2f}%',//牵引线上的文字
style:{//样式调整
color: '#fff',
fontSize: '12'
}
},
events:{
click:funtion(e){
//绑定的事件+传参:我绑的事件pieClick
pieClick(e.point)
}
}
}
},
series: [
{
type: 'pie',
name: '测试用1',//统一的前置词,非必须
data: [
['测试1',12],//模块名和所占比,也可以{name: '测试1',y: 12}
['测试2',23],
['测试3',19],
['测试4',29]
]
}
]
}
}
},
}
</script>
<style scoped>
</style>
附上官网网址:,图表主要组成 | Highcharts 使用教程
若当前的饼图无数据,也就是series里面的data为空,会出现一个大的圆圈。可以通过浏览器的elements部分定位到圆圈部分。利用class的类名,设置属性display:none,这样比较美观一点。
如果饼图默认的颜色不好看,也可以调整颜色。背景也可以调整。
改天试试桑基图!!!O(∩_∩)O哈哈~┏(^0^)┛白白
更多推荐
已为社区贡献11条内容
所有评论(0)