diff --git a/admin/data/menu.json b/admin/data/menu.json
index 44bec3a..e4568ba 100644
--- a/admin/data/menu.json
+++ b/admin/data/menu.json
@@ -334,6 +334,27 @@
"openType": "_iframe",
"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",
diff --git a/pear.config.json b/pear.config.json
index b518dbe..2038876 100644
--- a/pear.config.json
+++ b/pear.config.json
@@ -7,7 +7,7 @@
"data": "admin/data/menu.json",
"accordion": true,
"control": false,
- "select": "10"
+ "select": "4"
},
"tab": {
"muiltTab": true,
diff --git a/view/console/console2.html b/view/console/console2.html
index 0a614dc..e842ccc 100644
--- a/view/console/console2.html
+++ b/view/console/console2.html
@@ -2,7 +2,7 @@
- 首页三
+ 首页
diff --git a/view/document/area.html b/view/document/area.html
index 148e887..2034f88 100644
--- a/view/document/area.html
+++ b/view/document/area.html
@@ -1,5 +1,4 @@
-
diff --git a/view/echarts/column.html b/view/echarts/column.html
new file mode 100644
index 0000000..fc006e8
--- /dev/null
+++ b/view/echarts/column.html
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/view/echarts/line.html b/view/echarts/line.html
new file mode 100644
index 0000000..b5c1ffd
--- /dev/null
+++ b/view/echarts/line.html
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/view/echarts/script/column1.js b/view/echarts/script/column1.js
new file mode 100644
index 0000000..34849d6
--- /dev/null
+++ b/view/echarts/script/column1.js
@@ -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();
+ }
+})
diff --git a/view/echarts/script/column2.js b/view/echarts/script/column2.js
new file mode 100644
index 0000000..6a7ea8b
--- /dev/null
+++ b/view/echarts/script/column2.js
@@ -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();
+ }
+})
diff --git a/view/echarts/script/column3.js b/view/echarts/script/column3.js
new file mode 100644
index 0000000..e771f70
--- /dev/null
+++ b/view/echarts/script/column3.js
@@ -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();
+ }
+})
diff --git a/view/echarts/script/column4.js b/view/echarts/script/column4.js
new file mode 100644
index 0000000..7147c4f
--- /dev/null
+++ b/view/echarts/script/column4.js
@@ -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();
+ }
+})
diff --git a/view/echarts/script/line1.js b/view/echarts/script/line1.js
new file mode 100644
index 0000000..dcd5b8c
--- /dev/null
+++ b/view/echarts/script/line1.js
@@ -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();
+ }
+})
diff --git a/view/echarts/script/line2.js b/view/echarts/script/line2.js
new file mode 100644
index 0000000..39501f7
--- /dev/null
+++ b/view/echarts/script/line2.js
@@ -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();
+ }
+})
diff --git a/view/echarts/script/line3.js b/view/echarts/script/line3.js
new file mode 100644
index 0000000..9c81967
--- /dev/null
+++ b/view/echarts/script/line3.js
@@ -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();
+ }
+})
diff --git a/view/echarts/script/line4.js b/view/echarts/script/line4.js
new file mode 100644
index 0000000..0f0a62a
--- /dev/null
+++ b/view/echarts/script/line4.js
@@ -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();
+ }
+})