vue3+heightchart实现3D饼图，echarts3D饼图，3D饼图引导线实现

附上 heightcharts 官网地址 Highcharts 演示 | Highchartshttps://www.hcharts.cn/demo/highcharts

首先需要下载一下 heightcharts执行命令

npm install highcharts --save

然后初始化：

<template><div id="container" style="width: 600px; height: 400px"></div>
</template><script>
import { reactive, toRefs, ref, onMounted } from 'vue'
import Highcharts from 'highcharts' //必须引入
import Highcharts3D from 'highcharts/highcharts-3d' // 3D必须有引入
Highcharts3D(Highcharts)
export default {setup() {let pie = ref('')let state = reactive({})onMounted(() => {let colors = ['rgba(36, 154, 163, 0.6)', 'rgba(0, 255, 0,0.6)', 'rgba(255, 0, 255,0.6)']Highcharts.setOptions({colors: colors})Highcharts.chart('container',{credits: {enabled: false, // 默认值，如果想去掉版权信息，设置为false即可text: 'www.hcharts.cn', // 显示的文字href: 'http://www.hcharts.cn', // 链接地址position: {// 位置设置align: 'left',x: 400,verticalAlign: 'bottom',y: -100},style: {// 样式设置cursor: 'pointer',color: 'red',fontSize: '30px'}},chart: {spacing: [40, 0, 40, 0],options3d: {enabled: true,alpha: 45}},title: {floating: true,text: '这里标题'},tooltip: {pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'},plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: true,format: '<b>{point.name}</b>: {point.percentage:.1f} %',style: {color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || '#fff'}},point: {// events: {//   mouseOver: function (e) {//     // 鼠标滑过时动态更新标题//     chart.setTitle({//       text: e.target.name + '\t' + e.target.y + ' %'//     })//   }// }},innerSize: 220,depth: 40}},series: [{type: 'pie',innerSize: '80%',name: '市场份额',data: [['IE', 26],['Safari', 18],['Opera', 16],['其他', 10]]}]},function (c) {// 图表初始化完毕后的会掉函数// 环形图圆心var centerY = c.series[0].center[1],titleHeight = parseInt(c.title.styles.fontSize)// 动态设置标题位置c.setTitle({y: centerY + titleHeight / 2})})})return {...toRefs(state),pie}}
}
</script><style lang="scss" scoped>
.pie {width: 100%;height: 100%;
}
</style>

如此你就得到了一个3D饼图

vue3+heightchart实现3D饼图，echarts3D饼图，3D饼图引导线实现相关推荐

echarts实现饼图阴影，改变饼图的颜色，改变引导线的颜色
一.实现效果如下: 二.需求分析: > 1.饼图阴影,就是在series中再加图层 > 2.引导线labelLine->normal->lineStyle > 3.改变饼 ...
matplotlib：为饼图或圆环图添加引导线
概述由于饼图/圆环图的饼块大小和饼块背景色影响,直接在饼块上添加注释或标签效果并不好,往往需要在饼块外添加标签,并在标签与饼块之间添加引导线.matplotlib没有提供直接绘制引导线的接口,需要自 ...
【MATLAB】进阶绘图 ( Pie Chart 饼图 | pie 函数 | 三维饼图 | pie3 函数 )
文章目录一.Pie Chart 饼图 1.pie 函数 2.pie3 函数 3.饼图示例一.Pie Chart 饼图 1.pie 函数 pie 函数文档 : https://ww2.mathwor ...
使用webgl(three.js)搭建3D智慧园区、3D大屏，3D楼宇，智慧灯杆三维展示，3D灯杆，web版3D,bim管理系统——第六课...
前言: 今年是建国70周年,爱国热情异常的高涨,为自己身在如此安全.蓬勃发展的国家深感自豪. 我们公司楼下为庆祝国庆,拉了这样的标语,每个人做好一件事,就组成了我们强大的祖国. 看到这句话,深有感触, ...
java jfreechart 饼图_JFreeChart 使用一饼图之高级特性
原文链接:http://www.cnblogs.com/jtmjx/archive/2013/04/23/jfreechart_advantage.html 本文主要讲解JFreeChart中饼图的一 ...
Python使用matplotlib进行3D可视化分析：3d柱状图、3d直方图、3d线框图、3d曲面图、3d翼面图(莫比乌斯环)
Python使用matplotlib进行3D可视化分析:3d柱状图.3d直方图.3d线框图.3d曲面图.3d翼面图(莫比乌斯环) 目录
R语言可视化：散点图、散点图和折线图（line charts）、3D散点图、旋转3D散点图、气泡图、corrgram包可视化相关性矩阵、马赛克图（ Mosaic plots）、hexbin、密度图
R语言可视化:散点图.散点图和折线图(line charts).3D散点图.旋转3D散点图.气泡图.corrgram包可视化相关性矩阵.马赛克图( Mosaic plots).hexbin.密度图目 ...
R语言使用persp函数绘制三维图像实战（3D）：自定义3D图、图像旋转、添加轴标签
R语言使用persp函数绘制三维图像实战(3D):自定义3D图.图像旋转.添加轴标签目录
注入游戏没有焦点_不戴眼镜看3D电影、玩3D游戏，这项技术能焕发端游市场第二春吗？...
在今年5月的华为2020全球分析师大会,提到"裸眼3D,如果这项技术能够实现,将会给人们带来革命性体验的提升,被应用在生活.娱乐以及医疗.教育等领域.届时,裸眼3D也有望开创出难以想象的新的 ...
python绘制3d图-Python绘制3D图形
3D图形在数据分析.数据建模.图形和图像处理等领域中都有着广泛的应用,下面将给大家介绍一下如何使用python进行3D图形的绘制,包括3D散点.3D表面.3D轮廓.3D直线(曲线)以及3D文字等的绘制 ...

vue3+heightchart实现3D饼图，echarts3D饼图，3D饼图引导线实现

vue3+heightchart实现3D饼图，echarts3D饼图，3D饼图引导线实现相关推荐

最新文章

热门文章