1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > echarts 其他样式 折线 重叠_echarts 折线图 areaStyle颜色重叠问题

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

时间:2023-10-05 09:07:06

相关推荐

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

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属性

原文:/yunyin/p/13889794.html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。