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;