用echarts画双层环形图
时间: 2023-05-14 16:04:41 浏览: 102
可以使用以下代码来使用 echarts 画双层环形图:
```javascript
// 引入 echarts
import echarts from 'echarts';
// 初始化 echarts 实例
const myChart = echarts.init(document.getElementById('myChart'));
// 配置数据
const option = {
title: {
text: '双层环形图',
subtext: '示例',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['层级一', '层级二']
},
series: [
{
name: '层级一',
type: 'pie',
selectedMode: 'single',
radius: [0, '30%'],
label: {
position: 'inner'
},
labelLine: {
show: false
},
data: [
{ value: 335, name: '直接访问' },
{ value: 679, name: '邮件营销' },
{ value: 1548, name: '搜索引擎' }
]
},
{
name: '层级二',
type: 'pie',
radius: ['40%', '55%'],
label: {
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}:}{c} {per|{d}%} ',
backgroundColor: '#eee',
borderColor: '#aaa',
borderWidth: 1,
borderRadius: 4,
shadowBlur: 3,
shadowOffsetX: 2,
shadowOffsetY: 2,
shadowColor: '#999',
padding: [0, 7],
rich: {
a: {
color: '#999',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#aaa',
width: '100%',
borderWidth: 0.5,
height: 0
},
b: {
fontSize: 16,
lineHeight: 33
},
per: {
color: '#eee',
backgroundColor: '#334455',
padding: [2, 4],
borderRadius: 2
}
}
},
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1048, name: '百度' },
{ value: 251, name: '谷歌' },
{ value: 147, name: '必应' },
{ value: 102, name: '其他' }
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
这是一个简单的示例,你可以根据自己的需求进行修改和定制。