https://gallery.echartsjs.com/editor.html?c=x6LFNVgmfx 婚姻情况环形图 该例子提取placeHolderStyle公共变量
series: [ { name: ‘Line 4‘, type: ‘pie‘, clockWise: true, hoverAnimation: false, radius: [‘65%‘, ‘75%‘], itemStyle: dataStyle, data: [{ value: 7645434, name: ‘已婚已育‘ }, { value: 3612343, name: ‘总数‘, tooltip: { show: false }, itemStyle: placeHolderStyle } ] }, { name: ‘Line 3‘, type: ‘pie‘, clockWise: true, radius: [‘50%‘, ‘60%‘], itemStyle: dataStyle, hoverAnimation: false, data: [{ value: 2632321, name: ‘已婚未育‘ }, { value: 2212343, name: ‘总数‘, tooltip: { show: false }, itemStyle: placeHolderStyle }] }, { name: ‘Line 2‘, type: ‘pie‘, clockWise: true, hoverAnimation: false, radius: [‘35%‘, ‘45%‘], itemStyle: dataStyle, data: [{ value: 1823323, name: ‘未婚‘ }, { value: 1812343, name: ‘总数‘, tooltip: { show: false }, itemStyle: placeHolderStyle }] }, { name: ‘Line 1‘, type: ‘pie‘, clockWise: true, radius: [‘20%‘, ‘30%‘], itemStyle: dataStyle, hoverAnimation: false, data: [ { value: 1342221, name: ‘学生‘ },{ value:1912343, name: ‘总数‘, tooltip: { show: false }, itemStyle: placeHolderStyle } ] } ]
https://gallery.echartsjs.com/editor.html?c=xrD67xXLT9 3/4圆环图 该例子根据data的长度,动态改变radius值。
var res = { series: [], yAxis: [] }; for (let i = 0; i < data.length; i++) { res.series.push({ name: ‘学历‘, type: ‘pie‘, clockWise: false, //顺时加载 hoverAnimation: false, //鼠标移入变大 radius: [65 - i * 15 + ‘%‘, 57 - i * 15 + ‘%‘], center: ["30%", "55%"], label: { show: false }, itemStyle: { label: { show: false, }, labelLine: { show: false }, borderWidth: 5, }, data: [{ value: data[i].value, name: data[i].name }, { value: sumValue - data[i].value, name: ‘‘, itemStyle: { color: "rgba(0,0,0,0)", borderWidth: 0 }, tooltip: { show: false }, hoverAnimation: false }] }); res.series.push({ name: ‘‘, type: ‘pie‘, silent: true, z: 1, clockWise: false, //顺时加载 hoverAnimation: false, //鼠标移入变大 radius: [65 - i * 15 + ‘%‘, 57 - i * 15 + ‘%‘], center: ["30%", "55%"], label: { show: false }, itemStyle: { label: { show: false, }, labelLine: { show: false }, borderWidth: 5, }, data: [{ value: 7.5, itemStyle: { color: "#E3F0FF", borderWidth: 0 }, tooltip: { show: false }, hoverAnimation: false }, { value: 2.5, name: ‘‘, itemStyle: { color: "rgba(0,0,0,0)", borderWidth: 0 }, tooltip: { show: false }, hoverAnimation: false }] }); res.yAxis.push((data[i].value / sumValue * 100).toFixed(2) + "%"); } return res; }
原文地址:https://www.cnblogs.com/qtx-/p/11675366.html
时间: 2024-11-11 23:34:20