数据大屏可视化-highcharts-3D实心饼图

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 3Dif (!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 methodvar 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>

数据大屏可视化-highcharts-3D实心饼图相关推荐

数据大屏可视化2-超全的基础图形模板（基础模版）
内容整理于网络,因为忘了之前是从那几篇文章中整理的了,所以转载的连接不知道填啥,如果作者有看到的话,可以联系下我,谢谢注意:所有带有import random的都是生成随机数展示的,如果有需要研究对 ...
数据大屏可视化展示系统有什么作用
数据大屏可视化展示系统指的是用在大数据领域前端实时显示的显示屏,这在当前数字化经济兴起的今天越来越普及,比如一些企业的展厅或者控制室都会打造一个显示大数据平台用来展示企业的各种数据,帮助管理人员分析各 ...
前端基础第二天项目大数据大屏可视化项目
大数据大屏可视化项目 01-项目介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出.我们引 ...
思迈特软件Smartbi：如何快速打造数据大屏可视化展示系统
数据大屏可视化展示系统的定义数据大屏可视化展示系统指的是用在大数据领域前端实时显示的显示屏,这在当前数字化经济兴起的今天越来越普及,比如一些企业的展厅或者控制室都会打造一个显示大数据平台用来展示企业 ...
大屏数据可视化源码_AxureBI数据大屏可视化原型设计软件
产品名称:70套BI数据大屏可视化Axure RP原型设计软件软件版本: Axure 8,Axure 9(兼容) 作品类型: BI数据大屏可视化Axure原型文件类型: .rp (可通过 Axur ...
一个基于Python数据大屏可视化开源项目
‍‍ 今天给大家介绍一个开源数据大屏可视化工具. 项目简介这是一个基于Python开发的,结构简单的项目.可通过配置Json的数据,实现数据报表大屏显示. 优点:代码清晰.结构简单.配置Json数据 ...
基于Vue的数据可视化设计框架，数据大屏可视化编辑器
开发文档(★★★★★) 请访问 https://lizhensheng.github.io/vue-data-view/ 完整代码下载地址:基于Vue的数据可视化设计框架,数据大屏可视化编辑器简介 ...
组态+数据大屏可视化
系统演示地址:http://www.kshsoft.com 测试用户:test1 888888 图元组件管理可以进行可进行图元组件维护,支持svg.gif.jpge.png等图片格式及自定义图元格式 ...
数聚易视重磅推出，助力企业级数据大屏可视化
数字化转型趋势下,以大屏为主要载体的数据可视化需求日益增加.大屏给人以震撼的视觉冲击,呈现直观丰富的信息,有效帮助管理或业务人员决策.判断.发现问题.诊断问题,已经成为数字化管理中不可或缺的场景之一. ...
【可视化开发】数据大屏可视化技术汇总
由于工作原因,需要用到一些大屏可视化技术,于是通过网上整理.自我学习等多途径,汇总了一份大屏可视化技术的思维导图,如下: 这里主要汇总的是: 大屏可视化技术! 大屏可视化技术! 大屏可视化技术! 重要 ...

数据大屏可视化-highcharts-3D实心饼图

数据大屏可视化-highcharts-3D实心饼图相关推荐

最新文章

热门文章