echarts饼图背景颜色自定义，渐变颜色，阴影效果

饼图
seriesData: [
{
type: ‘pie’,
// radius: [60, 90],
center: [‘50%’, ‘50%’],
label: {
normal: {
show: true,
position:‘inner’,//文字在饼图内部
formatter: function § {
var data = p.data;
let str = ‘’
str = p.data.name +"\n" + p.data.value+"%"
return str;
}
},
emphasis: {
show: true
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: ‘rgba(0, 0, 0, 0.5)’
},
normal:{
// 设置扇形的阴影
shadowBlur: 30,
shadowColor: ‘rgba(255,227,42,0.3)’,
shadowOffsetX: -10,
shadowOffsetY: 10,
color: function(params) {// //自定义颜色 有渐变效果
var colorList = [
{
c1: ’ #fce5ca’, //
c2: ‘#FF9D62’
},
{
c1: ’ #508DFF’, //
c2: ‘#26C5FE’
},
{
c1: ‘#63E587’,//
c2: ‘#5FE2E4’
},
]
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
offset: 0,
color: colorList[params.dataIndex].c1
}, {
offset: 1,
color: colorList[params.dataIndex].c2
}])
/* return colorList[params.dataIndex]*/
}
// color:function(params) {// //自定义颜色 无渐变效果
// var colorList = [
// ‘#005EEA’, ‘#FEB64D’, ‘#00bb96’,
// ];
// return colorList[params.dataIndex]
// }
}
},
lableLine: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: [
{ value: 27, name: ‘供电公司’,num:100 },
{ value: 41, name: ‘上海通号’,num:200 },
{ value: 32, name: ‘机电公司’,num:168 }
]
}
]
},
柱状图
seriesData: [
{
name: ‘系列1’,
type: ‘bar’,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: ‘inside’, //文字在柱图内部
// formatter: ‘{b}\n{c}’,
textStyle: { //数值样式
color: ‘#fff’,
fontSize: 18,
}
},
// 设置扇形的阴影
shadowBlur: 30,
shadowColor: ‘rgba(255,227,42,0.3)’,
shadowOffsetX: -5,
shadowOffsetY: 5,
// color:function(params) { //背景颜色自定义
// var colorList = [
// ‘#005EEA’, ‘#FEB64D’, ‘#00bb96’,
// ];
// return colorList[params.dataIndex]
// },
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{//背景颜色自定义渐变
offset: 0,
color: “#1268f3” // 0% 处的颜色
}, {
offset: 0.6,
color: “#08a4fa” // 60% 处的颜色
}, {
offset: 1,
color: “#01ccfe” // 100% 处的颜色
}], false)
}
},
stack: ‘数据’,
barWidth: ‘40%’,
data: [15, 35, 35]
},
]