echarts中设置的区域渐变色为什么会影响坐标轴的颜色
0
悬赏园豆：5
[待解决问题]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta name="description" content="ECharts"> -->
<title>Echarts绘制横向柱状图(圆角+渐变)</title>
<!-- <script type="text/javascript" src="/LoongUI/frame/lib/echarts.min.js"></script> -->
<script src="echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:400px;"></div>
<div id="main2" style="width: 400px;height:300px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var myChart2 = echarts.init(document.getElementById('main2'));
// initMonitorChart();
//初始化数据
var option1 = {
tooltip: {
show:true,
trigger:'axis'
},
grid: {
// show:true,
top: 0,
bottom: 0,
left: 0,
right:0
},
legend: {
show:false
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日','周五','周六','周日'],
splitLine:{
show:false //去除网格线
},
axisLine:{
lineStyle:{
color:"#E9ECEF",
width:'1'
}
}
},
yAxis: {
type: 'value',
splitLine:{
show:false //去除网格线
},
axisLabel :{//决定是否显示数据
show:false,
},
axisTick: {//不展示刻度
show: false
},
axisLine:{
lineStyle:{
color:"#E9ECEF",
width:'1'
}
},
splitLine: {
show: false,
lineStyle: {
color: '#57617B'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
color: '#D5CBE8'
}
}
},
series: [
{
name: '网络发送',
type: 'line',
symbol:'none', //去掉点的
smooth:true, //让曲线变平滑的
lineStyle:{
color:"#28C4EF",
width:1
},
areaStyle:{
color:{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#28C4EF' // 0% 处的颜色
}, {
offset: 0.5, color: '#fff' // 100% 处的颜色
}],
globalCoord: false
}
},
data: [53388332,38857333,55234666,28703666, 135381666,64523333, 58694666,50247666, 29620999, 57318666]
},
{
name: '网络接收',
type: 'line',
symbol:'none', //这句就是去掉点的
smooth:true, //这句就是让曲线变平滑的
lineStyle:{
color:"#4884FD",
width:1
},
areaStyle:{
// width:1,
color:{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#4884FD' // 0% 处的颜色
}, {
offset: 0.5, color: '#fff' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
data: [ 39368999,
62873000,
41914999,
47225666,
42519666,
36610000,
31955666,
40317999,
29009999,
44860333]
}
]
};
myChart.setOption(option1);
// myChart2.setOption(option);</script>
</body>
</html>
所有回答(1)
0
https://blog.csdn.net/luanpeng825485697/article/details/76832189
前两天我遇到的一个博客，里面很详细，你可以看看，应该有帮助
谢谢，没办法我直接设置透明度了
@夏木111: 也行吧，方法总比困难多
