阅读量:0
使用 ECharts 绘制3D饼图
在数据可视化中，饼图是表达数据占比信息的常见方式。ECharts 作为一个强大的数据可视化库，除了标准的二维饼图，也支持更加生动的三维饼图绘制。本文将指导你如何使用 ECharts 来创建一个3D饼图，提升你的数据展示效果。
首先了解3D饼图的构成
在 ECharts 中，3D 饼图主要是通过 surface 类型的图表来模拟实现的。一个 surface 类型的系列（series）可以定义一个三维参数化表面。通过构造一系列这样的表面，我们就可以模拟出一个3D饼图。
准备工作
在页面中引入 ECharts 的主要脚本文件和3D模块，通常可以通过CDN引入或者下载到本地：
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/2.0.4/echarts-gl.min.js"></script> 确保在页面中定义一个 DOM 容器来渲染你的图表。
<div id="chart" style="width: 600px;height:400px;"></div> 在 JavaScript 中，通过 echarts.init() 方法初始化一个ECharts实例。
var myChart = echarts.init(document.getElementById('chart')); 数据定义
首先定义你的3D饼图数据，例如：
const pieData = [ { name: '销售业务', value: 77.56, itemStyle: { color: '#f00' } }, { name: '技术服务', value: 18.21, itemStyle: { color: '#0f0' } }, { name: '配送业务', value: 3.67, itemStyle: { color: '#00f' } }, { name: '其他业务', value: 0.17, itemStyle: { color: '#ff0' } } ]; 绘制一个三维饼图
接下来你可以通过编写一个函数来生成3D饼图的配置，例如以下的函数 getPie3D：
// 获取3D饼图的配置对象 function getPie3D(pieData, internalDiameterRatio) { const series = [] let sumValue = 0 let startValue = 0 let endValue = 0 const legendData = [] const k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3 // 为每一个饼图数据，生成一个 series-surface 配置 for (let i = 0; i < pieData.length; i++) { sumValue += pieData[i].value const 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 } } if (typeof pieData[i].itemStyle !== 'undefined') { const itemStyle = {} typeof pieData[i].itemStyle.color !== 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null typeof pieData[i].itemStyle.opacity !== 'undefined' ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null seriesItem.itemStyle = itemStyle } series.push(seriesItem) } // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数， // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。 for (let i = 0; i < series.length; i++) { endValue = startValue + series[i].pieData.value series[i].pieData.startRatio = startValue / sumValue series[i].pieData.endRatio = endValue / sumValue series[i].parametricEquation = getParametricEquation( series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, 2000 ) startValue = endValue legendData.push(series[i].name) } return series } 这个函数会根据传入的数据 pieData 和它们的样式返回一个 ECharts 配置对象，该配置对象包含了一系列 surface 类型的系列（series）用以表示饼图的每个扇区。
在这里，我们需要注意的几个关键点：
- 扇区的大小由数据值
value决定。 - 可以通过
internalDiameterRatio控制饼图的内径和外径的比例，实现空心的效果。 - 样式
itemStyle中包含颜色和透明度等配置。 startValue和endValue用来计算每个扇区的起始和结束角度。
合并配置并初始化图表
获取到配置项后，你可以将其设置到你的 ECharts 实例中去渲染3D饼图。例如：
const option = getPie3D(pieData, 0.2); // 假设内径比例为0.2 myChart.setOption(option); 实践
以下是我的实际代码，可以复制粘贴使用
initChartR2() { const chartDom = document.getElementById('chartR2') this.rightChart2 = this.$echarts.init(chartDom) function getParametricEquation( startRatio, endRatio, isSelected, isHovered, k, height ) { // 计算 const midRatio = (startRatio + endRatio) / 2 const startRadian = startRatio * Math.PI * 2 const endRadian = endRatio * Math.PI * 2 const 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 : 0 const 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) } return Math.sin(v) > 0 ? 1 * height : -1 } } } // 生成模拟 3D 饼图的配置项 function getPie3D(pieData, internalDiameterRatio) { const series = [] let sumValue = 0 let startValue = 0 let endValue = 0 const legendData = [] const k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3 // 为每一个饼图数据，生成一个 series-surface 配置 for (let i = 0; i < pieData.length; i++) { sumValue += pieData[i].value const 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 } } if (typeof pieData[i].itemStyle !== 'undefined') { const itemStyle = {} typeof pieData[i].itemStyle.color !== 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null typeof pieData[i].itemStyle.opacity !== 'undefined' ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null seriesItem.itemStyle = itemStyle } series.push(seriesItem) } // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数， // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。 for (let i = 0; i < series.length; i++) { endValue = startValue + series[i].pieData.value series[i].pieData.startRatio = startValue / sumValue series[i].pieData.endRatio = endValue / sumValue series[i].parametricEquation = getParametricEquation( series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, 2000 ) startValue = endValue legendData.push(series[i].name) } return series } // 传入数据生成 option const optionsData = [ { name: '国际货代', value: 13.87, itemStyle: { opacity: 0.5, color: '#7bc35a' } }, { name: '租赁业务', value: 0.6, itemStyle: { opacity: 0.5, color: '#2f97df' } }, { name: '仓储装卸', value: 9.53, itemStyle: { opacity: 0.5, color: '#4268d6' } }, { name: '干线运输', value: 72.17, itemStyle: { opacity: 0.5, color: '#d35e5f' } }, { name: '配送业务', value: 3.67, itemStyle: { opacity: 0.5, color: '#c2c763' } }, { name: '其他业务', value: 0.17, itemStyle: { opacity: 0.5, color: '#8fdffe' } } ] const series = getPie3D(optionsData.map(item => { if (item.value < 5) { item.value = 5 } return item }), 0, 240, 28, 26, 0.5) series.push({ name: 'pie2d', type: 'pie', label: { opacity: 1, position: 'outside', fontSize: 12, lineHeight: 20, textStyle: { fontSize: 12, color: '#fff' } }, labelLine: { length: 30, length2: 30 }, minAngle: 10, startAngle: -50, // 起始角度，支持范围[0, 360]。 clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式 radius: ['0', '25%'], center: ['50%', '50%'], data: optionsData.map(item => { item.itemStyle.opacity = 0 return item }) }) // 准备待返回的配置项，把准备好的 legendData、series 传入。 const option = { legend: { show: false }, animation: true, tooltip: { formatter: (params) => { if ( params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d' ) { return `${ params.seriesName }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${ params.color };"></span>${ option.series[params.seriesIndex].pieData.value + '%' }` } }, textStyle: { fontSize: 14 } }, title: { x: 'center', top: '20', textStyle: { color: '#fff', fontSize: 22 } }, // backgroundColor: '#0E3567', labelLine: { show: true, lineStyle: { color: '#7BC0CB' }, normal: { show: true, length: 10, length2: 10 } }, label: { show: true, position: 'outside', formatter: '{b} \n{d}%', textStyle: { color: '#fff', fontSize: '12px' } }, xAxis3D: { min: -1, max: 1 }, yAxis3D: { min: -1, max: 1 }, zAxis3D: { min: -1, max: 1 }, grid3D: { show: false, boxHeight: 0.01, // top: '30%', bottom: '50%', // environment: "rgba(255,255,255,0)", viewControl: { distance: 300, alpha: 35, beta: 60, autoRotate: false // 自动旋转 } }, series: series } this.rightChart2.setOption(option) } 结语
通过上述步骤，你可以在页面上绘制一个动态的、具有立体感的3D饼图了。ECharts 的这一特性可以帮助你的报表和展示更加吸引观众的注意，增加数据的可读性。
注意：在使用 ECharts GL 的3D功能时，请确保目标平台支持WebGL渲染。
如需了解更多 ECharts 的高级配置和功能，请参考 ECharts官方文档。
