echarts饼状图外层添加圆圈
在饼状图外边添加圆圈，即以下代码中的外边框
image.png
option = {
legend: {
icon: "rect",//形状类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
itemWidth: 15,  // 设置宽度
itemHeight: 8, // 设置⾼度
itemGap: 10, // 设置间距
align: "left",
show: true,
left: 'right', //位置
data: ['⽴案', '审核未通过', '审核中', '已处理', '撤诉'],
textStyle: {
//⽂字样式
color: "#fff",
fontSize: "12"
}
},
color: ['#02baf4', '#e6ea7c', '#0079ea', '#1ee4ab', '#f1b457'],
series: [
{
name: '半径模式',
type: 'pie',//这个type决定了你画的图的类型是饼图还是柱状图等
radius: [20, 80],//饼图的内环和外环的半径
center: ['50%', '52%'],//玫瑰图在画布上的相对位置
roseType: 'radius',//这⾥可以选择radius或area
itemStyle: {
normal: {
// color: 各异,
borderWidth: 1,
label: {
show: true,//数据标签显⽰
position: 'outer',
textStyle://数据标签的字体配置，与其他组件相同
{
fontSize: 12,//字号
fontWeight: 'normal',//粗细【normal\bold\bolder\lighter】
fontFamily: 'Microsoft YaHei',//字体【 'serif'\'monospace'\'Arial'\'Courier New'\'Microsoft YaHei'】
color: ''//颜⾊各异
},
formatter: '{b}：{d}%'//a：系列名，就是你上⾯写的name半径模型，b：数据名，就是rose1，c：数据值，d百分⽐                            },
labelLine: {
labelLine: {
show: true,//数据标签引导线
length: 30,
lineStyle: {
width: 1,
type: 'solid'
}
}
},
emphasis: {//选中的样式
borderColor: 'rgba(0,0,0,0)',
borderWidth: 1,
label: {
show: true//选中时不显⽰数据标签
},
labelLine: {
show: true,//选中时不显⽰数据标签引导线
// length: 50,
lineStyle: {
width: 1,
type: 'solid'
}
}
}
},
data: [//数据的值
{ value: 40, name: '⽴案' },
{ value: 5, name: '审核未通过' },
{ value: 10, name: '审核中' },
{ value: 20, name: '已处理' },
{ value: 25, name: '撤诉' },
]
},
{
name: '外边框',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //⿏标移⼊变⼤
center: ['52%', '50%'],
radius: ['65%', '65%'],
label: {
normal: {
show: false
}
},
data: [{
value: 9,
name: '',
itemStyle: {
normal: {
borderWidth: 1,
borderColor: '#2985e0'
}
}
}]
},
],
tooltip: {
trigger: 'item', // 触发类型，默认数据触发，【item\axis】
formatter: '{a} <br/>{b} : {c} ({d}%)',//与数据标签相同
/
/showDelay: 20,  // 显⽰延迟，添加显⽰延迟可以避免频繁切换，单位ms
// hideDelay: 100,// 隐藏延迟，单位ms
//transitionDuration : 0.4,  // 动画变换时间，单位s
//backgroundColor: 'rgba(0,0,0,0.7)',  // 提⽰背景颜⾊，最后⼀个参数是透明度                // borderColor: '#333',            // 提⽰边框颜⾊
// borderRadius: 4,                // 提⽰边框圆⾓，单位px，默认为4
//borderWidth: 0,                // 提⽰边框线宽，单位px，默认为0（⽆边框）
//padding: 5,                  // 提⽰内边距，单位px，默认各⽅向内边距为5，
// 接受数组分别设定上右下左边距，同css
padding是外边距还是内边距// axisPointer : {                // 坐标轴指⽰器，坐标轴触发有效
//type : 'line',        // 默认为直线，可选为：'line' | 'shadow'
// lineStyle : {          // 直线指⽰器样式设置
// color: '#48b',
// width: 2,

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。