系列文章目录
echart面积图不同区域用不同的颜色表示
文章目录
前言
提示：这里可以添加本文要记录的大概内容：
echart面积图不同区域用不同的颜色表示
提示：以下是本篇文章正文内容，下面案例可供参考
一.代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>echart 面积图段显示不同的颜色</title>
<style>
#main {
width: 100%;
height: 300px;
margin: 10% auto;
}
</style>
</head>
<body>
<div id="main"></div>
</body>
</html>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<!--echart折线图-->
<script>
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
var base = +new Date(2021, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];
var data = [72, 24, 58, 95, 29, 35, 45, 25, 47, 85, 69, 36, 14, 85, 38, 75, 69, 63, 98, 33, 25, 46, 78, 99, 12, 67,
100
];
for (var i = 1; i < data.length; i++) {
var now = new Date(base += oneDay);
date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
}
option = {
tooltip: {
trigger: 'axis',
position: function(pt) {
return [pt[0], '10%'];
}
},
title: {
left: 'center',
text: 'echart面积图不同区域用不同的颜色表示',
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
xAxis: {
show: true, //隐藏x轴
splitLine: {
show: false,
lineStyle: {
color: '#dadada'
}
}, //去除网格线
type: 'category',
boundaryGap: false,
data: date, //设置x轴数据
axisTick: {
show: false //不显示刻度线
},
axisLine: {
// 设置x轴颜色
symbol:['none','arrow'],//设置箭头
lineStyle: {
color: '#4e6ef2',
width: 2, //这里是为了突出显示加上的
}
}
},
yAxis: {
show: true, //隐藏y轴
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false,
lineStyle: {
color: '#dadada'
}
}, //去除网格线
axisTick: {
show: false //不显示刻度线
},
axisLine: {
// 设置y轴颜色
symbol:['none','arrow'],//设置箭头
lineStyle: {
color: '#4e6ef2',
width: 2, //这里是为了突出显示加上的
}
}
},
//关闭图例
legend: {
show: false,
data: []
},
//设置不同折现区间设置不同颜色
visualMap: [{
left: '95%',
top: '40px',
show: true, //显示图例
pieces: [{
lte: 30, //小于等于
color: '#4e6ef2'
},
{
gt: 30, //大于3 小于等于6
lte: 80,
color: 'green'
},
{
gt: 80, //大于6
color: 'red'
},
],
seriesIndex: 0 //0表示第一条线 第二条线依次累加
}],
series: [{
name: '模拟数据',
type: 'line',
symbol: 'none',
sampling: 'lttb',
itemStyle: {
color: '#4e6ef2'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#4e6ef2'
},
{
offset: 0.8,
color: '#3385ff'
},
{
offset: 1,
color: 'red'
},
])
},
data: data
}],
grid: {
left: '3%',
right: '4%',
bottom: '10%',
containLabel: true
}
};
option && myChart.setOption(option);
</script>