diff --git a/component/pear/css/module/message.css b/component/pear/css/module/message.css index 607f1c18eed22fd1f7966c1fac735bfe55a60202..b22990241475d32f56485a671e2eb720173f17c9 100644 --- a/component/pear/css/module/message.css +++ b/component/pear/css/module/message.css @@ -19,6 +19,11 @@ border-right: 1px solid whitesmoke; } +/*排除最后一个 li 右边框*/ +.pear-notice .layui-tab-title li:last-child { + border-right: none; +} + .pear-notice * { color: dimgray !important; } diff --git a/component/pear/module/echartsTheme.js b/component/pear/module/echartsTheme.js index f64520411625d3e4f3794da6a355de8cb05fe150..2cf0bfae7297a04c7f5f612e9597fbc64fc78fdc 100644 --- a/component/pear/module/echartsTheme.js +++ b/component/pear/module/echartsTheme.js @@ -21,14 +21,10 @@ layui.define(function(exports) { }, "line": { "itemStyle": { - "normal": { "borderWidth": "3" - } }, "lineStyle": { - "normal": { "width": "4" - } }, "symbolSize": "10", "symbol": "emptyCircle", @@ -36,14 +32,10 @@ layui.define(function(exports) { }, "radar": { "itemStyle": { - "normal": { "borderWidth": "3" - } }, "lineStyle": { - "normal": { "width": "4" - } }, "symbolSize": "10", "symbol": "emptyCircle", @@ -51,11 +43,11 @@ layui.define(function(exports) { }, "bar": { "itemStyle": { - "normal": { "barBorderWidth": 0, "barBorderColor": "#ccc" - }, - "emphasis": { + }, + "emphasis": { + "itemStyle": { "barBorderWidth": 0, "barBorderColor": "#ccc" } @@ -63,11 +55,11 @@ layui.define(function(exports) { }, "pie": { "itemStyle": { - "normal": { "borderWidth": 0, "borderColor": "#ccc" - }, - "emphasis": { + }, + "emphasis": { + "itemStyle": { "borderWidth": 0, "borderColor": "#ccc" } @@ -75,11 +67,11 @@ layui.define(function(exports) { }, "scatter": { "itemStyle": { - "normal": { "borderWidth": 0, "borderColor": "#ccc" - }, - "emphasis": { + }, + "emphasis": { + "itemStyle": { "borderWidth": 0, "borderColor": "#ccc" } @@ -87,11 +79,12 @@ layui.define(function(exports) { }, "boxplot": { "itemStyle": { - "normal": { - "borderWidth": 0, - "borderColor": "#ccc" - }, - "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + + }, + "emphasis": { + "itemStyle": { "borderWidth": 0, "borderColor": "#ccc" } @@ -99,11 +92,11 @@ layui.define(function(exports) { }, "parallel": { "itemStyle": { - "normal": { "borderWidth": 0, "borderColor": "#ccc" - }, - "emphasis": { + }, + "emphasis": { + "itemStyle": { "borderWidth": 0, "borderColor": "#ccc" } @@ -111,11 +104,11 @@ layui.define(function(exports) { }, "sankey": { "itemStyle": { - "normal": { - "borderWidth": 0, - "borderColor": "#ccc" - }, - "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "itemStyle": { "borderWidth": 0, "borderColor": "#ccc" } @@ -123,11 +116,11 @@ layui.define(function(exports) { }, "funnel": { "itemStyle": { - "normal": { - "borderWidth": 0, - "borderColor": "#ccc" - }, - "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "itemStyle": { "borderWidth": 0, "borderColor": "#ccc" } @@ -135,11 +128,11 @@ layui.define(function(exports) { }, "gauge": { "itemStyle": { - "normal": { - "borderWidth": 0, - "borderColor": "#ccc" - }, - "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "itemStyle": { "borderWidth": 0, "borderColor": "#ccc" } @@ -147,27 +140,21 @@ layui.define(function(exports) { }, "candlestick": { "itemStyle": { - "normal": { - "color": "#e6a0d2", - "color0": "transparent", - "borderColor": "#e6a0d2", - "borderColor0": "#3fb1e3", - "borderWidth": "2" - } + "color": "#e6a0d2", + "color0": "transparent", + "borderColor": "#e6a0d2", + "borderColor0": "#3fb1e3", + "borderWidth": "2" } }, "graph": { "itemStyle": { - "normal": { - "borderWidth": 0, - "borderColor": "#ccc" - } + "borderWidth": 0, + "borderColor": "#ccc" }, "lineStyle": { - "normal": { "width": "1", "color": "#cccccc" - } }, "symbolSize": "10", "symbol": "emptyCircle", @@ -180,63 +167,47 @@ layui.define(function(exports) { "#c4ebad", "#96dee8" ], - "label": { - "normal": { - "textStyle": { - "color": "#ffffff" - } - } + "label": { + "color": "#ffffff" } }, "map": { "itemStyle": { - "normal": { - "areaColor": "#eeeeee", - "borderColor": "#aaaaaa", - "borderWidth": 0.5 - }, - "emphasis": { + "areaColor": "#eeeeee", + "borderColor": "#aaaaaa", + "borderWidth": 0.5 + }, + "label": { + "color": "#ffffff" + }, + "emphasis": { + "itemStyle": { "areaColor": "rgba(63,177,227,0.25)", "borderColor": "#3fb1e3", "borderWidth": 1 - } - }, - "label": { - "normal": { - "textStyle": { - "color": "#ffffff" - } }, - "emphasis": { - "textStyle": { - "color": "rgb(63,177,227)" - } + "label":{ + "color": "rgb(63,177,227)" } } }, "geo": { "itemStyle": { - "normal": { - "areaColor": "#eeeeee", - "borderColor": "#aaaaaa", - "borderWidth": 0.5 - }, - "emphasis": { + "areaColor": "#eeeeee", + "borderColor": "#aaaaaa", + "borderWidth": 0.5 + }, + "label": { + "color": "#ffffff" + }, + "emphasis": { + "itemStyle": { "areaColor": "rgba(63,177,227,0.25)", "borderColor": "#3fb1e3", "borderWidth": 1 - } - }, - "label": { - "normal": { - "textStyle": { - "color": "#ffffff" - } }, - "emphasis": { - "textStyle": { - "color": "rgb(63,177,227)" - } + "label":{ + "color": "rgb(63,177,227)" } } }, @@ -255,9 +226,9 @@ layui.define(function(exports) { }, "axisLabel": { "show": true, - "textStyle": { - "color": "#999999" - } + + "color": "#999999" + }, "splitLine": { "show": true, @@ -291,10 +262,9 @@ layui.define(function(exports) { } }, "axisLabel": { - "show": true, - "textStyle": { - "color": "#999999" - } + "show": true, + "color": "#999999" + }, "splitLine": { "show": true, @@ -328,10 +298,9 @@ layui.define(function(exports) { } }, "axisLabel": { - "show": true, - "textStyle": { - "color": "#999999" - } + "show": true, + "color": "#999999" + }, "splitLine": { "show": true, @@ -366,9 +335,9 @@ layui.define(function(exports) { }, "axisLabel": { "show": true, - "textStyle": { - "color": "#999999" - } + + "color": "#999999" + }, "splitLine": { "show": true, @@ -390,10 +359,10 @@ layui.define(function(exports) { }, "toolbox": { "iconStyle": { - "normal": { - "borderColor": "#999999" - }, - "emphasis": { + "borderColor": "#999999" + }, + "emphasis": { + "iconStyle": { "borderColor": "#666666" } } @@ -420,41 +389,34 @@ layui.define(function(exports) { "color": "#626c91", "width": 1 }, - "itemStyle": { - "normal": { - "color": "#626c91", - "borderWidth": 1 - }, - "emphasis": { - "color": "#626c91" - } - }, - "controlStyle": { - "normal": { - "color": "#626c91", - "borderColor": "#626c91", - "borderWidth": 0.5 - }, - "emphasis": { - "color": "#626c91", - "borderColor": "#626c91", - "borderWidth": 0.5 - } + "itemStyle": { + "color": "#626c91", + "borderWidth": 1 + + }, + "controlStyle": { + "color": "#626c91", + "borderColor": "#626c91", + "borderWidth": 0.5 }, "checkpointStyle": { "color": "#3fb1e3", "borderColor": "rgba(63,177,227,0.15)" }, - "label": { - "normal": { - "textStyle": { - "color": "#626c91" - } + "label": { + "color": "#626c91" + }, + "emphasis": { + "itemStyle": { + "color": "#626c91" }, - "emphasis": { - "textStyle": { - "color": "#626c91" - } + "controlStyle":{ + "color": "#626c91", + "borderColor": "#626c91", + "borderWidth": 0.5 + }, + "label":{ + "color": "#626c91" } } }, @@ -475,16 +437,12 @@ layui.define(function(exports) { } }, "markPoint": { - "label": { - "normal": { - "textStyle": { - "color": "#ffffff" - } - }, - "emphasis": { - "textStyle": { - "color": "#ffffff" - } + "label": { + "color": "#ffffff" + }, + "emphasis": { + "label": { + "color": "#ffffff" } } } diff --git a/view/console/console1.html b/view/console/console1.html index 4c3bf6952380dc59bedebf35de4432ea5a54f3bf..763eea99bc2bdbd909721b404fd4360aa5257f99 100644 --- a/view/console/console1.html +++ b/view/console/console1.html @@ -323,10 +323,10 @@ }, axisLabel: { margin: 10, - textStyle: { + //textStyle: { fontSize: 14, - color: 'rgba(#999)', - } + color: 'rgba(#999)' + //} }, splitLine: { show: true, @@ -350,10 +350,10 @@ }, axisLabel: { margin: 10, - textStyle: { + //textStyle: { fontSize: 14, - color: '#999', - } + color: '#999' + //} }, splitLine: { show: false @@ -387,7 +387,7 @@ shadowOffsetY: 4 }, areaStyle: { - normal: { + //normal: { color: { type: 'linear', x: 0, @@ -402,7 +402,7 @@ color: 'rgba(248,251,252,.3)' // 100% 处的颜色 }] } - } + //} }, smooth: true, data: [20, 56, 17, 40, 68, 42] diff --git a/view/echarts/script/column1.js b/view/echarts/script/column1.js index 34849d67245039911ecfe76db001fd70a8525492..db5e817f795283c3f775767b0790e69cb55749f7 100644 --- a/view/echarts/script/column1.js +++ b/view/echarts/script/column1.js @@ -1,26 +1,24 @@ layui.use(['echarts'], function() { let echarts = layui.echarts; - - var column1 = echarts.init(document.getElementById('column1')); + var column1 = echarts.init(document.getElementById('column1'),null, { + width: 600, + height: 400 + }); option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' , - textStyle: { - color: '#fff', - fontSize: '26' - }, + color: '#fff', + fontSize: '26' } }, legend: { top:'5%', right:'10%', data: ['猕猴桃', '香蕉'], - textStyle:{ - fontSize:12, - color:'#808080' - }, + fontSize:12, + color:'#808080', icon:'rect' }, grid: { @@ -44,7 +42,7 @@ option = { fontWeight:'bold' }, data: ['第一周', '第二周', '第三周', '第四周'], - + }], yAxis: [{ name:'单位:万', @@ -87,21 +85,19 @@ option = { 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% 处的颜色 - }] - } - }, + 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] }, { @@ -114,29 +110,28 @@ option = { 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% 处的颜色 - }] - } - }, + 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); + column1.setOption(option); - window.onresize = function() { - column1.resize(); - } + window.onresize = function() { + column1.resize(); + } + }) diff --git a/view/echarts/script/column2.js b/view/echarts/script/column2.js index 32c69333276ebfae65c342007e8920f1762b5cc4..6393cce16d15214183d2ab660efe659588b7e963 100644 --- a/view/echarts/script/column2.js +++ b/view/echarts/script/column2.js @@ -1,72 +1,73 @@ layui.use(['echarts'], function() { let echarts = layui.echarts; + var column2 = echarts.init(document.getElementById('column2'),null, { + width: 600, + height: 400 + }); - 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){ - return params.value+'%' - } - }, - series: [ + 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] - }, - ] + { + 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 index e771f702954a5cf671bb9f85f3ec2f2aa02ec63b..897e495042d8e8f32e715a858f77bee34fbfd6a3 100644 --- a/view/echarts/script/column3.js +++ b/view/echarts/script/column3.js @@ -1,32 +1,32 @@ layui.use(['echarts'], function() { let echarts = layui.echarts; + var column3 = echarts.init(document.getElementById('column3'),null, { + width: 600, + height: 400 + }); - var column3 = echarts.init(document.getElementById('column3')); - - const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'] - + const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'] + option = { backgroundColor: '#fff', tooltip: { trigger: "axis", padding: [8, 10], - backgroundColor: 'rgba(0,0,0,0.5)', + backgroundColor: 'rgba(255,255,255,0.5)', axisPointer: { type: "shadow", - textStyle: { - color: "#fff" - } + color: "#fff" } }, legend: { data: ['新开会员', '激活会员', '关闭会员'], align: 'left', right: 0, - textStyle: { + color: "#333", fontSize: 14, - fontWeight: 200 - }, + fontWeight: 200, + itemWidth: 14, itemHeight: 14, itemGap: 35 @@ -56,12 +56,11 @@ option = { show: false }, axisLabel: { - show: true, - textStyle: { - color: "#333", - fontSize: 16, - fontWeight: 200 - } + show: true, + color: "#333", + fontSize: 16, + fontWeight: 200 + }, }], yAxis: [{ @@ -86,10 +85,8 @@ option = { barWidth: 22, //柱子宽度 barGap: 1, //柱子之间间距 itemStyle: { - normal: { - color: '#0071c8', - opacity: 1, - } + color: '#0071c8', + opacity: 1, } }, { name: '激活会员', @@ -98,10 +95,8 @@ option = { barWidth: 22, barGap: 1, itemStyle: { - normal: { - color: '#fdc508', - opacity: 1, - } + color: '#fdc508', + opacity: 1, } }, { name: '关闭会员', @@ -110,17 +105,16 @@ option = { barWidth: 22, barGap: 1, itemStyle: { - normal: { - color: '#dfeafc', - opacity: 1, - } + color: '#dfeafc', + opacity: 1, } }] }; - - column3.setOption(option); + + column3.setOption(option); - window.onresize = function() { - column3.resize(); - } + window.onresize = function() { + column3.resize(); + } + }) diff --git a/view/echarts/script/column4.js b/view/echarts/script/column4.js index 7147c4fd3f9838aadcc962f53447cb2ca15866d6..6cd871f4b354afe3b9441d8dc55b58f2fcd5bca8 100644 --- a/view/echarts/script/column4.js +++ b/view/echarts/script/column4.js @@ -1,85 +1,78 @@ layui.use(['echarts'], function() { let echarts = layui.echarts; - - var column4 = echarts.init(document.getElementById('column4')); - option = { - backgroundColor:'#fff', + var column4 = echarts.init(document.getElementById('column4'),null, { + width: 600, + height: 400 + }); + option = { + backgroundColor:'#fff', title:{ text:"描边柱状图", top:10, - left:15, - textStyle:{ - color:"#35598d", - fontSize:16, - fontWeight:'normal' + 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, } }, - 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] - } + 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); @@ -87,4 +80,5 @@ layui.use(['echarts'], function() { window.onresize = function() { column4.resize(); } + }) diff --git a/view/echarts/script/line1.js b/view/echarts/script/line1.js index dcd5b8c9842d060fe1037d2313251de7a1fbffda..1a0ce7b306c24826f182718414885743fb04ffb1 100644 --- a/view/echarts/script/line1.js +++ b/view/echarts/script/line1.js @@ -1,17 +1,17 @@ layui.use(['echarts'], function() { let echarts = layui.echarts; - - var line2 = echarts.init(document.getElementById('line2')); + 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月销售统计', - textStyle: { - fontSize: 12, - fontWeight: 400 - }, + fontSize: 12, + fontWeight: 400, left: 'center', top: '5%' }, @@ -21,9 +21,7 @@ layui.use(['echarts'], function() { right: '5%', itemWidth: 6, itemGap: 20, - textStyle: { - color: '#556677' - } + color: '#556677' }, tooltip: { trigger: 'axis', @@ -41,9 +39,7 @@ layui.use(['echarts'], function() { } }, backgroundColor: '#fff', - textStyle: { - color: '#5c6c7c' - }, + color: '#5c6c7c', padding: [10, 10], extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)' }, @@ -63,9 +59,7 @@ layui.use(['echarts'], function() { }, axisLabel: { interval: 0, - textStyle: { - color: '#556677' - }, + color: '#556677', // 默认x轴字体大小 fontSize: 12, // margin:文字到x轴的距离 @@ -119,9 +113,7 @@ layui.use(['echarts'], function() { } }, axisLabel: { - textStyle: { - color: '#556677' - } + color: '#556677', }, splitLine: { show: false @@ -133,9 +125,7 @@ layui.use(['echarts'], function() { show: false }, axisLabel: { - textStyle: { - color: '#556677' - }, + color: '#556677', formatter: '{value}' }, axisLine: { @@ -156,7 +146,7 @@ layui.use(['echarts'], function() { symbol: 'circle', smooth: true, yAxisIndex: 0, - showSymbol: false, + showSymbol: true, lineStyle: { width: 5, color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ @@ -173,10 +163,8 @@ layui.use(['echarts'], function() { shadowOffsetY: 20 }, itemStyle: { - normal: { - color: colorList[0], - borderColor: colorList[0] - } + color: colorList[0], + borderColor: colorList[0] } }, { name: 'Nike', @@ -186,7 +174,7 @@ layui.use(['echarts'], function() { symbol: 'circle', smooth: true, yAxisIndex: 0, - showSymbol: false, + showSymbol: true, lineStyle: { width: 5, color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{ @@ -202,11 +190,9 @@ layui.use(['echarts'], function() { shadowBlur: 10, shadowOffsetY: 20 }, - itemStyle: { - normal: { - color: colorList[1], - borderColor: colorList[1] - } + itemStyle: { + color: colorList[1], + borderColor: colorList[1] } }, { @@ -217,7 +203,7 @@ layui.use(['echarts'], function() { yAxisIndex: 1, symbol: 'circle', smooth: true, - showSymbol: false, + showSymbol: true, lineStyle: { width: 5, color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ @@ -233,11 +219,9 @@ layui.use(['echarts'], function() { shadowBlur: 10, shadowOffsetY: 20 }, - itemStyle: { - normal: { - color: colorList[2], - borderColor: colorList[2] - } + itemStyle: { + color: colorList[2], + borderColor: colorList[2] } } ] @@ -248,4 +232,5 @@ layui.use(['echarts'], function() { window.onresize = function() { line2.resize(); } + }) diff --git a/view/echarts/script/line2.js b/view/echarts/script/line2.js index 39501f77cdb58437303b82c344eb71dbc539b2cf..c0bb5319fe044cc70b0c951268986d9fb82a864a 100644 --- a/view/echarts/script/line2.js +++ b/view/echarts/script/line2.js @@ -1,144 +1,142 @@ layui.use(['echarts'], function() { let echarts = layui.echarts; - - var line1 = echarts.init(document.getElementById('line1')); + 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, - 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 - } + + 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: { - 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', + }], + 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] - }, ] - + 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); @@ -146,4 +144,5 @@ layui.use(['echarts'], function() { window.onresize = function() { line1.resize(); } + }) diff --git a/view/echarts/script/line3.js b/view/echarts/script/line3.js index 3e82328dd9c668cc2dbfdd3522377c25a61c6fa4..12bfbc7b6496d30d35e9089120acbc5ac3ec24ed 100644 --- a/view/echarts/script/line3.js +++ b/view/echarts/script/line3.js @@ -1,7 +1,10 @@ layui.use(['echarts'], function() { let echarts = layui.echarts; - var line3 = echarts.init(document.getElementById('line3')); + var line3 = echarts.init(document.getElementById('line3'),null, { + width: 600, + height: 400 + }); const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'] @@ -10,12 +13,10 @@ layui.use(['echarts'], function() { title: { text: "告警数", left: "18px", - top: "0", - textStyle: { - color: "#999", - fontSize: 12, - fontWeight: '400' - } + top: "0", + color: "#999", + fontSize: 12, + fontWeight: '400' }, color: ['#73A0FA', '#73DEB3', '#FFB761'], tooltip: { @@ -61,10 +62,8 @@ layui.use(['echarts'], function() { yAxis: { type: 'value', axisLabel: { - color: '#999', - textStyle: { - fontSize: 12 - }, + color: '#999', + fontSize: 12 }, splitLine: { show: true, @@ -99,4 +98,5 @@ layui.use(['echarts'], function() { window.onresize = function() { line3.resize(); } + }) diff --git a/view/echarts/script/line4.js b/view/echarts/script/line4.js index 0f0a62a840053930e90421588bce3556c3ac303c..19e9f79050da3bf1dbccbe47b7a58cfe274776f3 100644 --- a/view/echarts/script/line4.js +++ b/view/echarts/script/line4.js @@ -1,66 +1,69 @@ layui.use(['echarts'], function() { let echarts = layui.echarts; - var line4 = echarts.init(document.getElementById('line4')); + 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: { + 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,//坐标轴两边留白 + 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, - }, + + 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; - } + 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 - }, + } else { + newParamsName = params; + } + return newParamsName + }, //rotate:50, }, axisTick:{//坐标轴刻度相关设置。 @@ -79,18 +82,18 @@ layui.use(['echarts'], function() { // opacity:0.1 } } - }, - yAxis: [ + }, + yAxis: [ { type: 'value', splitNumber: 5, axisLabel: { - textStyle: { - color: '#a8aab0', - fontStyle: 'normal', - fontFamily: '微软雅黑', - fontSize: 12, - } + + color: '#a8aab0', + fontStyle: 'normal', + fontFamily: '微软雅黑', + fontSize: 12 + }, axisLine:{ show: false @@ -108,54 +111,50 @@ layui.use(['echarts'], function() { } ], - 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)' - }]), - } - } + 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: { - 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: [ 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] - } - ] + data: [9, 5,7,8,6,7,8,7,7,6,8,6] + } + ] }; @@ -164,4 +163,5 @@ layui.use(['echarts'], function() { window.onresize = function() { line4.resize(); } + })