因为目前就以本人的知识储量,echarts实现3d图相当有难度,所以使用Highcharts实现,在网上看了一些,记录一下流程。Highcharts文档:https://www.highcharts.com.cn/docs/install-from-npm
1、安装
npm install highcharts --save
main.js
引用highcharts3d,才会使图表变成3d
import HighchartsVue from 'highcharts-vue'
import highcharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
Vue.use(HighchartsVue)
highcharts3d(highcharts)
2、使用
1)、创建一个vue组件容器(也可以按照文档上的来)
<template>
<div :id="id" :option="option"> </div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
props: {
id: {
type: String
},
//option 是图表的配置数据
option: {
type: Object
}
},
watch:{
option(){
HighCharts.chart(this.id, this.option)
}
},
mounted() {
}
}
</script>
<style lang="scss" scoped>
/* 容器 */
.container {
width: 100%;
height: 100%;
}
</style>
2)、使用
html:
<echart style="
width: 6.88rem;
height: calc(50.3vh - 0.41rem)"
:id="'chart1'" :option="option">
</echart>
js:
data() {
return {
option: {},
};
},
methods:{
getcsda() {
let message = [
{
//模块名和所占比,也可以{name: '测试1',y: 12}
name: "测试1",
y: 30,
sliced: true,
selected: true,
},
{
name: "测试2",
y: 23,
},
{
name: "测试3",
y: 19,
},
{
name: "测试4",
y: 29,
},
];
this.option = {
chart: {
type: "pie", //饼图
options3d: {
enabled: true, //使用3d功能
alpha: 60, //延y轴向内的倾斜角度
beta: 0,
},
},
credits: {
enabled: false,
},
title: {
text: "", //图表的标题文字
},
subtitle: {
text: "", //副标题文字
},
colors: ["#FF6A66", "#34B862", "#F5A623", "#738EFF"],
plotOptions: {
pie: {
allowPointSelect: true, //每个扇块能否选中
cursor: "pointer", //鼠标指针
depth: 60, //饼图的厚度
dataLabels: {
enabled: true, //是否显示饼图的线形tip
useHTML: true, //使用formatter内的标签和样式
distance: 50,
formatter: function () {
//this 为当前的点(扇区)对象,可以通过 console.log(this) 来查看详细信息
return (
'<p style="font-size: 0.36rem;margin-top: -0.3rem ;font-family: DINCondensed, DINCondensed-Bold;font-weight: 700;color: ' +
this.point.color +
'">' +
this.percentage.toFixed(1) +
"%</p></div>" +
'<div><p style="font-size: 0.16rem;font-weight: 500;font-family: PingFangSC, PingFangSC-Medium;color: rgba(0,0,0,0.50);">' +
this.point.name +
"</p>"
);
},
},
slicedOffset: 40,
},
},
series: [
{
type: "pie",
name: "处室档案统计", //统一的前置词,非必须
data: message,
},
],
};
},
}