From 5314097769a68c0583da449dd10d5d2816c4d296 Mon Sep 17 00:00:00 2001 From: luyisha Date: Tue, 1 Aug 2023 16:43:37 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/config.js | 2 + src/views/cultrue/index.vue | 652 +++++++++++++++----------------- src/views/index.vue | 730 +++++++++++++++++------------------- src/views/ty/index.vue | 698 +++++++++++++++------------------- 4 files changed, 961 insertions(+), 1121 deletions(-) diff --git a/public/config.js b/public/config.js index ae464fa..c748526 100644 --- a/public/config.js +++ b/public/config.js @@ -1,4 +1,6 @@ window.publicConfig={ BASE_API:"http://192.168.66.16/api", // BASE_API:"http://10.97.121.2/api", + // socket url + WS_URL: 'ws://10.97.121.2/ws' } diff --git a/src/views/cultrue/index.vue b/src/views/cultrue/index.vue index 12beb3c..4b25d52 100644 --- a/src/views/cultrue/index.vue +++ b/src/views/cultrue/index.vue @@ -87,7 +87,7 @@ import * as echarts from "echarts"; // 引入api import * as homeApi from '@/api/home' - +let lineChart1 = null, lineChart2 = null, barChart = null; export default { data() { return { @@ -156,152 +156,11 @@ export default { let that = this; var chartDom = document.getElementById("dinschart"); // var option; - var xData = that.data24hX; + lineChart1 = echarts.init(chartDom); + + function run(){ + var xData = that.data24hX; - var data = that.data24h; - let max=data[0]; - for (let i = 0; i < data.length; i++) { - if (data[i]>max) { - max = data[i]; - } - } - let dataLenArr = [], dataBGArr = []; - data.map(item=>{ - dataLenArr.push(0);// 获取和数据一样长度的图形数组 - dataBGArr.push(max);// 数组最大值做背景柱形 - }) - // var data = [Math.random() * 300] - var option = { - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - }, - formatter: function (params) { - return params[0].name + "
" + params[0].value - } - }, - // legend: { - // data: ['厂用电量'] - // }, - grid: { - left: 0, - right: 0, - bottom: 0, - top: '10%', - containLabel: true - }, - xAxis: [{ - data: xData, - axisLine: { - lineStyle: { - color: '#0095FF', - width: 1, - type: 'solid', - }, - show: true - }, - axisTick: { - show: false, - }, - splitLine: { - show: false - }, - axisLabel: { - // interval: 0, - // rotate: 0 - show: true, - textStyle: { - color: '#fff' - } - } - }], - yAxis: [{ - type: 'value', - // name: ' 今日发电量( KWh )', - axisLine: { - show: false - }, - axisTick: { - show: false, - }, - splitLine: { - show: true, - lineStyle: { - // 使用深浅的间隔色 - color: '#027eff' - } - }, - axisLabel: { - color: '#0095FF', - } - }], - series: [{ - // name: '厂用电量', - type: 'bar', - barGap: '5%', - barWidth: '10%', - barCategoryGap: '60%', - stack: 1, - itemStyle: { - normal: { - barBorderRadius: [30, 30, 0, 0], - color: new echarts.graphic.LinearGradient( - 0, 0, 0, 1, [{ - offset: 0, - color: '#00feff' - }, - // { - // offset: 0.5, - // color: '#00feff' - // }, - { - offset: 1, - color: '#0286ff' - } - ] - ) - } - }, - data: data, - zlevel: 11 - }, - { - // name: '厂用电量', - type: 'scatter', - stack: 1, - xAxisIndex: 0, - symbolOffset: [0, 0], //相对于原本位置的偏移量 - data: dataLenArr, - itemStyle: { - normal: { - color: '#fff' - } - }, - symbolSize: 13, - zlevel: 10, - z: 2, - }, - { - name: '背景', - type: 'bar', - barWidth: '10%', - barGap: '-100%', - data: dataBGArr, - itemStyle: { - normal: { - color: '#004298', - barBorderRadius: 30, - // backgroundColor:'#091C24' - // borderColor:'#00D1F0' - } - }, - z: 1, - }, - ] - } - function run(myChart){ - that.getData24h(); var data = that.data24h; let max=data[0]; for (let i = 0; i < data.length; i++) { @@ -311,225 +170,327 @@ export default { } let dataLenArr = [], dataBGArr = []; data.map(item=>{ - dataLenArr.push(0);// 获取和数据一样长度的底部图形数组； + dataLenArr.push(0);// 获取和数据一样长度的图形数组 dataBGArr.push(max);// 数组最大值做背景柱形 }) - myChart.setOption({ - animation: true, - xAxis: { - data: that.data24hX + + var option = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + }, + formatter: function (params) { + return params[0].name + "
" + params[0].value + } + }, + // legend: { + // data: ['厂用电量'] + // }, + grid: { + left: 0, + right: 0, + bottom: 0, + top: '10%', + containLabel: true }, + xAxis: [{ + data: xData, + axisLine: { + lineStyle: { + color: '#0095FF', + width: 1, + type: 'solid', + }, + show: true + }, + axisTick: { + show: false, + }, + splitLine: { + show: false + }, + axisLabel: { + // interval: 0, + // rotate: 0 + show: true, + textStyle: { + color: '#fff' + } + } + }], + yAxis: [{ + type: 'value', + // name: ' 今日发电量( KWh )', + axisLine: { + show: false + }, + axisTick: { + show: false, + }, + splitLine: { + show: true, + lineStyle: { + // 使用深浅的间隔色 + color: '#027eff' + } + }, + axisLabel: { + color: '#0095FF', + } + }], series: [{ - type: 'bar', - data: data, + // name: '厂用电量', + type: 'bar', + barGap: '5%', + barWidth: '10%', + barCategoryGap: '60%', + stack: 1, + itemStyle: { + normal: { + barBorderRadius: [30, 30, 0, 0], + color: new echarts.graphic.LinearGradient( + 0, 0, 0, 1, [{ + offset: 0, + color: '#00feff' + }, + // { + // offset: 0.5, + // color: '#00feff' + // }, + { + offset: 1, + color: '#0286ff' + } + ] + ) + } }, - { - type: 'scatter', - data: dataLenArr + data: data, + zlevel: 11 + }, + { + // name: '厂用电量', + type: 'scatter', + stack: 1, + xAxisIndex: 0, + symbolOffset: [0, 0], //相对于原本位置的偏移量 + data: dataLenArr, + itemStyle: { + normal: { + color: '#fff' + } }, - { - name: '背景', - type: 'bar', - data: dataBGArr + symbolSize: 13, + zlevel: 10, + z: 2, + }, + { + name: '背景', + type: 'bar', + barWidth: '10%', + barGap: '-100%', + data: dataBGArr, + itemStyle: { + normal: { + color: '#004298', + barBorderRadius: 30, + // backgroundColor:'#091C24' + // borderColor:'#00D1F0' + } }, + z: 1, + }, ] - }); + } + option && lineChart1.setOption(option); } - // 加延时器使图像绘制获取元素宽高最新的值2 - setTimeout(() => { - var myChart = echarts.init(chartDom); - option && myChart.setOption(option); - that.timer1 = setInterval(function () { - myChart.clear(); - option && myChart.setOption(option); - run(myChart); - }, 3000); - }, 200); + + run(); + that.timer1 = setInterval(function () { + lineChart1.clear(); + run(); + }, 3000); }, // 各场馆服务人次趋势 cultrue_bar2() { let that = this; var chartDom = document.getElementById("pcgchart"); - + lineChart2 = echarts.init(chartDom); var option - var xData = that.rsqsXData; - var name = that.rsqsDataName; - // console.log(that.rsqsDataName, 'that.rsqsDataName') - // = ['体育场', '体育馆', '游泳场馆']; - var data = that.rsqsDataAll; - var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',] - let iconData = []; - that.rsqsDataName.forEach((item, index)=>{ - if(index==0){ - iconData.push({icon: 'image://img/tyc_icon.png', name: name[0]}) - }else if(index==1){ - iconData.push({icon: 'image://img/tyg_icon.png', name: name[1]}) - }else if(index==2){ - iconData.push({icon: 'image://img/yyg_icon.png', name: name[2]}) - } - }) - - var series = []; - for (var i = 0; i < data.length; i++) { - series.push({ - name: name[i], - type: "line", - symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ] - symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' - smooth: true, //是否平滑曲线显示 - showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示 - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - offset: 0, - color: color[i] - }, { - offset: 0.8, - color: 'rgba(255,255,255,0)' - }], false), - // shadowColor: 'rgba(255,255,255, 0.1)', - shadowBlur: 10, - opacity: 0.3, - } - }, - itemStyle: { - normal: { - color: color[i], - lineStyle: { - width: 1, - type: 'solid' //'dotted'虚线 'solid'实线 - }, - borderColor: color[i], //图形的描边颜色。支持的格式同 color - borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] - barBorderRadius: 0, - label: { - show: false, - }, - opacity: 0.5, - } - }, - data: data[i], - + + function run(){ + var xData = that.rsqsXData; + var name = that.rsqsDataName; + // console.log(that.rsqsDataName, 'that.rsqsDataName') + // = ['体育场', '体育馆', '游泳场馆']; + var data = that.rsqsDataAll; + var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',] + let iconData = []; + that.rsqsDataName.forEach((item, index)=>{ + if(index==0){ + iconData.push({icon: 'image://img/tyc_icon.png', name: name[0]}) + }else if(index==1){ + iconData.push({icon: 'image://img/tyg_icon.png', name: name[1]}) + }else if(index==2){ + iconData.push({icon: 'image://img/yyg_icon.png', name: name[2]}) + } }) - } - option = { - // backgroundColor: "#141f56", - legend: { - top: 0, - left: 0, - itemGap: 20, - itemWidth: 20, - itemHeight: 20, - textStyle: { - color: '#fff', - fontSize: '14', - // padding: [1, 12] - }, - data: iconData - }, - title: { - // text: "负面言论分领域趋势", - textStyle: { - color: '#fff', - fontSize: '22', - fontWeight: 'normal', - }, - subtextStyle: { - color: '#90979c', - fontSize: '16', + var series = []; + for (var i = 0; i < data.length; i++) { + series.push({ + name: name[i], + type: "line", + symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ] + symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' + smooth: true, //是否平滑曲线显示 + showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示 + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, + color: color[i] + }, { + offset: 0.8, + color: 'rgba(255,255,255,0)' + }], false), + // shadowColor: 'rgba(255,255,255, 0.1)', + shadowBlur: 10, + opacity: 0.3, + } + }, + itemStyle: { + normal: { + color: color[i], + lineStyle: { + width: 1, + type: 'solid' //'dotted'虚线 'solid'实线 + }, + borderColor: color[i], //图形的描边颜色。支持的格式同 color + borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] + barBorderRadius: 0, + label: { + show: false, + }, + opacity: 0.5, + } + }, + data: data[i], + }) + } + option = { + // backgroundColor: "#141f56", + legend: { + top: 0, + left: 0, + itemGap: 20, + itemWidth: 20, + itemHeight: 20, + + textStyle: { + color: '#fff', + fontSize: '14', + // padding: [1, 12] + }, + data: iconData }, - }, - tooltip: { - trigger: "axis", - axisPointer: { // 坐标轴指示器，坐标轴触发有效 - type: 'line', // 默认为直线，可选为：'line' | 'shadow' - lineStyle: { - color: '#57617B' - } - }, - formatter: '{b}
{a0}: {c0}
{a1}: {c1}
{a2}: {c2}', - backgroundColor: 'rgba(0,0,0,0.7)', // 背景 - padding: [8, 10], //内边距 - extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影 - }, - grid: { - borderWidth: 0, - top: 50, - bottom: 30, - right: 0, - left: 30, - textStyle: { - color: "#fff" - } - }, - xAxis: [{ - type: "category", - axisLine: { - show: false, - }, - splitLine: { - show: false, - }, - boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样 - axisTick: { - show: false - }, - splitArea: { - show: false - }, - axisLabel: { - inside: false, + title: { + // text: "负面言论分领域趋势", textStyle: { - color: '#FFFFFF', + color: '#fff', + fontSize: '22', fontWeight: 'normal', - fontSize: '12', + }, + subtextStyle: { + color: '#90979c', + fontSize: '16', + }, }, - data: xData, - }], - yAxis: { - type: 'value', - axisTick: { - show: false - }, - axisLine: { - show: false, + tooltip: { + trigger: "axis", + axisPointer: { // 坐标轴指示器，坐标轴触发有效 + type: 'line', // 默认为直线，可选为：'line' | 'shadow' + lineStyle: { + color: '#57617B' + } + }, + formatter: '{b}
{a0}: {c0}
{a1}: {c1}
{a2}: {c2}', + backgroundColor: 'rgba(0,0,0,0.7)', // 背景 + padding: [8, 10], //内边距 + extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影 }, - splitLine: { - show: true, - lineStyle: { - color: '#32346c ', + grid: { + borderWidth: 0, + top: 50, + bottom: 30, + right: 0, + left: 30, + textStyle: { + color: "#fff" } }, - axisLabel: { - textStyle: { - color: '#0095FF', - fontWeight: 'normal', - fontSize: '12', + xAxis: [{ + type: "category", + axisLine: { + show: false, + }, + splitLine: { + show: false, + }, + boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样 + axisTick: { + show: false + }, + splitArea: { + show: false + }, + axisLabel: { + inside: false, + textStyle: { + color: '#FFFFFF', + fontWeight: 'normal', + fontSize: '12', + }, + }, + data: xData, + }], + yAxis: { + type: 'value', + axisTick: { + show: false + }, + axisLine: { + show: false, + }, + splitLine: { + show: true, + lineStyle: { + color: '#32346c ', + } + }, + axisLabel: { + textStyle: { + color: '#0095FF', + fontWeight: 'normal', + fontSize: '12', + }, + formatter: '{value}', }, - formatter: '{value}', }, - }, - series: series, - } - function run(myChart){ - // 获取新数据-处理 - myChart.setOption({ - series: series - }); + series: series, + } + option && lineChart2.setOption(option); } - setTimeout(() => { - var myChart = echarts.init(chartDom); - option && myChart.setOption(option); - that.timer2 = setInterval(function () { - myChart.clear(); - option && myChart.setOption(option); - run(myChart); - }, 3000); - }, 200); + + run(); + that.timer2 = setInterval(function () { + lineChart2.clear(); + run(); + }, 3000); }, // 图书馆统计图数据 @@ -548,10 +509,10 @@ export default { cultrue_bar3() { let that = this; var chartDom = document.getElementById("tsgchart"); + barChart = echarts.init(chartDom); var option; - function run(myChart){ - // 获取新数据-处理 + function run(){ var data = [{ name: '今日办证人数', icon: '../../assets/wh/wh_right3.png', @@ -806,17 +767,14 @@ export default { } }] }; - option && myChart.setOption(option); + option && barChart.setOption(option); } - setTimeout(() => { - var myChart = echarts.init(chartDom); - run(myChart); - that.timer3 = setInterval(function () { - myChart.clear(); - that.getLibraryData(); - run(myChart); - }, 3000); - }, 200); + + run(); + that.timer3 = setInterval(function () { + barChart.clear(); + run(); + }, 3000); }, addNumber(start, end, id) { var o = document.getElementById(id); diff --git a/src/views/index.vue b/src/views/index.vue index 6f98502..8eaddec 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -152,7 +152,7 @@ import * as echarts from "echarts"; // 引入api import * as homeApi from '@/api/home' - +let barChart = null, lineChart = null, pieChart = null; export default { data() { return { @@ -199,22 +199,24 @@ export default { mounted() { this.getStat(); - this.btgetdata(); this.getPieData(); this.getInfoDatas(); this.getGcgNumDatas(); - + this.autoTimer0(); + setTimeout(() => { + // 加延时器使图像绘制获取元素宽高最新的值、等待接口返回数据 this.home_bar(); this.line_zone(); this.index_pie1(); }, 1000) - this.autoTimer0(); + this.getsckdata(); }, methods: { autoTimer0(){ let that = this; + this.btgetdata(); clearInterval(that.timer0); that.timer0 = setInterval(() => { if(this.klselt == 'y'){ @@ -269,196 +271,12 @@ export default { home_bar() { let that = this; var chartDom = document.getElementById("homebar"); - var myChart = echarts.init(chartDom); var option; - - let xData = this.klqsXDatas.slice(-8,this.klqsXDatas.length); - var data = this.klqsDatas.slice(-8,this.klqsDatas.length); - let max=data[0]; - for (let i = 0; i < data.length; i++) { - if (data[i]>max) { - max = data[i]; - } - } - let dataLenArr = [], dataBGArr = []; - data.map(item=>{ - dataLenArr.push(1);// 获取和数据一样长度的底部图形数组； - dataBGArr.push(max);// 数组最大值做背景柱形 - }) + barChart = echarts.init(chartDom); - option = { - // backgroundColor: '#031245', - color: [ - '#63caff', - '#49beff', - '#03387a', - '#03387a', - '#03387a', - '#6c93ee', - '#a9abff', - '#f7a23f', - '#27bae7', - '#ff6d9d', - '#cb79ff', - '#f95b5a', - '#ccaf27', - '#38b99c', - '#93d0ff', - '#bd74e0', - '#fd77da', - '#dea700', - ], - grid: { - containLabel: true, - left: 30, - right: 0, - bottom: 10, - top: 20, - }, - xAxis: { - axisLabel: { - color: '#FFFFFF', - fontSize: 12, - interval: 0, - // show: false, - }, - axisTick: { - lineStyle: { - color: '#384267', - }, - show: false, - }, - splitLine: { - show: false, - }, - axisLine: { - lineStyle: { - color: '#0095FF', - width: 1, - type: 'solid', - }, - show: true, - }, - data: xData, - type: 'category', - }, - yAxis: { - // show:false, - axisLabel: { - color: '#0095FF', - fontSize: 14, - }, - axisTick: { - lineStyle: { - color: '#0095FF', - width: 1, - }, - show: false, - }, - splitLine: { - show: true, - lineStyle: { - color: '#0095FF', - type: 'solid', - }, - }, - axisLine: { - lineStyle: { - color: '#0095FF', - width: 1, - type: 'solid', - }, - show: false, - }, - name: '', - }, - series: [ - { - data: data, - type: 'bar', - barMaxWidth: 'auto', - barWidth: 10, - itemStyle: { - normal: { - color: function () { - return new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [ - { offset: 0, color: "#00B4FF" }, - { offset: 1, color: "#2F00FF" } - ], false) - }, - label: { - show: false,//柱状上的数据 - } - }, - - }, - label: { - show: true, - position: 'top', - distance: 15, - color: '#fff', - }, - }, - { - data: data, - type: 'pictorialBar', - barMaxWidth: '10', - symbolPosition: 'end', - symbol: 'circle', - symbolOffset: [0, '-50%'], - symbolSize: [10, 5], - zlevel: 2, - color: 'rgba(255,255,255,0.7)', - // 立体柱形的顶部图形 - }, - { - data: dataBGArr, - type: 'bar', - barGap: '-100%', - barMaxWidth: 'auto', - barWidth: 10, - zlevel: -1, - color: 'rgba(0, 75, 187, 0.2)', - // 立体柱形的背景图形 - }, - { - data: dataBGArr, - type: 'pictorialBar', - barMaxWidth: '10', - symbolPosition: 'end', - symbol: 'circle', - symbolOffset: [0, '-50%'], - symbolSize: [10, 5], - zlevel: 2, - color: 'rgba(0, 75, 187, 0.5)', - // 立体柱形的背景图形顶部 - }, - ], - tooltip: { - show: "true", - trigger: 'item', - backgroundColor: 'rgba(0,0,0,0.7)', // 背景 - padding: [8, 10], //内边距 - textStyle: { - color: '#fff' - }, - extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影 - - }, - }; - - option && myChart.setOption(option); - function run(myChart) { - if(that.klselt == 'd'){ - that.btgetdata(); - }else if(that.klselt == 'm'){ - that.btgetdata() - }else if(that.klselt == 'y'){ - that.btgetdata() - } + function run() { let xData = that.klqsXDatas.slice(-8,that.klqsXDatas.length); - let data = that.klqsDatas.slice(-8,that.klqsDatas.length); - + var data = that.klqsDatas.slice(-8,that.klqsDatas.length); let max=data[0]; for (let i = 0; i < data.length; i++) { if (data[i]>max) { @@ -470,35 +288,175 @@ export default { dataLenArr.push(1);// 获取和数据一样长度的底部图形数组； dataBGArr.push(max);// 数组最大值做背景柱形 }) - myChart.setOption({ + + option = { + // backgroundColor: '#031245', + color: [ + '#63caff', + '#49beff', + '#03387a', + '#03387a', + '#03387a', + '#6c93ee', + '#a9abff', + '#f7a23f', + '#27bae7', + '#ff6d9d', + '#cb79ff', + '#f95b5a', + '#ccaf27', + '#38b99c', + '#93d0ff', + '#bd74e0', + '#fd77da', + '#dea700', + ], + grid: { + containLabel: true, + left: 30, + right: 0, + bottom: 10, + top: 20, + }, xAxis: { - data: xData + axisLabel: { + color: '#FFFFFF', + fontSize: 12, + interval: 0, + // show: false, + }, + axisTick: { + lineStyle: { + color: '#384267', + }, + show: false, + }, + splitLine: { + show: false, + }, + axisLine: { + lineStyle: { + color: '#0095FF', + width: 1, + type: 'solid', + }, + show: true, + }, + data: xData, + type: 'category', + }, + yAxis: { + // show:false, + axisLabel: { + color: '#0095FF', + fontSize: 14, + }, + axisTick: { + lineStyle: { + color: '#0095FF', + width: 1, + }, + show: false, + }, + splitLine: { + show: true, + lineStyle: { + color: '#0095FF', + type: 'solid', + }, + }, + axisLine: { + lineStyle: { + color: '#0095FF', + width: 1, + type: 'solid', + }, + show: false, + }, + name: '', }, series: [ { + data: data, type: 'bar', - data: data + barMaxWidth: 'auto', + barWidth: 10, + itemStyle: { + normal: { + color: function () { + return new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [ + { offset: 0, color: "#00B4FF" }, + { offset: 1, color: "#2F00FF" } + ], false) + }, + label: { + show: false,//柱状上的数据 + } + }, + + }, + label: { + show: true, + position: 'top', + distance: 15, + color: '#fff', + }, }, { + data: data, type: 'pictorialBar', - data: data + barMaxWidth: '10', + symbolPosition: 'end', + symbol: 'circle', + symbolOffset: [0, '-50%'], + symbolSize: [10, 5], + zlevel: 2, + color: 'rgba(255,255,255,0.7)', + // 立体柱形的顶部图形 }, { + data: dataBGArr, type: 'bar', - data: dataBGArr + barGap: '-100%', + barMaxWidth: 'auto', + barWidth: 10, + zlevel: -1, + color: 'rgba(0, 75, 187, 0.2)', + // 立体柱形的背景图形 }, { + data: dataBGArr, type: 'pictorialBar', - data: dataBGArr - } - ] - }); + barMaxWidth: '10', + symbolPosition: 'end', + symbol: 'circle', + symbolOffset: [0, '-50%'], + symbolSize: [10, 5], + zlevel: 2, + color: 'rgba(0, 75, 187, 0.5)', + // 立体柱形的背景图形顶部 + }, + ], + tooltip: { + show: "true", + trigger: 'item', + backgroundColor: 'rgba(0,0,0,0.7)', // 背景 + padding: [8, 10], //内边距 + textStyle: { + color: '#fff' + }, + extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影 + + }, + }; + + option && barChart.setOption(option); } - clearInterval(that.timer1);//这个定时器看似多余，但是注释会影响效果，先保留 + run(); + clearInterval(that.timer1); that.timer1 = setInterval(function () { - myChart.clear(); - option && myChart.setOption(option); - run(myChart); + barChart.clear(); + run(); }, 5000); }, @@ -507,177 +465,175 @@ export default { let that = this; var chartDom = document.getElementById("kl-line"); var option; + lineChart = echarts.init(chartDom); - function run(myChart){ - // 获取新数据-处理 - that.getGcgNumDatas(); - setTimeout(() => { - var xData = that.rsqsXData; - var gcolor = ['#ff9acc', '#6666FF', '#FF6600', '#02ff00', '#00ffff', '#fdff00']; - - var data = that.rsqsData_z; - - var series = []; - for (var i = 0; i < data.length; i++) { - series.push({ - name: that.rsqsDataName[i], - type: "line", - symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ] - symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' - smooth: true, //是否平滑曲线显示 - showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示 - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - offset: 0, - color: gcolor[i] - }, { - offset: 0.8, - color: '#fff', - }], false), - // shadowColor: 'rgba(255,255,255, 0.1)', - shadowBlur: 10, - opacity: 0.3, - } - }, - itemStyle: { - normal: { - color: gcolor[i], - lineStyle: { - width: 1, - type: 'solid' //'dotted'虚线 'solid'实线 - }, - borderColor: gcolor[i], //图形的描边颜色。支持的格式同 color - borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] - barBorderRadius: 0, - label: { - show: false, - }, - opacity: 0.5, - } - }, - data: data[i], + function run(){ + // 获取新数据-处理--改用ws处理数据 + // that.getGcgNumDatas(); + + var xData = that.rsqsXData; + var gcolor = ['#ff9acc', '#6666FF', '#FF6600', '#02ff00', '#00ffff', '#fdff00']; + + var data = that.rsqsData_z; + + var series = []; + for (var i = 0; i < data.length; i++) { + series.push({ + name: that.rsqsDataName[i], + type: "line", + symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ] + symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' + smooth: true, //是否平滑曲线显示 + showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示 + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, + color: gcolor[i] + }, { + offset: 0.8, + color: '#fff', + }], false), + // shadowColor: 'rgba(255,255,255, 0.1)', + shadowBlur: 10, + opacity: 0.3, + } + }, + itemStyle: { + normal: { + color: gcolor[i], + lineStyle: { + width: 1, + type: 'solid' //'dotted'虚线 'solid'实线 + }, + borderColor: gcolor[i], //图形的描边颜色。支持的格式同 color + borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] + barBorderRadius: 0, + label: { + show: false, + }, + opacity: 0.5, + } + }, + data: data[i], - }) - } - // setting option - option = { - // backgroundColor: "#141f56", - legend: { - top: 0, - right: 0, - bottom: 0, - itemGap: 15, - itemWidth: 15, - textStyle: { - color: '#fff', - fontSize: '14' - }, - data: name + }) + } + // setting option + option = { + // backgroundColor: "#141f56", + legend: { + top: 0, + right: 0, + bottom: 0, + itemGap: 15, + itemWidth: 15, + textStyle: { + color: '#fff', + fontSize: '14' }, - title: { - // text: "负面言论分领域趋势", + data: name + }, + title: { + // text: "负面言论分领域趋势", + textStyle: { + color: '#fff', + fontSize: '22', + fontWeight: 'normal', + }, + subtextStyle: { + color: '#90979c', + fontSize: '16', + + }, + }, + tooltip: { + trigger: "axis", + axisPointer: { // 坐标轴指示器，坐标轴触发有效 + type: 'line', // 默认为直线，可选为：'line' | 'shadow' + lineStyle: { + color: '#57617B' + } + }, + formatter: '{b}
{a0}: {c0}
{a1}: {c1}
{a2}: {c2}
{a3}: {c3}
{a4}: {c4}
{a5}: {c5}', + backgroundColor: '#000', // 背景 + padding: [8, 10], //内边距 + extraCssText: 'box-shadow: 0 0 3px #fffff;', //添加阴影 + }, + grid: { + borderWidth: 0, + top: 10, + bottom: 20, + right: 0, + left: 50, + textStyle: { + color: "#fff" + } + }, + xAxis: [{ + type: "category", + axisLine: { + show: false, + }, + splitLine: { + show: true, + lineStyle: { + color: '#0B0765', + } + }, + boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样 + axisTick: { + show: false + }, + splitArea: { + show: false + }, + axisLabel: { + inside: false, textStyle: { - color: '#fff', - fontSize: '22', + color: '#FFFFFF', fontWeight: 'normal', - }, - subtextStyle: { - color: '#90979c', - fontSize: '16', - + fontSize: '12', }, }, - tooltip: { - trigger: "axis", - axisPointer: { // 坐标轴指示器，坐标轴触发有效 - type: 'line', // 默认为直线，可选为：'line' | 'shadow' - lineStyle: { - color: '#57617B' - } - }, - formatter: '{b}
{a0}: {c0}
{a1}: {c1}
{a2}: {c2}
{a3}: {c3}
{a4}: {c4}
{a5}: {c5}', - backgroundColor: '#000', // 背景 - padding: [8, 10], //内边距 - extraCssText: 'box-shadow: 0 0 3px #fffff;', //添加阴影 + data: xData, + }], + yAxis: { + type: 'value', + axisTick: { + show: false }, - grid: { - borderWidth: 0, - top: 10, - bottom: 20, - right: 0, - left: 50, - textStyle: { - color: "#fff" + axisLine: { + show: true, + lineStyle: { + color: '#0B0765', } }, - xAxis: [{ - type: "category", - axisLine: { - show: false, - }, - splitLine: { - show: true, - lineStyle: { - color: '#0B0765', - } - }, - boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样 - axisTick: { - show: false - }, - splitArea: { - show: false - }, - axisLabel: { - inside: false, - textStyle: { - color: '#FFFFFF', - fontWeight: 'normal', - fontSize: '12', - }, - }, - data: xData, - }], - yAxis: { - type: 'value', - axisTick: { - show: false - }, - axisLine: { - show: true, - lineStyle: { - color: '#0B0765', - } - }, - splitLine: { - show: true, - lineStyle: { - color: '#0B0765', - } - }, - axisLabel: { - textStyle: { - color: '#0095FF', - fontWeight: 'normal', - fontSize: '12', - }, - formatter: '{value}', + splitLine: { + show: true, + lineStyle: { + color: '#0B0765', + } + }, + axisLabel: { + textStyle: { + color: '#0095FF', + fontWeight: 'normal', + fontSize: '12', }, + formatter: '{value}', }, - series: series, - } - option && myChart.setOption(option); - }, 200); + }, + series: series, + } + option && lineChart.setOption(option); + } - setTimeout(()=>{ - var myChart = echarts.init(chartDom); - run(myChart); - that.timer3 = setInterval(function () { - myChart.clear(); - run(myChart); - }, 3000); - }, 200) + run(); + that.timer3 = setInterval(function () { + lineChart.clear(); + run(); + }, 3000); }, addNumber(start, end, id) { @@ -794,6 +750,8 @@ export default { }, index_pie1(){ let that = this; + var pieDom1 = document.getElementById("indexPie1"); + pieChart = echarts.init(pieDom1); // var dataP = [ // {name: '体育场',value: 5,}, // {name: '体育馆',value: 20,}, @@ -818,9 +776,8 @@ export default { ); } - function run(myChart){ + function run(){ var dataP = that.dataP; - // 获取新数据-处理 let color = ['#ff9acc', '#6666ff', '#ff6600', '#02ff00','#00ffff', '#fdff00']; let color1=[], color2=[], color3=[]; // 设置每层圆环颜色和添加间隔的透明色 @@ -916,20 +873,41 @@ export default { }, ], } - option && myChart.setOption(option); + option && pieChart.setOption(option); } - // 加延时器使图像绘制获取元素宽高最新的值 - setTimeout(()=>{ - var pieDom1 = document.getElementById("indexPie1"); - var myChart = echarts.init(pieDom1); - run(myChart); - that.timer4 = setInterval(function () { - myChart.clear(); - that.getPieData(); - run(myChart); - }, 4000); - }, 200) + run(); + that.timer4 = setInterval(function () { + pieChart.clear(); + run(); + }, 4000); + }, + // 获取实时数据 + getsckdata(){ + let that = this; + // websocket + const ws = new WebSocket("ws://192.168.66.16/rt"); + ws.onopen = function() { + // console.log("ws connected success!") + }; + ws.onmessage = (e)=> { + var jstr = JSON.parse(e.data) + // console.log("11111", jstr, e); + if(!jstr){ + return; + } + const pieData = jstr.realTimeData.data; + + that.proportionData = [];that.groupNameData=[];that.dataP=[]; + pieData.forEach((item) => { + that.proportionData.push(item.proportion); + that.groupNameData.push(item.groupName); + that.dataP.push({ + name:item.groupName, + value:item.proportion.split('%')[0] + }) + }) + }; }, }, beforeDestroy(){ diff --git a/src/views/ty/index.vue b/src/views/ty/index.vue index 88cac2f..4718238 100644 --- a/src/views/ty/index.vue +++ b/src/views/ty/index.vue @@ -153,7 +153,7 @@ import * as echarts from "echarts"; // 引入api import * as homeApi from '@/api/home' - +let lineChart1 = null, lineChart2 = null; export default { components: { @@ -213,11 +213,11 @@ export default { }; }, - created() { + created() { // do nothing }, - mounted() { + mounted() { let cc = window.document.getElementById("app"); // 清除其他多余的classname setTimeout(() => { @@ -241,7 +241,7 @@ export default { this.ty_bar1()//24小时总服务 this.ty_pieDo()//右上角占比 this.ty_bar3()//右下角趋势图 - }, 200); + }, 500); }) @@ -264,142 +264,10 @@ export default { ty_bar1() { let that = this; - // var xData = that.data24hX; - var data24h = that.data24h; - let max=data24h[0]; - for (let i = 0; i < data24h.length; i++) { - if (data24h[i]>max) { - max = data24h[i]; - } - } - let dataLenArr = [], dataBGArr = []; - data24h.map(item=>{ - dataLenArr.push(0);// 获取和数据一样长度的圆点图形数组 - dataBGArr.push(max);// 数组最大值做背景柱形 - }) - - var option = { - animation: true, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - }, - }, - - grid: { - left: 0, - right: 0, - bottom: '3%', - top: '10%', - containLabel: true - }, - xAxis: [{ - data: that.data24hX, - axisLine: { - lineStyle: { - color: '#0095FF', - width: 1, - type: 'solid', - }, - show: true - }, - axisTick: { - show: false, - }, - splitLine: { - show: false - }, - axisLabel: { - // interval: 0, - // rotate: 0 - show: true, - textStyle: { - color: '#fff' - } - } - }], - yAxis: [{ - type: 'value', - axisLine: { - show: false - }, - axisTick: { - show: false, - }, - splitLine: { - show: true, - lineStyle: { - // 使用深浅的间隔色 - color: '#027eff' - } - }, - axisLabel: { - color: '#0095FF', - } - }], - series: [{ - type: 'bar', - barGap: '5%', - barWidth: '10%', - barCategoryGap: '60%', - stack: 1, - itemStyle: { - normal: { - barBorderRadius: [30, 30, 0, 0], - color: new echarts.graphic.LinearGradient( - 0, 0, 0, 1, [{ - offset: 0, - color: '#00EAFF' - }, - { - offset: 1, - color: '#001AFF' - } - ] - ) - } - }, - data: data24h, - zlevel: 11 - }, - { - type: 'scatter', - stack: 1, - xAxisIndex: 0, - symbolOffset: [0, 0], //相对于原本位置的偏移量 - data: dataLenArr, - itemStyle: { - normal: { - color: '#fff' - } - }, - symbolSize: 13, - zlevel: 10, - z: 2, - }, - { - name: '背景', - type: 'bar', - barWidth: '10%', - barGap: '-100%', - data: dataBGArr, - itemStyle: { - normal: { - color: '#004298', - barBorderRadius: 30, - // backgroundColor:'#091C24' - // borderColor:'#00D1F0' - } - }, - z: 1, - }, - ] - } - - function run(myChart){ - that.getData24h(); - let data24h = that.data24h; + lineChart1 = echarts.init(this.$refs.dinschart); + + function run(){ + var data24h = that.data24h; let max=data24h[0]; for (let i = 0; i < data24h.length; i++) { if (data24h[i]>max) { @@ -408,296 +276,330 @@ export default { } let dataLenArr = [], dataBGArr = []; data24h.map(item=>{ - dataLenArr.push(0);// 获取和数据一样长度的底部图形数组； + dataLenArr.push(0);// 获取和数据一样长度的圆点图形数组 dataBGArr.push(max);// 数组最大值做背景柱形 }) - myChart.setOption({ + + var option = { animation: true, - xAxis: { - data: that.data24hX + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + }, + }, + + grid: { + left: 0, + right: 0, + bottom: '3%', + top: '10%', + containLabel: true }, + xAxis: [{ + data: that.data24hX, + axisLine: { + lineStyle: { + color: '#0095FF', + width: 1, + type: 'solid', + }, + show: true + }, + axisTick: { + show: false, + }, + splitLine: { + show: false + }, + axisLabel: { + // interval: 0, + // rotate: 0 + show: true, + textStyle: { + color: '#fff' + } + } + }], + yAxis: [{ + type: 'value', + axisLine: { + show: false + }, + axisTick: { + show: false, + }, + splitLine: { + show: true, + lineStyle: { + // 使用深浅的间隔色 + color: '#027eff' + } + }, + axisLabel: { + color: '#0095FF', + } + }], series: [{ - type: 'bar', - data: data24h, + type: 'bar', + barGap: '5%', + barWidth: '10%', + barCategoryGap: '60%', + stack: 1, + itemStyle: { + normal: { + barBorderRadius: [30, 30, 0, 0], + color: new echarts.graphic.LinearGradient( + 0, 0, 0, 1, [{ + offset: 0, + color: '#00EAFF' + }, + { + offset: 1, + color: '#001AFF' + } + ] + ) + } }, - { - type: 'scatter', - data: dataLenArr + data: data24h, + zlevel: 11 + }, + { + type: 'scatter', + stack: 1, + xAxisIndex: 0, + symbolOffset: [0, 0], //相对于原本位置的偏移量 + data: dataLenArr, + itemStyle: { + normal: { + color: '#fff' + } }, - { - name: '背景', - type: 'bar', - data: dataBGArr + symbolSize: 13, + zlevel: 10, + z: 2, + }, + { + name: '背景', + type: 'bar', + barWidth: '10%', + barGap: '-100%', + data: dataBGArr, + itemStyle: { + normal: { + color: '#004298', + barBorderRadius: 30, + // backgroundColor:'#091C24' + // borderColor:'#00D1F0' + } }, + z: 1, + }, ] - }); + } + option && lineChart1.setOption(option); } - // 加延时器使图像绘制获取元素宽高最新的值2 - setTimeout(()=>{ - var myChart = echarts.init(this.$refs.dinschart); - option && myChart.setOption(option); - that.timer1 = setInterval(function () { - myChart.clear(); - option && myChart.setOption(option); - run(myChart); - }, 3000); - }, 200) + run(); + that.timer1 = setInterval(function () { + lineChart1.clear(); + run(); + }, 3000); }, ty_bar3() { let that = this; var chartDom = document.getElementById("pcgchart2"); + lineChart2 = echarts.init(chartDom); + var option; - var option - var xData = that.rsqsXData; - var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',] - var name = that.rsqsDataName - // console.log(that.rsqsDataName, 'that.rsqsDataName') - // = ['体育场', '体育馆', '游泳场馆']; - var data = that.rsqsDataAll; - let iconData = []; - that.rsqsDataName.forEach((item, index)=>{ - if(index==0){ - iconData.push({icon: 'image://img/tyc_icon.png', name: name[0]}) - }else if(index==1){ - iconData.push({icon: 'image://img/tyg_icon.png', name: name[1]}) - }else if(index==2){ - iconData.push({icon: 'image://img/yyg_icon.png', name: name[2]}) - } - }) - - var series = []; - for (var i = 0; i < data.length; i++) { - series.push({ - name: name[i], - type: "line", - symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ] - symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' - smooth: true, //是否平滑曲线显示 - showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示 - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - offset: 0, - color: color[i] - }, { - offset: 0.8, - color: 'rgba(255,255,255,0)' - }], false), - // shadowColor: 'rgba(255,255,255, 0.1)', - shadowBlur: 10, - opacity: 0.3, - } - }, - itemStyle: { - normal: { - color: color[i], - lineStyle: { - width: 1, - type: 'solid' //'dotted'虚线 'solid'实线 - }, - borderColor: color[i], //图形的描边颜色。支持的格式同 color - borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] - barBorderRadius: 0, - label: { - show: false, - }, - opacity: 0.5, - } - }, - markPoint: { - data: [ - { - name: '最大值', - type: 'max' - } - ] + function run(){ + // 获取新数据-处理--改用ws处理数据 + + var xData = that.rsqsXData; + var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',] + var name = that.rsqsDataName + // console.log(that.rsqsDataName, 'that.rsqsDataName') + // = ['体育场', '体育馆', '游泳场馆']; + var data = that.rsqsDataAll; + let iconData = []; + that.rsqsDataName.forEach((item, index)=>{ + if(index==0){ + iconData.push({icon: 'image://img/tyc_icon.png', name: name[0]}) + }else if(index==1){ + iconData.push({icon: 'image://img/tyg_icon.png', name: name[1]}) + }else if(index==2){ + iconData.push({icon: 'image://img/yyg_icon.png', name: name[2]}) + } + }) - }, - data: data[i], + var series = []; + for (var i = 0; i < data.length; i++) { + series.push({ + name: name[i], + type: "line", + symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ] + symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' + smooth: true, //是否平滑曲线显示 + showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示 + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, + color: color[i] + }, { + offset: 0.8, + color: 'rgba(255,255,255,0)' + }], false), + // shadowColor: 'rgba(255,255,255, 0.1)', + shadowBlur: 10, + opacity: 0.3, + } + }, + itemStyle: { + normal: { + color: color[i], + lineStyle: { + width: 1, + type: 'solid' //'dotted'虚线 'solid'实线 + }, + borderColor: color[i], //图形的描边颜色。支持的格式同 color + borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] + barBorderRadius: 0, + label: { + show: false, + }, + opacity: 0.5, + } + }, + markPoint: { + data: [ + { + name: '最大值', + type: 'max' + } + ] - }) - } - option = { - // backgroundColor: "#141f56", - legend: { - // top: 390, - bottom: 10, - right: 0, - itemGap: 35, - itemWidth: 20, - itemHeight: 20, - textStyle: { - color: '#fff', - fontSize: '14' - }, - data: iconData - }, - title: { - // text: "负面言论分领域趋势", - textStyle: { - color: '#fff', - fontSize: '22', - fontWeight: 'normal', - }, - subtextStyle: { - color: '#90979c', - fontSize: '16', + }, + data: data[i], + }) + } + option = { + // backgroundColor: "#141f56", + legend: { + // top: 390, + bottom: 10, + right: 0, + itemGap: 35, + itemWidth: 20, + itemHeight: 20, + textStyle: { + color: '#fff', + fontSize: '14' + }, + data: iconData }, - }, - tooltip: { - trigger: "axis", - axisPointer: { // 坐标轴指示器，坐标轴触发有效 - type: 'line', // 默认为直线，可选为：'line' | 'shadow' - lineStyle: { - color: '#57617B' - } - }, - formatter: '{b}
{a0}: {c0}
{a1}: {c1}
{a2}: {c2}', - backgroundColor: 'rgba(0,0,0,0.7)', // 背景 - padding: [8, 10], //内边距 - extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影 - }, - grid: { - borderWidth: 0, - top: 50, - // bottom: '2rem', - right: 0, - left: 50, - textStyle: { - color: "#fff" - } - }, - xAxis: [{ - type: "category", - axisLine: { - show: false, - }, - splitLine: { - show: false, - }, - boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样 - axisTick: { - show: false - }, - splitArea: { - show: false - }, - axisLabel: { - inside: false, + title: { + // text: "负面言论分领域趋势", textStyle: { - color: '#FFFFFF', + color: '#fff', + fontSize: '22', fontWeight: 'normal', - fontSize: '12', + }, + subtextStyle: { + color: '#90979c', + fontSize: '16', + }, }, - data: xData, - }], - yAxis: { - type: 'value', - axisTick: { - show: false - }, - axisLine: { - show: false, + tooltip: { + trigger: "axis", + axisPointer: { // 坐标轴指示器，坐标轴触发有效 + type: 'line', // 默认为直线，可选为：'line' | 'shadow' + lineStyle: { + color: '#57617B' + } + }, + formatter: '{b}
{a0}: {c0}
{a1}: {c1}
{a2}: {c2}', + backgroundColor: 'rgba(0,0,0,0.7)', // 背景 + padding: [8, 10], //内边距 + extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影 }, - splitLine: { - show: true, - lineStyle: { - color: '#32346c ', + grid: { + borderWidth: 0, + top: 50, + // bottom: '2rem', + right: 0, + left: 50, + textStyle: { + color: "#fff" } }, - splitNumber: 10, - // interval:4.10, - axisLabel: { - textStyle: { - color: '#0095FF', - fontWeight: 'normal', - fontSize: '12', + xAxis: [{ + type: "category", + axisLine: { + show: false, }, - formatter: '{value}', - align: 'left', - margin: 40 - }, - }, - series: series, - } - function run(myChart){ - // 获取新数据-处理 - // that.getGcgNumDatas(); - setTimeout(() => { - // var xData = this.rsqsXData; - var data = that.rsqsDataAll; - - var series = []; - for (var i = 0; i < data.length; i++) { - series.push({ - name: name[i], - type: "line", - symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ] - symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' - smooth: true, //是否平滑曲线显示 - showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示 - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - offset: 0, - color: color[i] - }, { - offset: 0.8, - color: 'rgba(255,255,255,0)' - }], false), - // shadowColor: 'rgba(255,255,255, 0.1)', - shadowBlur: 10, - opacity: 0.3, - } - }, - itemStyle: { - normal: { - color: color[i], - lineStyle: { - width: 1, - type: 'solid' //'dotted'虚线 'solid'实线 - }, - borderColor: color[i], //图形的描边颜色。支持的格式同 color - borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] - barBorderRadius: 0, - label: { - show: false, - }, - opacity: 0.5, - } + splitLine: { + show: false, + }, + boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样 + axisTick: { + show: false + }, + splitArea: { + show: false + }, + axisLabel: { + inside: false, + textStyle: { + color: '#FFFFFF', + fontWeight: 'normal', + fontSize: '12', }, - markPoint: { - data: [ - { - name: '最大值', - type: 'max' - } - ] - + }, + data: xData, + }], + yAxis: { + type: 'value', + axisTick: { + show: false + }, + axisLine: { + show: false, + }, + splitLine: { + show: true, + lineStyle: { + color: '#32346c ', + } + }, + splitNumber: 10, + // interval:4.10, + axisLabel: { + textStyle: { + color: '#0095FF', + fontWeight: 'normal', + fontSize: '12', }, - data: data[i], - - }) - } - myChart.setOption({ - xAxis: [{data: xData}], - series: series - }); - }, 200); + formatter: '{value}', + align: 'left', + margin: 40 + }, + }, + series: series, + } + option && lineChart2.setOption(option); } - setTimeout(()=>{ - var myChart = echarts.init(chartDom); - option && myChart.setOption(option); - that.timer2 = setInterval(function () { - myChart.clear(); - option && myChart.setOption(option); - run(myChart); - }, 2000); - }, 600) + + run(); + + that.timer2 = setInterval(function () { + lineChart2.clear(); + run(); + }, 3000); }, ty_pieDo(){ let that = this;