数据图表
就眠仪式
parent
d16c19c035
commit
dab1fce48a
|
|
@ -334,6 +334,27 @@
|
||||||
"openType": "_iframe",
|
"openType": "_iframe",
|
||||||
"href": "view/system/space.html"
|
"href": "view/system/space.html"
|
||||||
}]
|
}]
|
||||||
|
},{
|
||||||
|
"id": "echarts",
|
||||||
|
"title": "数据图表",
|
||||||
|
"icon": "layui-icon layui-icon-chart",
|
||||||
|
"type": 0,
|
||||||
|
"href": "",
|
||||||
|
"children": [{
|
||||||
|
"id": 12121,
|
||||||
|
"title": "折线图",
|
||||||
|
"icon": "layui-icon layui-icon-face-smile",
|
||||||
|
"type": 1,
|
||||||
|
"openType": "_iframe",
|
||||||
|
"href": "view/echarts/line.html"
|
||||||
|
},{
|
||||||
|
"id": 121212,
|
||||||
|
"title": "柱状图",
|
||||||
|
"icon": "layui-icon layui-icon-face-smile",
|
||||||
|
"type": 1,
|
||||||
|
"openType": "_iframe",
|
||||||
|
"href": "view/echarts/column.html"
|
||||||
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "code",
|
"id": "code",
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
"data": "admin/data/menu.json",
|
"data": "admin/data/menu.json",
|
||||||
"accordion": true,
|
"accordion": true,
|
||||||
"control": false,
|
"control": false,
|
||||||
"select": "10"
|
"select": "4"
|
||||||
},
|
},
|
||||||
"tab": {
|
"tab": {
|
||||||
"muiltTab": true,
|
"muiltTab": true,
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>首页三</title>
|
<title>首页</title>
|
||||||
<meta name="renderer" content="webkit">
|
<meta name="renderer" content="webkit">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title></title>
|
||||||
|
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
||||||
|
<link rel="stylesheet" href="../../admin/css/other/result.css" />
|
||||||
|
</head>
|
||||||
|
<body class="pear-container">
|
||||||
|
<div class="layui-row layui-col-space10">
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="column1" style="min-height:400px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="column2" style="min-height:400px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="column3" style="min-height:400px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="column4" style="min-height:400px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="../../component/layui/layui.js"></script>
|
||||||
|
<script src="../../component/pear/pear.js"></script>
|
||||||
|
<script src="script/column1.js"></script>
|
||||||
|
<script src="script/column2.js"></script>
|
||||||
|
<script src="script/column3.js"></script>
|
||||||
|
<script src="script/column4.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title></title>
|
||||||
|
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
||||||
|
<link rel="stylesheet" href="../../admin/css/other/result.css" />
|
||||||
|
</head>
|
||||||
|
<body class="pear-container">
|
||||||
|
<div class="layui-row layui-col-space10">
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="line1" style="min-height:400px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="line2" style="min-height:400px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="line3" style="min-height:400px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="line4" style="min-height:400px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="../../component/layui/layui.js"></script>
|
||||||
|
<script src="../../component/pear/pear.js"></script>
|
||||||
|
<script src="script/line1.js"></script>
|
||||||
|
<script src="script/line2.js"></script>
|
||||||
|
<script src="script/line3.js"></script>
|
||||||
|
<script src="script/line4.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,142 @@
|
||||||
|
layui.use(['echarts'], function() {
|
||||||
|
let echarts = layui.echarts;
|
||||||
|
|
||||||
|
var column1 = echarts.init(document.getElementById('column1'));
|
||||||
|
option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow' ,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: '26'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
top:'5%',
|
||||||
|
right:'10%',
|
||||||
|
data: ['猕猴桃', '香蕉'],
|
||||||
|
textStyle:{
|
||||||
|
fontSize:12,
|
||||||
|
color:'#808080'
|
||||||
|
},
|
||||||
|
icon:'rect'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top:60,
|
||||||
|
left:50,
|
||||||
|
bottom:60,
|
||||||
|
right:60
|
||||||
|
},
|
||||||
|
xAxis: [{
|
||||||
|
type: 'category',
|
||||||
|
axisTick:{
|
||||||
|
show:false
|
||||||
|
},
|
||||||
|
axisLine:{
|
||||||
|
show:false
|
||||||
|
},
|
||||||
|
axisLabel:{
|
||||||
|
color:'#4D4D4D',
|
||||||
|
fontSize:14,
|
||||||
|
margin:21,
|
||||||
|
fontWeight:'bold'
|
||||||
|
},
|
||||||
|
data: ['第一周', '第二周', '第三周', '第四周'],
|
||||||
|
|
||||||
|
}],
|
||||||
|
yAxis: [{
|
||||||
|
name:'单位：万',
|
||||||
|
nameTextStyle:{
|
||||||
|
color:'#808080',
|
||||||
|
fontSize:12,
|
||||||
|
padding:[0, 0, 0, -5]
|
||||||
|
},
|
||||||
|
max: function(value) {
|
||||||
|
if(value.max<5){
|
||||||
|
return 5
|
||||||
|
}else{
|
||||||
|
return value.max
|
||||||
|
}
|
||||||
|
},
|
||||||
|
type: 'value',
|
||||||
|
axisLine:{
|
||||||
|
show:false
|
||||||
|
},
|
||||||
|
axisLabel:{
|
||||||
|
color:'#808080',
|
||||||
|
fontSize:12,
|
||||||
|
margin:5
|
||||||
|
},
|
||||||
|
splitLine:{
|
||||||
|
show:false
|
||||||
|
},
|
||||||
|
axisTick:{
|
||||||
|
show:false
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '猕猴桃',
|
||||||
|
type: 'bar',
|
||||||
|
label:{
|
||||||
|
show:true,
|
||||||
|
position:'top',
|
||||||
|
fontSize:14,
|
||||||
|
color:'#3DC3F0',
|
||||||
|
fontWeight:'bold'
|
||||||
|
},
|
||||||
|
barMaxWidth:60,
|
||||||
|
itemStyle:{
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0, color: '#3DC3F0' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1, color: '#CCF2FF' // 100% 处的颜色
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [60, 110, 180, 100]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '香蕉',
|
||||||
|
type: 'bar',
|
||||||
|
label:{
|
||||||
|
show:true,
|
||||||
|
position:'top',
|
||||||
|
fontSize:14,
|
||||||
|
color:'#3D8BF0',
|
||||||
|
fontWeight:'bold'
|
||||||
|
},
|
||||||
|
barMaxWidth:60,
|
||||||
|
itemStyle:{
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0, color: '#3D8BF0' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1, color: '#CCE2FF' // 100% 处的颜色
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [90, 130, 170, 130]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
column1.setOption(option);
|
||||||
|
|
||||||
|
window.onresize = function() {
|
||||||
|
column1.resize();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
layui.use(['echarts'], function() {
|
||||||
|
let echarts = layui.echarts;
|
||||||
|
|
||||||
|
var column2 = echarts.init(document.getElementById('column2'));
|
||||||
|
|
||||||
|
var data = [1000, 600, 500, 300];
|
||||||
|
option = {
|
||||||
|
backgroundColor: '#ffffff',
|
||||||
|
title: {
|
||||||
|
text: 'ETC交易成功率',
|
||||||
|
left: 'center',
|
||||||
|
top: 2,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 20
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: ['#fed46b','#2194ff', ],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||||
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '10%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
left: 'center',
|
||||||
|
bottom: '2%',
|
||||||
|
data: ['去年', '今年', ]
|
||||||
|
},
|
||||||
|
xAxis: [{
|
||||||
|
type: 'category',
|
||||||
|
data: ['09-22', '09-22', '09-22', '09-22', '09-22', '09-22', '09-22'],
|
||||||
|
axisTick: {
|
||||||
|
alignWithLabel: true
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
yAxis: [{
|
||||||
|
type: 'value'
|
||||||
|
}],
|
||||||
|
barMaxWidth: '30',
|
||||||
|
label:{
|
||||||
|
show:true,
|
||||||
|
position:'top',
|
||||||
|
formatter:function(params){
|
||||||
|
debugger
|
||||||
|
return params.value+'%'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
|
||||||
|
{
|
||||||
|
name: '去年',
|
||||||
|
type: 'bar',
|
||||||
|
data: [90, 52, 90, 80, 90, 70, 90]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '今年',
|
||||||
|
type: 'bar',
|
||||||
|
data: [10, 52, 90, 70, 90, 70, 90]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
};
|
||||||
|
column2.setOption(option);
|
||||||
|
|
||||||
|
window.onresize = function() {
|
||||||
|
column2.resize();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,126 @@
|
||||||
|
layui.use(['echarts'], function() {
|
||||||
|
let echarts = layui.echarts;
|
||||||
|
|
||||||
|
var column3 = echarts.init(document.getElementById('column3'));
|
||||||
|
|
||||||
|
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
|
||||||
|
|
||||||
|
option = {
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
padding: [8, 10],
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||||
|
axisPointer: {
|
||||||
|
type: "shadow",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['新开会员', '激活会员', '关闭会员'],
|
||||||
|
align: 'left',
|
||||||
|
right: 0,
|
||||||
|
textStyle: {
|
||||||
|
color: "#333",
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 200
|
||||||
|
},
|
||||||
|
itemWidth: 14,
|
||||||
|
itemHeight: 14,
|
||||||
|
itemGap: 35
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '0',
|
||||||
|
right: '0',
|
||||||
|
bottom: '8%',
|
||||||
|
top: '15%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
color: '#333',
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 700
|
||||||
|
},
|
||||||
|
xAxis: [{
|
||||||
|
type: 'category',
|
||||||
|
offset: 10,
|
||||||
|
data: ['团队1', '团队2', '团队3', '团队4'],
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#333",
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: 200
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}],
|
||||||
|
yAxis: [{
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
series: [{
|
||||||
|
name: '新开会员',
|
||||||
|
type: 'bar',
|
||||||
|
data: [20, 34, 18, 14, 16],
|
||||||
|
barWidth: 22, //柱子宽度
|
||||||
|
barGap: 1, //柱子之间间距
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#0071c8',
|
||||||
|
opacity: 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: '激活会员',
|
||||||
|
type: 'bar',
|
||||||
|
data: [10, 24, 5, 24, 16],
|
||||||
|
barWidth: 22,
|
||||||
|
barGap: 1,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#fdc508',
|
||||||
|
opacity: 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: '关闭会员',
|
||||||
|
type: 'bar',
|
||||||
|
data: [7, 24, 18, 20, 6],
|
||||||
|
barWidth: 22,
|
||||||
|
barGap: 1,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#dfeafc',
|
||||||
|
opacity: 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
|
||||||
|
column3.setOption(option);
|
||||||
|
|
||||||
|
window.onresize = function() {
|
||||||
|
column3.resize();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,90 @@
|
||||||
|
layui.use(['echarts'], function() {
|
||||||
|
let echarts = layui.echarts;
|
||||||
|
|
||||||
|
var column4 = echarts.init(document.getElementById('column4'));
|
||||||
|
option = {
|
||||||
|
backgroundColor:'#fff',
|
||||||
|
title:{
|
||||||
|
text:"描边柱状图",
|
||||||
|
top:10,
|
||||||
|
left:15,
|
||||||
|
textStyle:{
|
||||||
|
color:"#35598d",
|
||||||
|
fontSize:16,
|
||||||
|
fontWeight:'normal'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
formatter:'{b}：{c}',
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '5%',
|
||||||
|
right: '6%',
|
||||||
|
bottom: '3%',
|
||||||
|
top: '20%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis :{
|
||||||
|
type : 'category',
|
||||||
|
data : ['策略1','策略2','策略3','策略4','策略5','策略6','策略7','策略8','策略9'],
|
||||||
|
axisLabel:{ //坐标轴字体颜色
|
||||||
|
textStyle:{
|
||||||
|
color: '#9eaaba'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine:{
|
||||||
|
lineStyle:{
|
||||||
|
color:"#e5e5e5"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick:{ //y轴刻度线
|
||||||
|
show:false
|
||||||
|
},
|
||||||
|
splitLine:{ //网格
|
||||||
|
show: false,
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis :{
|
||||||
|
type : 'value',
|
||||||
|
axisLabel:{ //坐标轴字体颜色
|
||||||
|
textStyle:{
|
||||||
|
color: '#9eaaba'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine:{
|
||||||
|
show:false,
|
||||||
|
},
|
||||||
|
axisTick:{ //y轴刻度线
|
||||||
|
show:false
|
||||||
|
},
|
||||||
|
splitLine:{ //网格
|
||||||
|
show: true,
|
||||||
|
lineStyle:{
|
||||||
|
color:'#dadde4',
|
||||||
|
type:"dashed" //坐标网线类型
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series:{
|
||||||
|
name:'',
|
||||||
|
type:'bar',
|
||||||
|
barWidth : '40%', //柱子宽度
|
||||||
|
itemStyle:{ //柱子颜色
|
||||||
|
normal:{
|
||||||
|
borderWidth: 2,
|
||||||
|
borderColor: 'rgb(79, 116, 223)',
|
||||||
|
color:'rgba(79, 116, 223, .3)',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data:[320, 332, 301, 334, 390, 330, 320, 230, 156]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
column4.setOption(option);
|
||||||
|
|
||||||
|
window.onresize = function() {
|
||||||
|
column4.resize();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,251 @@
|
||||||
|
layui.use(['echarts'], function() {
|
||||||
|
let echarts = layui.echarts;
|
||||||
|
|
||||||
|
var line2 = echarts.init(document.getElementById('line2'));
|
||||||
|
|
||||||
|
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
|
||||||
|
option = {
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
title: {
|
||||||
|
text: '全国6月销售统计',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
fontWeight: 400
|
||||||
|
},
|
||||||
|
left: 'center',
|
||||||
|
top: '5%'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
icon: 'circle',
|
||||||
|
top: '5%',
|
||||||
|
right: '5%',
|
||||||
|
itemWidth: 6,
|
||||||
|
itemGap: 20,
|
||||||
|
textStyle: {
|
||||||
|
color: '#556677'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
color: '#556677',
|
||||||
|
borderColor: 'rgba(0,0,0,0)',
|
||||||
|
shadowColor: 'rgba(0,0,0,0)',
|
||||||
|
shadowOffsetY: 0
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
textStyle: {
|
||||||
|
color: '#5c6c7c'
|
||||||
|
},
|
||||||
|
padding: [10, 10],
|
||||||
|
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '15%'
|
||||||
|
},
|
||||||
|
xAxis: [{
|
||||||
|
type: 'category',
|
||||||
|
data: ['北京', '上海', '广州', '深圳', '香港', '澳门', '台湾'],
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#DCE2E8'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
textStyle: {
|
||||||
|
color: '#556677'
|
||||||
|
},
|
||||||
|
// 默认x轴字体大小
|
||||||
|
fontSize: 12,
|
||||||
|
// margin:文字到x轴的距离
|
||||||
|
margin: 15
|
||||||
|
},
|
||||||
|
axisPointer: {
|
||||||
|
label: {
|
||||||
|
// padding: [11, 5, 7],
|
||||||
|
padding: [0, 0, 10, 0],
|
||||||
|
|
||||||
|
// 这里的margin和axisLabel的margin要一致!
|
||||||
|
margin: 15,
|
||||||
|
// 移入时的字体大小
|
||||||
|
fontSize: 12,
|
||||||
|
backgroundColor: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#fff' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
// offset: 0.9,
|
||||||
|
offset: 0.86,
|
||||||
|
|
||||||
|
color: '#fff' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 0.86,
|
||||||
|
color: '#33c0cd' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: '#33c0cd' // 100% 处的颜色
|
||||||
|
}],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
boundaryGap: false
|
||||||
|
}],
|
||||||
|
yAxis: [{
|
||||||
|
type: 'value',
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#DCE2E8'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#556677'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
type: 'value',
|
||||||
|
position: 'right',
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#556677'
|
||||||
|
},
|
||||||
|
formatter: '{value}'
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#DCE2E8'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
series: [{
|
||||||
|
name: 'Adidas',
|
||||||
|
type: 'line',
|
||||||
|
data: [10, 10, 30, 12, 15, 3, 7],
|
||||||
|
symbolSize: 1,
|
||||||
|
symbol: 'circle',
|
||||||
|
smooth: true,
|
||||||
|
yAxisIndex: 0,
|
||||||
|
showSymbol: false,
|
||||||
|
lineStyle: {
|
||||||
|
width: 5,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#9effff'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#9E87FF'
|
||||||
|
}
|
||||||
|
]),
|
||||||
|
shadowColor: 'rgba(158,135,255, 0.3)',
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetY: 20
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: colorList[0],
|
||||||
|
borderColor: colorList[0]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: 'Nike',
|
||||||
|
type: 'line',
|
||||||
|
data: [5, 12, 11, 14, 25, 16, 10],
|
||||||
|
symbolSize: 1,
|
||||||
|
symbol: 'circle',
|
||||||
|
smooth: true,
|
||||||
|
yAxisIndex: 0,
|
||||||
|
showSymbol: false,
|
||||||
|
lineStyle: {
|
||||||
|
width: 5,
|
||||||
|
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#73DD39'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#73DDFF'
|
||||||
|
}
|
||||||
|
]),
|
||||||
|
shadowColor: 'rgba(115,221,255, 0.3)',
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetY: 20
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: colorList[1],
|
||||||
|
borderColor: colorList[1]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '老北京布鞋',
|
||||||
|
type: 'line',
|
||||||
|
data: [150, 120, 170, 140, 500, 160, 110],
|
||||||
|
symbolSize: 1,
|
||||||
|
yAxisIndex: 1,
|
||||||
|
symbol: 'circle',
|
||||||
|
smooth: true,
|
||||||
|
showSymbol: false,
|
||||||
|
lineStyle: {
|
||||||
|
width: 5,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#fe9a'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#fe9a8b'
|
||||||
|
}
|
||||||
|
]),
|
||||||
|
shadowColor: 'rgba(254,154,139, 0.3)',
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetY: 20
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: colorList[2],
|
||||||
|
borderColor: colorList[2]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
line2.setOption(option);
|
||||||
|
|
||||||
|
window.onresize = function() {
|
||||||
|
line2.resize();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,149 @@
|
||||||
|
layui.use(['echarts'], function() {
|
||||||
|
let echarts = layui.echarts;
|
||||||
|
|
||||||
|
var line1 = echarts.init(document.getElementById('line1'));
|
||||||
|
|
||||||
|
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
|
||||||
|
option = {
|
||||||
|
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
tooltip: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '10%',
|
||||||
|
bottom: '6%',
|
||||||
|
left: '6%',
|
||||||
|
right: '6%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [{
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
margin: 10,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: 'rgba(#999)',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#939ab6',
|
||||||
|
opacity: .15
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: ['10:00', '10:10', '10:10', '10:30', '10:40', '10:50']
|
||||||
|
},],
|
||||||
|
yAxis: [{
|
||||||
|
type: 'value',
|
||||||
|
offset: 15,
|
||||||
|
max: 100,
|
||||||
|
min: 0,
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
margin: 10,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#999',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
|
||||||
|
}],
|
||||||
|
series: [{
|
||||||
|
name: '2',
|
||||||
|
type: 'line',
|
||||||
|
z: 3,
|
||||||
|
showSymbol: false,
|
||||||
|
smoothMonotone: 'x',
|
||||||
|
lineStyle: {
|
||||||
|
width: 3,
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0, color: 'rgba(59,102,246)' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1, color: 'rgba(118,237,252)' // 100% 处的颜色
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
shadowBlur: 4,
|
||||||
|
shadowColor: 'rgba(69,126,247,.2)',
|
||||||
|
shadowOffsetY: 4
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0, color: 'rgba(227,233,250,.9)' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1, color: 'rgba(248,251,252,.3)' // 100% 处的颜色
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
smooth: true,
|
||||||
|
data: [20, 56, 17, 40, 68, 42]
|
||||||
|
},{
|
||||||
|
name: '1',
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
smoothMonotone: 'x',
|
||||||
|
|
||||||
|
lineStyle: {
|
||||||
|
width: 3,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(255,84,108)'
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(252,140,118)'
|
||||||
|
}], false),
|
||||||
|
shadowBlur: 4,
|
||||||
|
shadowColor: 'rgba(253,121,128,.2)',
|
||||||
|
shadowOffsetY: 4
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(255,84,108,.15)'
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(252,140,118,0)'
|
||||||
|
}], false),
|
||||||
|
},
|
||||||
|
smooth: true,
|
||||||
|
data: [20, 71, 8, 50, 57, 32]
|
||||||
|
}, ]
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
line1.setOption(option);
|
||||||
|
|
||||||
|
window.onresize = function() {
|
||||||
|
line1.resize();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,112 @@
|
||||||
|
layui.use(['echarts'], function() {
|
||||||
|
let echarts = layui.echarts;
|
||||||
|
|
||||||
|
var line3 = echarts.init(document.getElementById('line3'));
|
||||||
|
|
||||||
|
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
|
||||||
|
|
||||||
|
option = {
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
title: {
|
||||||
|
text: "告警数",
|
||||||
|
left: "18px",
|
||||||
|
top: "0",
|
||||||
|
textStyle: {
|
||||||
|
color: "#999",
|
||||||
|
fontSize: 12,
|
||||||
|
fontWeight: '400'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: ['#73A0FA', '#73DEB3', '#FFB761'],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
crossStyle: {
|
||||||
|
color: '#999'
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '25',
|
||||||
|
right: '25',
|
||||||
|
bottom: '24',
|
||||||
|
top: '75',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: [ '上周', '本周'],
|
||||||
|
orient: 'horizontal',
|
||||||
|
icon: "rect",
|
||||||
|
show: true,
|
||||||
|
left: 20,
|
||||||
|
top: 25,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['爱立信端局', '中兴端局', '爱立信HSS', '中兴HSS', '华为HSS', '华为智能网', '中兴VIMS'],
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
// max: max_value>=100? max_value + 100: max_value+10,
|
||||||
|
// max: max_value > 100 ? max_value * 2 : max_value + 10,
|
||||||
|
// interval: 10,
|
||||||
|
// nameLocation: "center",
|
||||||
|
axisLabel: {
|
||||||
|
color: '#999',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#F3F4F4'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: '上周',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
data: [1800,1000,2000,1000,500,100,1200]
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// name: '钱包笔数',
|
||||||
|
// type: 'line',
|
||||||
|
// smooth: true,
|
||||||
|
// data: [13,54,34,344,35,53]
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
name: '本周',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
data: [1700,999,1100,899,199,99,1000]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
line3.setOption(option);
|
||||||
|
|
||||||
|
window.onresize = function() {
|
||||||
|
line3.resize();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,167 @@
|
||||||
|
layui.use(['echarts'], function() {
|
||||||
|
let echarts = layui.echarts;
|
||||||
|
|
||||||
|
var line4 = echarts.init(document.getElementById('line4'));
|
||||||
|
|
||||||
|
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
|
||||||
|
option = {
|
||||||
|
title: {
|
||||||
|
text: '用电量'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['2018', '2019']
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
saveAsImage: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,//坐标轴两边留白
|
||||||
|
data: ['12201', '12202', '12203','12204','12301','12302','12303','12304','12401', '12402', '12403','12404'],
|
||||||
|
axisLabel: { //坐标轴刻度标签的相关设置。
|
||||||
|
interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
|
||||||
|
// margin:15,
|
||||||
|
textStyle: {
|
||||||
|
color: '#1B253A',
|
||||||
|
fontStyle: 'normal',
|
||||||
|
fontFamily: '微软雅黑',
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
formatter:function(params) {
|
||||||
|
var newParamsName = "";
|
||||||
|
var paramsNameNumber = params.length;
|
||||||
|
var provideNumber = 4; //一行显示几个字
|
||||||
|
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
|
||||||
|
if (paramsNameNumber > provideNumber) {
|
||||||
|
for (var p = 0; p < rowNumber; p++) {
|
||||||
|
var tempStr = "";
|
||||||
|
var start = p * provideNumber;
|
||||||
|
var end = start + provideNumber;
|
||||||
|
if (p == rowNumber - 1) {
|
||||||
|
tempStr = params.substring(start, paramsNameNumber);
|
||||||
|
} else {
|
||||||
|
tempStr = params.substring(start, end) + "\n";
|
||||||
|
}
|
||||||
|
newParamsName += tempStr;
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
newParamsName = params;
|
||||||
|
}
|
||||||
|
return newParamsName
|
||||||
|
},
|
||||||
|
//rotate:50,
|
||||||
|
},
|
||||||
|
axisTick:{//坐标轴刻度相关设置。
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine:{//坐标轴轴线相关设置
|
||||||
|
lineStyle:{
|
||||||
|
color:'#E5E9ED',
|
||||||
|
// opacity:0.2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: { //坐标轴在 grid 区域中的分隔线。
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#E5E9ED',
|
||||||
|
// opacity:0.1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
splitNumber: 5,
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#a8aab0',
|
||||||
|
fontStyle: 'normal',
|
||||||
|
fontFamily: '微软雅黑',
|
||||||
|
fontSize: 12,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine:{
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick:{
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#E5E9ED',
|
||||||
|
// opacity:0.1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '2018',
|
||||||
|
type: 'line',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color:'#3A84FF',
|
||||||
|
lineStyle: {
|
||||||
|
color: "#3A84FF",
|
||||||
|
width:1
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(58,132,255,0)'
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(58,132,255,0.35)'
|
||||||
|
}]),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [ 1, 2, 3, 3, 5, 6, 5, 3, 6, 5, 5, 4]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '2019',
|
||||||
|
type: 'line',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color:'rgba(255,80,124,1)',
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(255,80,124,1)",
|
||||||
|
width:1
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(255,80,124,0)'
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(255,80,124,0.35)'
|
||||||
|
}]),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [9, 5,7,8,6,7,8,7,7,6,8,6]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
line4.setOption(option);
|
||||||
|
|
||||||
|
window.onresize = function() {
|
||||||
|
line4.resize();
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue