echarts3d饼图，环形图（包含透明效果）

效果图：

饼图：

环形图：

带透明度的环形图：

安装echarts

“echarts”:"^5.1.2"
“echarts-gl”:"^2.0.8"

import Vue from ‘vue’
import * as echarts from ‘echarts’
import ‘echarts-gl’ // 3d图表库

Vue.prototype.$echarts = echarts

.vue文件【bindListen方法可以提取到mixins里面，以供组件多次调用】

<template><div class="chart-container"><div class="chart" ref="chart"></div><!-- 底座背景 --><div class="bg"></div> </div>
</template><script>
import { getPie3D, getParametricEquation } from 'chart.js' //工具类js，页面路径自己修改const color = ['#005aff', '#f8b551']export default {name: 'chart',data () {return {optionData: [{name: '启用电梯',value: 176},{name: '停用电梯',value: 288}],statusChart:null,option:{}}},created () {this.setLabel()},mounted () {this.initChart()//根据窗口变化自动调节图表大小const that = thiswindow.onresize = function () {that.changeSize()}},methods: {// 初始化label样式setLabel () {this.optionData.forEach((item, index) => {item.itemStyle = {color: color[index]}item.label = {normal: {show: true,color: color[index],formatter: ['{b|{b}}','{c|{c}}{b|台}','{d|{d}%}'].join('
'), // 用
来换行rich: {b: {color: '#fff',lineHeight: 25,align: 'left'},c: {fontSize: 22,color: '#fff',textShadowColor: '#1c90a6',textShadowOffsetX: 0,textShadowOffsetY: 2,textShadowBlur: 5},d: {color: color[index],align: 'left'}}}}item.labelLine = {normal: {lineStyle: {width: 1,color: 'rgba(255,255,255,0.7)'}}}})},// 图表初始化initChart () {this.statusChart = this.$echarts.init(this.$refs.chart)// 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细this.option = getPie3D(this.optionData, 0.8, 240, 28, 26, 0.5)this.statusChart.setOption(this.option)// 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOptionthis.option.series.push({name: '电梯状态', //自己根据场景修改backgroundColor: 'transparent',type: 'pie',label: {opacity: 1,fontSize: 13,lineHeight: 20},startAngle: -40, // 起始角度，支持范围[0, 360]。clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式radius: ['20%', '50%'],center: ['50%', '50%'],data: this.optionData,itemStyle: {opacity: 0  //这里必须是0，不然2d的图会覆盖在表面}})this.statusChart.setOption(this.option)this.bindListen(this.statusChart)},// 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。// optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opitonbindListen (myChart, optionName = 'option') {let selectedIndex = ''let hoveredIndex = ''// 监听点击事件，实现选中效果（单选）myChart.on('click', (params) => {// 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。const isSelected = !this[optionName].series[params.seriesIndex].pieStatus.selectedconst isHovered =this[optionName].series[params.seriesIndex].pieStatus.hoveredconst k = this[optionName].series[params.seriesIndex].pieStatus.kconst startRatio =this[optionName].series[params.seriesIndex].pieData.startRatioconst endRatio =this[optionName].series[params.seriesIndex].pieData.endRatio// 如果之前选中过其他扇形，将其取消选中（对 option 更新）if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {this[optionName].series[selectedIndex].parametricEquation = getParametricEquation(this[optionName].series[selectedIndex].pieData.startRatio,this[optionName].series[selectedIndex].pieData.endRatio,false,false,k,this[optionName].series[selectedIndex].pieData.value)this[optionName].series[selectedIndex].pieStatus.selected = false}// 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）this[optionName].series[params.seriesIndex].parametricEquation = getParametricEquation(startRatio,endRatio,isSelected,isHovered,k,this[optionName].series[params.seriesIndex].pieData.value)this[optionName].series[params.seriesIndex].pieStatus.selected = isSelected// 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndexselectedIndex = isSelected ? params.seriesIndex : null// 使用更新后的 option，渲染图表myChart.setOption(this[optionName])})// 监听 mouseover，近似实现高亮（放大）效果myChart.on('mouseover', (params) => {// 准备重新渲染扇形所需的参数let isSelectedlet isHoveredlet startRatiolet endRatiolet k// 如果触发 mouseover 的扇形当前已高亮，则不做操作if (hoveredIndex === params.seriesIndex) {// 否则进行高亮及必要的取消高亮操作} else {// 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）if (hoveredIndex !== '') {// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。isSelected = this[optionName].series[hoveredIndex].pieStatus.selectedisHovered = falsestartRatio = this[optionName].series[hoveredIndex].pieData.startRatioendRatio = this[optionName].series[hoveredIndex].pieData.endRatiok = this[optionName].series[hoveredIndex].pieStatus.k// 对当前点击的扇形，执行取消高亮操作（对 option 更新）this[optionName].series[hoveredIndex].parametricEquation = getParametricEquation(startRatio,endRatio,isSelected,isHovered,k,this[optionName].series[hoveredIndex].pieData.value)this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空hoveredIndex = ''}// 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）if (params.seriesName !== 'mouseoutSeries' &&params.seriesName !== 'pie2d') {// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。isSelected =this[optionName].series[params.seriesIndex].pieStatus.selectedisHovered = truestartRatio =this[optionName].series[params.seriesIndex].pieData.startRatioendRatio = this[optionName].series[params.seriesIndex].pieData.endRatiok = this[optionName].series[params.seriesIndex].pieStatus.k// 对当前点击的扇形，执行高亮操作（对 option 更新）this[optionName].series[params.seriesIndex].parametricEquation = getParametricEquation(startRatio,endRatio,isSelected,isHovered,k,this[optionName].series[params.seriesIndex].pieData.value + 60)this[optionName].series[params.seriesIndex].pieStatus.hovered = isHovered// 记录上次高亮的扇形对应的系列号 seriesIndexhoveredIndex = params.seriesIndex}// 使用更新后的 option，渲染图表myChart.setOption(this[optionName])}})// 修正取消高亮失败的 bugmyChart.on('globalout', () => {// 准备重新渲染扇形所需的参数let isSelectedlet isHoveredlet startRatiolet endRatiolet kif (hoveredIndex !== '') {// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。isSelected = this[optionName].series[hoveredIndex].pieStatus.selectedisHovered = falsek = this[optionName].series[hoveredIndex].pieStatus.kstartRatio = this[optionName].series[hoveredIndex].pieData.startRatioendRatio = this[optionName].series[hoveredIndex].pieData.endRatio// 对当前点击的扇形，执行取消高亮操作（对 option 更新）this[optionName].series[hoveredIndex].parametricEquation = getParametricEquation(startRatio,endRatio,isSelected,isHovered,k,this[optionName].series[hoveredIndex].pieData.value)this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空hoveredIndex = ''}// 使用更新后的 option，渲染图表myChart.setOption(this[optionName])})},// 自适应宽高changeSize () {this.statusChart.resize()}}
}
</script><style lang='less' scoped>
.chart-container {position: relative;width: 100%;height: 100%;.chart,.bg {width: 100%;height: 100%;}.bg {position: absolute;bottom: 50px;left: 50%;z-index: -1;width: 180px;height: 73px;background: no-repeat center;background-image: url('https://ks3-cn-beijing.ksyun.com/sxjg-elevator/datav-platform-2.0/images/chart_opacity_bg.png');background-size: 100% 100%;transform: translateX(-50%);}
}
</style>

chart.js

/*** 绘制3d图* @param pieData 总数据* @param internalDiameterRatio:透明的空心占比* @param distance 视角到主体的距离* @param alpha 旋转角度* @param pieHeight 立体的高度* @param opacity 饼或者环的透明度*/
const getPie3D = (pieData, internalDiameterRatio, distance, alpha, pieHeight, opacity = 1) => {const series = []let sumValue = 0let startValue = 0let endValue = 0let legendData = []let legendBfb = []const k = 1 - internalDiameterRatiopieData.sort((a, b) => {return b.value - a.value})// 为每一个饼图数据，生成一个 series-surface 配置for (let i = 0; i < pieData.length; i++) {sumValue += pieData[i].valueconst seriesItem = {name:typeof pieData[i].name === 'undefined'? `series${i}`: pieData[i].name,type: 'surface',parametric: true,wireframe: {show: false},pieData: pieData[i],pieStatus: {selected: false,hovered: false,k: k},center: ['10%', '50%']}if (typeof pieData[i].itemStyle !== 'undefined') {const itemStyle = {}itemStyle.color =typeof pieData[i].itemStyle.color !== 'undefined'? pieData[i].itemStyle.color: opacityitemStyle.opacity =typeof pieData[i].itemStyle.opacity !== 'undefined'? pieData[i].itemStyle.opacity: opacityseriesItem.itemStyle = itemStyle}series.push(seriesItem)}// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。legendData = []legendBfb = []for (let i = 0; i < series.length; i++) {endValue = startValue + series[i].pieData.valueseries[i].pieData.startRatio = startValue / sumValueseries[i].pieData.endRatio = endValue / sumValueseries[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio,series[i].pieData.endRatio,false,false,k,series[i].pieData.value)startValue = endValueconst bfb = fomatFloat(series[i].pieData.value / sumValue, 4)legendData.push({name: series[i].name,value: bfb})legendBfb.push({name: series[i].name,value: bfb})}const boxHeight = getHeight3D(series, pieHeight) // 通过pieHeight设定3d饼/环的高度，单位是px// 准备待返回的配置项，把准备好的 legendData、series 传入。const option = {legend: {show: false,data: legendData,orient: 'vertical',left: 10,top: 10,itemGap: 10,textStyle: {color: '#A1E2FF'},icon: 'circle',formatter: function (param) {const item = legendBfb.filter(item => item.name === param)[0]const bfs = fomatFloat(item.value * 100, 2) + '%'return `${item.name}  ${bfs}`}},labelLine: {show: true,lineStyle: {color: '#fff'}},label: {show: true,position: 'outside',formatter: '{b}
{c} {d}%'},tooltip: {backgroundColor: '#033b77',borderColor: '#21f2c4',textStyle: {color: '#fff',fontSize: 13},formatter: params => {if (params.seriesName !== 'mouseoutSeries' &&params.seriesName !== 'pie2d') {const bfb = ((option.series[params.seriesIndex].pieData.endRatio -option.series[params.seriesIndex].pieData.startRatio) *100).toFixed(2)return (`${params.seriesName}<br/>` +`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +`${bfb}%`)}}},xAxis3D: {min: -1,max: 1},yAxis3D: {min: -1,max: 1},zAxis3D: {min: -1,max: 1},grid3D: {show: false,boxHeight: boxHeight, // 圆环的高度viewControl: {// 3d效果可以放大、旋转等，请自己去查看官方配置alpha, // 角度distance, // 调整视角到主体的距离，类似调整zoomrotateSensitivity: 0, // 设置为0无法旋转zoomSensitivity: 0, // 设置为0无法缩放panSensitivity: 0, // 设置为0无法平移autoRotate: false // 自动旋转}},series: series}return option
}/*** 生成扇形的曲面参数方程，用于 series-surface.parametricEquation*/
const getParametricEquation = (startRatio, endRatio, isSelected, isHovered, k, h) => {// 计算const midRatio = (startRatio + endRatio) / 2const startRadian = startRatio * Math.PI * 2const endRadian = endRatio * Math.PI * 2const midRadian = midRatio * Math.PI * 2// 如果只有一个扇形，则不实现选中效果。if (startRatio === 0 && endRatio === 1) {isSelected = false}// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）k = typeof k !== 'undefined' ? k : 1 / 3// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0// 计算高亮效果的放大比例（未高亮，则比例为 1）const hoverRate = isHovered ? 1.05 : 1// 返回曲面参数方程return {u: {min: -Math.PI,max: Math.PI * 3,step: Math.PI / 32},v: {min: 0,max: Math.PI * 2,step: Math.PI / 20},x: function (u, v) {if (u < startRadian) {return (offsetX +Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate)}if (u > endRadian) {return (offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate)}return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate},y: function (u, v) {if (u < startRadian) {return (offsetY +Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate)}if (u > endRadian) {return (offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate)}return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate},z: function (u, v) {if (u < -Math.PI * 0.5) {return Math.sin(u)}if (u > Math.PI * 2.5) {return Math.sin(u) * h * 0.1}return Math.sin(v) > 0 ? 1 * h * 0.1 : -1}}
}/*** 获取3d丙图的最高扇区的高度*/
const getHeight3D = (series, height) => {series.sort((a, b) => {return b.pieData.value - a.pieData.value})return (height * 25) / series[0].pieData.value
}/*** 格式化浮点数*/
const fomatFloat = (num, n) => {let f = parseFloat(num)if (isNaN(f)) {return false}f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂let s = f.toString()let rs = s.indexOf('.')// 判定如果是整数，增加小数点再补0if (rs < 0) {rs = s.lengths += '.'}while (s.length <= rs + n) {s += '0'}return s
}export { getPie3D, getParametricEquation }

参考文章：https://www.cnblogs.com/KaypoGeng/p/14338434.html(我就是在这个基础上优化的)

总结

写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于前端开发的学习思路及方向。从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。

由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的点击我的GitHub免费获取。
还有免费的高级web全套视频教程前端架构 H5 vue node 小程序视频+资料+代码+面试题！

全方面的web前端进阶实践技术资料，并且还有技术大牛一起讨论交流解决问题。

echarts3d饼图，环形图（包含透明效果）相关推荐

chart.js使用学习——饼图/环形图
饼图/环形图能够展示数据集中各项的大小与各项总和的比例.chart.js中创建饼图/环形图,只需在chart构造函数中指定图表类型为pie/doughnut即可. 基本用法创建饼图/环形图主 ...
Echarts饼图,环形图,鼠标触碰后取消默认放大效果
项目场景: 项目场景:使用ecahrts 做一个环形图,但是鼠标触碰图例会有放大效果,根据高保真这个效果需要取消问题描述问题1我想把这个放大效果取消,让后翻阅echarts的文档让后发现 let ...
java 饼图框架_Java 在 Excel 中创建饼图/环形图
import com.spire.xls.*;importcom.spire.xls.charts.ChartSerie;importcom.spire.xls.charts.ChartSeries; ...
如何用pyecharts绘制柱状图，条形图，折线图，饼图,环形图，散点图
简介 pyecharts是一个由百度开源的数据可视化,凭借着良好的互交性,精巧的图表设计,得到了众多开发者的认可,而python是一门富有表达力的语言,很适合用于数据处理.当数据分析遇上数据可视化时, ...
java excel 饼图_Java 在 Excel 中创建饼图/环形图
饼图是Excel中常见的一种圆饼形图表工具,它能够直接以图形的方式展现各个组成部分在整体中所占的比例,从而帮助我们更加快速直观的去分析和理解抽象的数据.而环形图则是饼图的一种变形,在视觉上,环形图去掉 ...
java调用excel在页面生成饼状图_Java 在 Excel 中创建饼图/环形图
饼图是 Excel中常见的一种圆饼形图表工具 ,它能够直接以图形的方式展现各个组成部分在整体中所占的比例,从而帮助我们更加快速直观的去分析和理解抽象的数据.而环形图则是饼图的一种 ...
echars 饼图环形图组件修改自定义图例重新渲染显示对应颜色对应区域
如图产品有个需求是要做一个环形图点击图例显示具体数字但图例加起来是超过百分百的如图一个范围内有男有女有丑逼点击男的显示男的点击女的显示女的并且显示占总数的百分比并且鼠标悬浮上去显示的 ...
echarts 饼图/环形图鼠标经过显示文本标签图例icon
文章目录鼠标经过显示文本标签效果关键部分图例 icon 效果关键部分完整实现鼠标经过显示文本标签效果关键部分 label: { // 饼图图形上的文本标签normal: { // ...
tips:使用echarts构建一个半圆环形图
前言大名鼎鼎的echarts中有一些有趣的图表,其中饼图(pie)可以衍生出南丁格尔图(玫瑰图),而改变饼图的内外半径又可以使饼图变成一个圆环图,于是问题来了,怎么生成一个半圆形的圆环图呢?首先我们 ...

echarts3d饼图，环形图（包含透明效果）

总结

echarts3d饼图，环形图（包含透明效果）相关推荐

最新文章

热门文章