first commit
This commit is contained in:
root
47
public/demos/echarts/column.html
Executable file
47
public/demos/echarts/column.html
Executable file
@ -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="../../demos/css/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>
|
||||
47
public/demos/echarts/line.html
Executable file
47
public/demos/echarts/line.html
Executable file
@ -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="../../demos/css/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>
|
||||
137
public/demos/echarts/script/column1.js
Executable file
137
public/demos/echarts/script/column1.js
Executable file
@ -0,0 +1,137 @@
|
||||
layui.use(['echarts'], function() {
|
||||
let echarts = layui.echarts;
|
||||
var column1 = echarts.init(document.getElementById('column1'),null, {
|
||||
width: 600,
|
||||
height: 400
|
||||
});
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow' ,
|
||||
color: '#fff',
|
||||
fontSize: '26'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top:'5%',
|
||||
right:'10%',
|
||||
data: ['猕猴桃', '香蕉'],
|
||||
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,
|
||||
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,
|
||||
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();
|
||||
}
|
||||
|
||||
})
|
||||
73
public/demos/echarts/script/column2.js
Executable file
73
public/demos/echarts/script/column2.js
Executable file
@ -0,0 +1,73 @@
|
||||
layui.use(['echarts'], function() {
|
||||
let echarts = layui.echarts;
|
||||
var column2 = echarts.init(document.getElementById('column2'),null, {
|
||||
width: 600,
|
||||
height: 400
|
||||
});
|
||||
|
||||
var data = [1000, 600, 500, 300];
|
||||
option = {
|
||||
backgroundColor: '#ffffff',
|
||||
title: {
|
||||
text: 'ETC交易成功率',
|
||||
left: 'center',
|
||||
top: 2,
|
||||
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){
|
||||
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();
|
||||
}
|
||||
|
||||
})
|
||||
120
public/demos/echarts/script/column3.js
Executable file
120
public/demos/echarts/script/column3.js
Executable file
@ -0,0 +1,120 @@
|
||||
layui.use(['echarts'], function() {
|
||||
let echarts = layui.echarts;
|
||||
var column3 = echarts.init(document.getElementById('column3'),null, {
|
||||
width: 600,
|
||||
height: 400
|
||||
});
|
||||
|
||||
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
|
||||
|
||||
option = {
|
||||
backgroundColor: '#fff',
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
padding: [8, 10],
|
||||
backgroundColor: 'rgba(255,255,255,0.5)',
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['新开会员', '激活会员', '关闭会员'],
|
||||
align: 'left',
|
||||
right: 0,
|
||||
|
||||
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,
|
||||
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: {
|
||||
color: '#0071c8',
|
||||
opacity: 1,
|
||||
}
|
||||
}, {
|
||||
name: '激活会员',
|
||||
type: 'bar',
|
||||
data: [10, 24, 5, 24, 16],
|
||||
barWidth: 22,
|
||||
barGap: 1,
|
||||
itemStyle: {
|
||||
color: '#fdc508',
|
||||
opacity: 1,
|
||||
}
|
||||
}, {
|
||||
name: '关闭会员',
|
||||
type: 'bar',
|
||||
data: [7, 24, 18, 20, 6],
|
||||
barWidth: 22,
|
||||
barGap: 1,
|
||||
itemStyle: {
|
||||
color: '#dfeafc',
|
||||
opacity: 1,
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
column3.setOption(option);
|
||||
|
||||
window.onresize = function() {
|
||||
column3.resize();
|
||||
}
|
||||
|
||||
})
|
||||
84
public/demos/echarts/script/column4.js
Executable file
84
public/demos/echarts/script/column4.js
Executable file
@ -0,0 +1,84 @@
|
||||
layui.use(['echarts'], function() {
|
||||
let echarts = layui.echarts;
|
||||
var column4 = echarts.init(document.getElementById('column4'),null, {
|
||||
width: 600,
|
||||
height: 400
|
||||
});
|
||||
option = {
|
||||
backgroundColor:'#fff',
|
||||
title:{
|
||||
text:"描边柱状图",
|
||||
top:10,
|
||||
left:15,
|
||||
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:{ //坐标轴字体颜色
|
||||
color: '#9eaaba'
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:"#e5e5e5"
|
||||
}
|
||||
},
|
||||
axisTick:{ //y轴刻度线
|
||||
show:false
|
||||
},
|
||||
splitLine:{ //网格
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
yAxis :{
|
||||
type : 'value',
|
||||
axisLabel:{ //坐标轴字体颜色
|
||||
color: '#9eaaba'
|
||||
},
|
||||
axisLine:{
|
||||
show:false,
|
||||
},
|
||||
axisTick:{ //y轴刻度线
|
||||
show:false
|
||||
},
|
||||
splitLine:{ //网格
|
||||
show: true,
|
||||
lineStyle:{
|
||||
color:'#dadde4',
|
||||
type:"dashed" //坐标网线类型
|
||||
}
|
||||
}
|
||||
},
|
||||
series:{
|
||||
name:'',
|
||||
type:'bar',
|
||||
barWidth : '40%', //柱子宽度
|
||||
itemStyle:{ //柱子颜色
|
||||
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();
|
||||
}
|
||||
|
||||
})
|
||||
236
public/demos/echarts/script/line1.js
Executable file
236
public/demos/echarts/script/line1.js
Executable file
@ -0,0 +1,236 @@
|
||||
layui.use(['echarts'], function() {
|
||||
let echarts = layui.echarts;
|
||||
var line2 = echarts.init(document.getElementById('line2'),null, {
|
||||
width: 600,
|
||||
height: 400
|
||||
});
|
||||
|
||||
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
|
||||
option = {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
text: '全国6月销售统计',
|
||||
fontSize: 12,
|
||||
fontWeight: 400,
|
||||
left: 'center',
|
||||
top: '5%'
|
||||
},
|
||||
legend: {
|
||||
icon: 'circle',
|
||||
top: '5%',
|
||||
right: '5%',
|
||||
itemWidth: 6,
|
||||
itemGap: 20,
|
||||
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',
|
||||
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,
|
||||
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: {
|
||||
color: '#556677',
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}, {
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
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: true,
|
||||
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: {
|
||||
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: true,
|
||||
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: {
|
||||
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: true,
|
||||
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: {
|
||||
color: colorList[2],
|
||||
borderColor: colorList[2]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
line2.setOption(option);
|
||||
|
||||
window.onresize = function() {
|
||||
line2.resize();
|
||||
}
|
||||
|
||||
})
|
||||
148
public/demos/echarts/script/line2.js
Executable file
148
public/demos/echarts/script/line2.js
Executable file
@ -0,0 +1,148 @@
|
||||
layui.use(['echarts'], function() {
|
||||
let echarts = layui.echarts;
|
||||
var line1 = echarts.init(document.getElementById('line1'),null, {
|
||||
width: 600,
|
||||
height: 400
|
||||
});
|
||||
|
||||
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,
|
||||
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,
|
||||
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: {
|
||||
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();
|
||||
}
|
||||
|
||||
})
|
||||
102
public/demos/echarts/script/line3.js
Executable file
102
public/demos/echarts/script/line3.js
Executable file
@ -0,0 +1,102 @@
|
||||
layui.use(['echarts'], function() {
|
||||
let echarts = layui.echarts;
|
||||
|
||||
var line3 = echarts.init(document.getElementById('line3'),null, {
|
||||
width: 600,
|
||||
height: 400
|
||||
});
|
||||
|
||||
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
|
||||
|
||||
option = {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
text: "告警数",
|
||||
left: "18px",
|
||||
top: "0",
|
||||
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',
|
||||
axisLabel: {
|
||||
color: '#999',
|
||||
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: [1700, 999, 1100, 899, 199, 99, 1000]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
line3.setOption(option);
|
||||
|
||||
window.onresize = function() {
|
||||
line3.resize();
|
||||
}
|
||||
|
||||
})
|
||||
167
public/demos/echarts/script/line4.js
Executable file
167
public/demos/echarts/script/line4.js
Executable file
@ -0,0 +1,167 @@
|
||||
layui.use(['echarts'], function() {
|
||||
let echarts = layui.echarts;
|
||||
|
||||
var line4 = echarts.init(document.getElementById('line4'),null, {
|
||||
width: 600,
|
||||
height: 400
|
||||
});
|
||||
|
||||
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,
|
||||
|
||||
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: {
|
||||
|
||||
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: {
|
||||
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: {
|
||||
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();
|
||||
}
|
||||
|
||||
})
|
||||
Reference in New Issue
Block a user