import * as echarts from 'echarts';
import React, { useEffect } from 'react';
function LianxiEcharts() {
useEffect(() => {
var myChart = echarts.init(document.getElementById('main'));
//指定图标配置
var option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048,
name: '测速报警',
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: '#FFDAB9' }, // 渐变起始颜色
{ offset: 1, color: '#FF6347' } // 渐变结束颜色
]
}
}},
{ value: 735, name: '人员报警',
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: '#44DAB9' }, // 渐变起始颜色
{ offset: 1, color: '#FF6347' } // 渐变结束颜色
]
}, },},
{ value: 580, name: '车辆报警' },
{ value: 580, name: '安防报警' },
]
},
{
name: 'Access From',
type: 'pie',
radius: ['70%', '74%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
itemStyle: { // 设置圆角
borderRadius: [0, 0, 20, 20]
},
// roseType: 'area', // 添加间距
data: [
{ value: 1048, name: '测速报警' },
{ value: 735, name: '人员报警' },
{ value: 580, name: '车辆报警' },
{ value: 580, name: '安防报警' },
]
}
],
graphic: [
{
type: 'image',
id: 'logo',
left: 'center',
top: '40%',
z: 10,
bounding: 'raw',
style: {
image: 'https://img0.baidu.com/it/u=389534501,3382403978&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1704560400&t=d8d8fdb545ee00e8f5558279b7e98569', // 设置图片的 URL,环形图中心空白,引用图片
width: 100,
height: 100
}
}
]
};
//对实例对象配置
myChart.setOption(option)
}, [])
return (<div id='main' style={{ width: '1200px', height: '800px' }}>
</div>);
}
export default LianxiEcharts;
echarts嵌套环形图+线性渐变
于 2024-01-05 21:39:14 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)