echarts 其他样式 折线 重叠_echarts 折线图 areaStyle颜色重叠问题

bc4a83e86713b90360c0955b16be3b45.png

option = {

tooltip: {

trigger: ‘axis‘,

axisPointer: {

type: ‘cross‘,

crossStyle: {

color: ‘#999‘

}

}

},

legend: {

data: [‘苹果‘, ‘香蕉‘, ‘橘子‘], // 设置具体项

icon:"rect", // 设置legend图标

bottom:"bottom", //设置legend位置

itemGap:50 //设置legend项之间的间距

},

xAxis: [

{

type: ‘category‘,

data: [‘郑州‘, ‘南阳‘, ‘洛阳‘, ‘信阳‘, ‘新乡‘, ‘开封‘, ‘驻马店‘, ‘商丘‘, ‘许昌‘, ‘周口‘, "济源", ‘濮阳‘],

axisPointer: { //设置x轴指示器样式

type: ‘shadow‘

},

axisTick:{show:false},

axisLine:{

lineStyle:{

width:2

}

}

}

],

yAxis: [

{

type: ‘value‘,

min: 0,

max: 250,

interval: 50,

axisTick:{show:false},

axisLine:{show:false}

},

{

type: ‘value‘,

min: 0,

max:50,

interval: 10,

axisLabel: {

formatter: ‘{value} %‘

},

axisTick:{show:false},

axisLine:{show:false}

}

],

series: [

{

name: ‘苹果‘,

type: ‘line‘,

data: [20., 49, 70, 26, 66, 76, 100, 142, 32, 20, 6, 50],

itemStyle:{

color:"#3fa7dc" //设置折线图颜色

},

smooth:true, // 线条是否平滑

symbol:"none", // 是否显示节点

stack:"总量", //areaStyle颜色重叠问题,添加相同的stack属性即可

areaStyle: {

opacity:0.3

}

},

{

name: ‘香蕉‘,

type: ‘line‘,

stack:"总量",

data: [230, 130, 160, 184, 90, 120, 100, 90, 48, 18, 10, 30],

itemStyle:{

color:"orange" //设置折线图颜色

},

smooth:true,

symbol:"none", // 是否显示节点

areaStyle: {

opacity:0.3

}

},

{

name: ‘橘子‘,

type: ‘line‘,

data: [60, 80, 90, 120, 63, 102, 240, 234, 230, 165, 120, 62],

itemStyle:{

color:"#ff3a00" //设置折线图颜色

},

symbolSize:10, // 设置节点大小

symbol:"circle" // 设置节点样式

}

]

};

设置areaStyle属性后,发现颜色重叠,如果不想重叠,给series的项添加相同的stack属性

原文:https://www.cnblogs.com/yunyin/p/13889794.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值