<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
html,body{height:100%;}
#chart1{height:100%;}
</style>
</head>
<body>
<div id="chart1">
</div>
</body>
</html>
<script type="text/javascript">
var myChartLine = echarts.init(document.getElementById('chart1'));
optionLine = {
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '9%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}//将统计图保存为
}
,right:100
,top:0
},
xAxis: {
type: 'category',
boundaryGap:false,
data:['11.07','11.08','11.09','11.10','11.11','11.12','11.13','11.14','11.15','11.16']
},
yAxis: {
type: 'value'
/*min:0,
max:60,
splitNumber:6*/
},
series: [
{
name:'浏览次数',
type:'line',
stack: '总量1',
areaStyle: {//覆盖区域的渐变色
normal: {
color: {
type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
colorStops: [
{
offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
},
{
offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
}
},
data:['10','22','10','50','13','31','15','10','22','10'],
itemStyle : {//线条的渐变
normal:{
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
{
offset:1, color: '#3b9ee9' // 0% 处的颜色
},
{
offset:0.3, color: '#3b9ee9' // 100% 处的颜色
},
{
offset:0.1, color: '#3b9ee9' // 100% 处的颜色
}
]
), //背景渐变色
}
}
}
]
};
//为echarts对象加载数据
myChartLine.setOption(optionLine);
</script>版权声明：本文为qq_17211063原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。