首页 前端知识 Echarts--series--data自定义

Echarts--series--data自定义

2024-02-16 14:02:05 前端知识 前端哥 243 30 我要收藏

在这里插入图片描述
在这里插入图片描述
echarts效果:

原例:

series: {
type: 'bar',
showBackground: true,
data: [1,2,3,4]
}
复制
series: {
type: 'bar',
showBackground: true,
data: [
1,
{
name: '总费用',
value: 2,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{
offset: 0,
color: gradualChangeColor[props.lineBarColor['总费用']][1],
},
{
offset: 1,
color: gradualChangeColor[props.lineBarColor['总费用']][0],
},
]),
},
},
label: {
show: true,
precision: 1,
position: 'right',
valueAnimation: true,
fontFamily: 'Impact',
formatter: (params) => {
return '{c|' + numberConversion(+echartData[0].item2[0]) + '}';
},
position: 'right',
distance: distance[0],
offset: [0, -26],
rich: {
c: {
fontSize: 24,
color: '#11B3DE',
fontFamily: 'Impact',
},
},
},
},
{
name: '总预算',
value: 3,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{
offset: 0,
color: gradualChangeColor[props.lineBarColor['总预算']][1],
},
{
offset: 1,
color: gradualChangeColor[props.lineBarColor['总预算']][0],
},
]),
},
},
label: {
show: true,
precision: 1,
position: 'right',
valueAnimation: true,
fontFamily: 'Impact',
formatter: (params) => {
return '{c|' + numberConversion(+echartData[0].item2[1]) + '}';
},
position: 'right',
distance: distance[1],
offset: [0, -26],
rich: {
c: {
fontSize: 24,
color: '#F77120',
fontFamily: 'Impact',
},
},
},
},
4,
5
],
barMaxWidth: 20,
};
复制
转载请注明出处或者链接地址:https://www.qianduange.cn//article/2180.html
标签
评论
发布的文章

vue-echarts实现多功能图表

2024-03-02 09:03:54

echarts参数详细介绍

2024-03-02 09:03:53

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!