echarts饼图外部阴影设置
var option = {
color: ['rgba(91, 143, 249, 0.85)', 'rgba(90, 216, 166, 0.85)', 'rgba(255, 82, 77, 0.85)'],
tooltip: {
trigger: 'item'
},
legend: {
type: 'plain',
orient: 'vertical',
right: '10%',
top: 'center',
align: 'left',
itemWidth: 8, // 设置宽度
itemHeight: 8, // 设置高度
itemGap: 16, // 设置间距,
symbolKeepAspect: false,
formatter: function (name) {
let data = option.series[1].data
console.log(data, 'data')
let total = 0
let tarValue
for (let i = 0; i < data.length; i ) {
total = data[i].value
if (data[i].name == name) {
tarValue = data[i].value
}
}
//计算出百分比
let p = Math.round((tarValue / total) * 100) '%'
return `${name} ${tarValue} ${p}`
//name是名称,tarValue是数值
},
},
series: [
// 设置外部阴影
{
name: '',
type: 'pie',
clockWise: false,
radius: '80%', //边框大小
color: '#fff',
center: ['30%', '50%'],
data: [{
value: 10,
itemStyle: {
// borderColor: '#fff',
borderWidth: 1,
shadowBlur: 9, // 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果
shadowOffsetX: 5, // 阴影水平方向上的偏移距离
shadowOffsetY: 4,
shadowColor: '#5B8FF9' // 阴影颜色
}
}]
},
//内部饼图
{
type: 'pie',
radius: '80%',
center: ['30%', '50%'], //调整echarts的位置,第一个值调整左右,第二个值调整上下,也可以设置具体数字像素值,center: [200, 300],
label: { //echarts内部显示数字
color: '#fff',
show: true,
formatter: '{d}',
position: 'inside',
},
data: [{
value: 85,
name: '正常',
},
{
value: 7,
name: '停运 '
},
{
value: 8,
name: '停运-'
},
],
itemStyle: {
borderColor: '#fff',
borderWidth: 2,
},
},
]
};
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfkhkha
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13