持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情
学习过程中将笔记跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕~~~~，谢谢大家⭐️⭐️⭐️~~~
需求：将环形图内环分为两类集团内部和集团外部，外环的数据分别属于内环的两类，我这里为了方便只简单写了两类，大家可以对数据进行更改变成多类，我这里样式比较简陋粗糙大家可自行更改
效果图：
代码如下：
mychart() {
var myChart = echarts.init(document.getElementById('profitTotal1'));
let colors = [{
one: "red",
two: "pink",
}, {
one: "#F6F68C",
two: "#FC8F3E",
}];
let colors2 = ['red','pink','#F6F68C','#FC8F3E'];
var Data = [
[
{ value: [100], name: '集团内部' },
{ value: '30', name: '已付金额' },
{ value: '70', name: '未付金额' },
],
[
{ value: [100], name: '集团外部' },
{ value: '12', name: '已付金额' },
{ value: '88', name: '未付金额' },
],
];
var BigData = [];//州
var SmallData = [];//国家
var Radius = [];
var ZRadius = [];
for (var prop in Data) {
BigData.push(Data[prop][0]);
for (var i = 1; i < Data[prop].length; i++) {
SmallData.push(Data[prop][i]);
}
}
option = {
tooltip: {
trigger: 'item',
},
series: [
{
name: '州',
type: 'pie',
radius: ['10%', '66%'],
data: BigData,
label: {
position: 'inside',
fontSize: 12,
formatter: function (e) {
return e.data.name + ':' + e.data.value[0];
},
},
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2,
normal: {
color: function (params) {
let odd = params.dataIndex % 2;
return {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: colors[odd].one // 0% 处的颜色
},
{
offset: 1,
color: colors[odd].two // 100% 处的颜色
}
]
}
},
}
},
},
{
name: '国家',
type: 'pie',
radius: ['70%', '100%'],
data: SmallData,
label: {
// position: 'inside',
formatter: function (e) {
return e.data.name + ':' + e.data.value[0];
},
},
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2,
normal: {
color: function (params) {
let index = params.dataIndex;
return {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: colors2[index] // 0% 处的颜色
},
{
offset: 1,
color: colors2[index] // 100% 处的颜色
}
]
}
},
}
},
},
],
};
myChart.setOption(option);
},
具体效果可以复制到本地尝试和调整自己想要的结果
最后谢谢大家阅读⭐️⭐️⭐️，如果喜欢，可以点赞或留言哟💕
专栏推荐
推荐一下自己的专栏，欢迎大家收藏关注😊~
