xioayue
/
btgym
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

更新

master
luyisha 3 years ago
parent
a4ce7b3c2a
commit
5314097769
4 changed files with 961 additions and 1121 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      public/config.js
  2. 652
      src/views/cultrue/index.vue
  3. 730
      src/views/index.vue
  4. 698
      src/views/ty/index.vue

2
public/config.js
View File

@ -1,4 +1,6 @@
window.publicConfig={ window.publicConfig={
BASE_API:"http://192.168.66.16/api", BASE_API:"http://192.168.66.16/api",
// BASE_API:"http://10.97.121.2/api", // BASE_API:"http://10.97.121.2/api",
// socket url
WS_URL: 'ws://10.97.121.2/ws'
} }

652
src/views/cultrue/index.vue
View File

@ -87,7 +87,7 @@ import * as echarts from "echarts";
// 引入api // 引入api
import * as homeApi from '@/api/home' import * as homeApi from '@/api/home'
let lineChart1 = null, lineChart2 = null, barChart = null;
export default { export default {
data() { data() {
return { return {
@ -156,152 +156,11 @@ export default {
let that = this; let that = this;
var chartDom = document.getElementById("dinschart"); var chartDom = document.getElementById("dinschart");
// var option; // 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 + "</br>" + 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; var data = that.data24h;
let max=data[0]; let max=data[0];
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
@ -311,225 +170,327 @@ export default {
} }
let dataLenArr = [], dataBGArr = []; let dataLenArr = [], dataBGArr = [];
data.map(item=>{ data.map(item=>{
dataLenArr.push(0);// 获取和数据一样长度的底部图形数组； dataLenArr.push(0);// 获取和数据一样长度的图形数组
dataBGArr.push(max);// 数组最大值做背景柱形 dataBGArr.push(max);// 数组最大值做背景柱形
}) })
myChart.setOption({
animation: true, var option = {
xAxis: { tooltip: {
data: that.data24hX trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
return params[0].name + "</br>" + 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: [{ series: [{
type: 'bar', // name: '厂用电量',
data: data, 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,
type: 'scatter', zlevel: 11
data: dataLenArr },
{
// name: '厂用电量',
type: 'scatter',
stack: 1,
xAxisIndex: 0,
symbolOffset: [0, 0], //相对于原本位置的偏移量
data: dataLenArr,
itemStyle: {
normal: {
color: '#fff'
}
}, },
{ symbolSize: 13,
name: '背景', zlevel: 10,
type: 'bar', z: 2,
data: dataBGArr },
{
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(() => { run();
var myChart = echarts.init(chartDom); that.timer1 = setInterval(function () {
option && myChart.setOption(option); lineChart1.clear();
that.timer1 = setInterval(function () { run();
myChart.clear(); }, 3000);
option && myChart.setOption(option);
run(myChart);
}, 3000);
}, 200);
}, },
// 各场馆服务人次趋势 // 各场馆服务人次趋势
cultrue_bar2() { cultrue_bar2() {
let that = this; let that = this;
var chartDom = document.getElementById("pcgchart"); var chartDom = document.getElementById("pcgchart");
lineChart2 = echarts.init(chartDom);
var option var option
var xData = that.rsqsXData;
var name = that.rsqsDataName; function run(){
// console.log(that.rsqsDataName, 'that.rsqsDataName') var xData = that.rsqsXData;
// = ['体育场', '体育馆', '游泳场馆']; var name = that.rsqsDataName;
var data = that.rsqsDataAll; // console.log(that.rsqsDataName, 'that.rsqsDataName')
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',] // = ['体育场', '体育馆', '游泳场馆'];
let iconData = []; var data = that.rsqsDataAll;
that.rsqsDataName.forEach((item, index)=>{ var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
if(index==0){ let iconData = [];
iconData.push({icon: 'image://img/tyc_icon.png', name: name[0]}) that.rsqsDataName.forEach((item, index)=>{
}else if(index==1){ if(index==0){
iconData.push({icon: 'image://img/tyg_icon.png', name: name[1]}) iconData.push({icon: 'image://img/tyc_icon.png', name: name[0]})
}else if(index==2){ }else if(index==1){
iconData.push({icon: 'image://img/yyg_icon.png', name: name[2]}) 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],
}) })
}
option = {
// backgroundColor: "#141f56",
legend: {
top: 0,
left: 0,
itemGap: 20,
itemWidth: 20,
itemHeight: 20,
textStyle: { var series = [];
color: '#fff', for (var i = 0; i < data.length; i++) {
fontSize: '14', series.push({
// padding: [1, 12] name: name[i],
}, type: "line",
data: iconData symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
}, symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
title: { smooth: true, //是否平滑曲线显示
// text: "负面言论分领域趋势", showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
textStyle: { areaStyle: {
color: '#fff', normal: {
fontSize: '22', color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
fontWeight: 'normal', offset: 0,
}, color: color[i]
subtextStyle: { }, {
color: '#90979c', offset: 0.8,
fontSize: '16', 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
}, },
}, title: {
tooltip: { // text: "负面言论分领域趋势",
trigger: "axis",
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
lineStyle: {
color: '#57617B'
}
},
formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{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,
textStyle: { textStyle: {
color: '#FFFFFF', color: '#fff',
fontSize: '22',
fontWeight: 'normal', fontWeight: 'normal',
fontSize: '12', },
subtextStyle: {
color: '#90979c',
fontSize: '16',
}, },
}, },
data: xData, tooltip: {
}], trigger: "axis",
yAxis: { axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'value', type: 'line', // 默认为直线，可选为：'line' | 'shadow'
axisTick: { lineStyle: {
show: false color: '#57617B'
}, }
axisLine: { },
show: false, formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{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: { grid: {
show: true, borderWidth: 0,
lineStyle: { top: 50,
color: '#32346c ', bottom: 30,
right: 0,
left: 30,
textStyle: {
color: "#fff"
} }
}, },
axisLabel: { xAxis: [{
textStyle: { type: "category",
color: '#0095FF', axisLine: {
fontWeight: 'normal', show: false,
fontSize: '12', },
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,
series: series, }
} option && lineChart2.setOption(option);
function run(myChart){
// 获取新数据-处理
myChart.setOption({
series: series
});
} }
setTimeout(() => {
var myChart = echarts.init(chartDom); run();
option && myChart.setOption(option); that.timer2 = setInterval(function () {
that.timer2 = setInterval(function () { lineChart2.clear();
myChart.clear(); run();
option && myChart.setOption(option); }, 3000);
run(myChart);
}, 3000);
}, 200);
}, },
// 图书馆统计图数据 // 图书馆统计图数据
@ -548,10 +509,10 @@ export default {
cultrue_bar3() { cultrue_bar3() {
let that = this; let that = this;
var chartDom = document.getElementById("tsgchart"); var chartDom = document.getElementById("tsgchart");
barChart = echarts.init(chartDom);
var option; var option;
function run(myChart){ function run(){
// 获取新数据-处理
var data = [{ var data = [{
name: '今日办证人数', name: '今日办证人数',
icon: '../../assets/wh/wh_right3.png', 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();
run(myChart); that.timer3 = setInterval(function () {
that.timer3 = setInterval(function () { barChart.clear();
myChart.clear(); run();
that.getLibraryData(); }, 3000);
run(myChart);
}, 3000);
}, 200);
}, },
addNumber(start, end, id) { addNumber(start, end, id) {
var o = document.getElementById(id); var o = document.getElementById(id);

730
src/views/index.vue
View File

@ -152,7 +152,7 @@ import * as echarts from "echarts";
// 引入api // 引入api
import * as homeApi from '@/api/home' import * as homeApi from '@/api/home'
let barChart = null, lineChart = null, pieChart = null;
export default { export default {
data() { data() {
return { return {
@ -199,22 +199,24 @@ export default {
mounted() { mounted() {
this.getStat(); this.getStat();
this.btgetdata();
this.getPieData(); this.getPieData();
this.getInfoDatas(); this.getInfoDatas();
this.getGcgNumDatas(); this.getGcgNumDatas();
this.autoTimer0();
setTimeout(() => { setTimeout(() => {
// 加延时器使图像绘制获取元素宽高最新的值、等待接口返回数据
this.home_bar(); this.home_bar();
this.line_zone(); this.line_zone();
this.index_pie1(); this.index_pie1();
}, 1000) }, 1000)
this.autoTimer0(); this.getsckdata();
}, },
methods: { methods: {
autoTimer0(){ autoTimer0(){
let that = this; let that = this;
this.btgetdata();
clearInterval(that.timer0); clearInterval(that.timer0);
that.timer0 = setInterval(() => { that.timer0 = setInterval(() => {
if(this.klselt == 'y'){ if(this.klselt == 'y'){
@ -269,196 +271,12 @@ export default {
home_bar() { home_bar() {
let that = this; let that = this;
var chartDom = document.getElementById("homebar"); var chartDom = document.getElementById("homebar");
var myChart = echarts.init(chartDom);
var option; var option;
barChart = echarts.init(chartDom);
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);// 数组最大值做背景柱形
})
option = { function run() {
// 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()
}
let xData = that.klqsXDatas.slice(-8,that.klqsXDatas.length); 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]; let max=data[0];
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
if (data[i]>max) { if (data[i]>max) {
@ -470,35 +288,175 @@ export default {
dataLenArr.push(1);// 获取和数据一样长度的底部图形数组； dataLenArr.push(1);// 获取和数据一样长度的底部图形数组；
dataBGArr.push(max);// 数组最大值做背景柱形 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: { 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: [ series: [
{ {
data: data,
type: 'bar', 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', 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', type: 'bar',
data: dataBGArr barGap: '-100%',
barMaxWidth: 'auto',
barWidth: 10,
zlevel: -1,
color: 'rgba(0, 75, 187, 0.2)',
// 立体柱形的背景图形
}, },
{ {
data: dataBGArr,
type: 'pictorialBar', 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 () { that.timer1 = setInterval(function () {
myChart.clear(); barChart.clear();
option && myChart.setOption(option); run();
run(myChart);
}, 5000); }, 5000);
}, },
@ -507,177 +465,175 @@ export default {
let that = this; let that = this;
var chartDom = document.getElementById("kl-line"); var chartDom = document.getElementById("kl-line");
var option; var option;
lineChart = echarts.init(chartDom);
function run(myChart){ function run(){
// 获取新数据-处理 // 获取新数据-处理--改用ws处理数据
that.getGcgNumDatas(); // that.getGcgNumDatas();
setTimeout(() => {
var xData = that.rsqsXData; var xData = that.rsqsXData;
var gcolor = ['#ff9acc', '#6666FF', '#FF6600', '#02ff00', '#00ffff', '#fdff00']; var gcolor = ['#ff9acc', '#6666FF', '#FF6600', '#02ff00', '#00ffff', '#fdff00'];
var data = that.rsqsData_z; var data = that.rsqsData_z;
var series = []; var series = [];
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
series.push({ series.push({
name: that.rsqsDataName[i], name: that.rsqsDataName[i],
type: "line", type: "line",
symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ] symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
smooth: true, //是否平滑曲线显示 smooth: true, //是否平滑曲线显示
showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示 showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
areaStyle: { areaStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, offset: 0,
color: gcolor[i] color: gcolor[i]
}, { }, {
offset: 0.8, offset: 0.8,
color: '#fff', color: '#fff',
}], false), }], false),
// shadowColor: 'rgba(255,255,255, 0.1)', // shadowColor: 'rgba(255,255,255, 0.1)',
shadowBlur: 10, shadowBlur: 10,
opacity: 0.3, opacity: 0.3,
} }
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: gcolor[i], color: gcolor[i],
lineStyle: { lineStyle: {
width: 1, width: 1,
type: 'solid' //'dotted'虚线 'solid'实线 type: 'solid' //'dotted'虚线 'solid'实线
}, },
borderColor: gcolor[i], //图形的描边颜色。支持的格式同 color borderColor: gcolor[i], //图形的描边颜色。支持的格式同 color
borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ]
barBorderRadius: 0, barBorderRadius: 0,
label: { label: {
show: false, show: false,
}, },
opacity: 0.5, opacity: 0.5,
} }
}, },
data: data[i], data: data[i],
}) })
} }
// setting option // setting option
option = { option = {
// backgroundColor: "#141f56", // backgroundColor: "#141f56",
legend: { legend: {
top: 0, top: 0,
right: 0, right: 0,
bottom: 0, bottom: 0,
itemGap: 15, itemGap: 15,
itemWidth: 15, itemWidth: 15,
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: '14' fontSize: '14'
},
data: name
}, },
title: { data: name
// text: "负面言论分领域趋势", },
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}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />{a3}: {c3}<br />{a4}: {c4}<br />{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: { textStyle: {
color: '#fff', color: '#FFFFFF',
fontSize: '22',
fontWeight: 'normal', fontWeight: 'normal',
}, fontSize: '12',
subtextStyle: {
color: '#90979c',
fontSize: '16',
}, },
}, },
tooltip: { data: xData,
trigger: "axis", }],
axisPointer: { // 坐标轴指示器，坐标轴触发有效 yAxis: {
type: 'line', // 默认为直线，可选为：'line' | 'shadow' type: 'value',
lineStyle: { axisTick: {
color: '#57617B' show: false
}
},
formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />{a3}: {c3}<br />{a4}: {c4}<br />{a5}: {c5}',
backgroundColor: '#000', // 背景
padding: [8, 10], //内边距
extraCssText: 'box-shadow: 0 0 3px #fffff;', //添加阴影
}, },
grid: { axisLine: {
borderWidth: 0, show: true,
top: 10, lineStyle: {
bottom: 20, color: '#0B0765',
right: 0,
left: 50,
textStyle: {
color: "#fff"
} }
}, },
xAxis: [{ splitLine: {
type: "category", show: true,
axisLine: { lineStyle: {
show: false, color: '#0B0765',
}, }
splitLine: { },
show: true, axisLabel: {
lineStyle: { textStyle: {
color: '#0B0765', color: '#0095FF',
} fontWeight: 'normal',
}, fontSize: '12',
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}',
}, },
formatter: '{value}',
}, },
series: series, },
} series: series,
option && myChart.setOption(option); }
}, 200); option && lineChart.setOption(option);
} }
setTimeout(()=>{ run();
var myChart = echarts.init(chartDom); that.timer3 = setInterval(function () {
run(myChart); lineChart.clear();
that.timer3 = setInterval(function () { run();
myChart.clear(); }, 3000);
run(myChart);
}, 3000);
}, 200)
}, },
addNumber(start, end, id) { addNumber(start, end, id) {
@ -794,6 +750,8 @@ export default {
}, },
index_pie1(){ index_pie1(){
let that = this; let that = this;
var pieDom1 = document.getElementById("indexPie1");
pieChart = echarts.init(pieDom1);
// var dataP = [ // var dataP = [
// {name: '体育场',value: 5,}, // {name: '体育场',value: 5,},
// {name: '体育馆',value: 20,}, // {name: '体育馆',value: 20,},
@ -818,9 +776,8 @@ export default {
); );
} }
function run(myChart){ function run(){
var dataP = that.dataP; var dataP = that.dataP;
// 获取新数据-处理
let color = ['#ff9acc', '#6666ff', '#ff6600', '#02ff00','#00ffff', '#fdff00']; let color = ['#ff9acc', '#6666ff', '#ff6600', '#02ff00','#00ffff', '#fdff00'];
let color1=[], color2=[], color3=[]; let color1=[], color2=[], color3=[];
// 设置每层圆环颜色和添加间隔的透明色 // 设置每层圆环颜色和添加间隔的透明色
@ -916,20 +873,41 @@ export default {
}, },
], ],
} }
option && myChart.setOption(option); option && pieChart.setOption(option);
} }
// 加延时器使图像绘制获取元素宽高最新的值 run();
setTimeout(()=>{ that.timer4 = setInterval(function () {
var pieDom1 = document.getElementById("indexPie1"); pieChart.clear();
var myChart = echarts.init(pieDom1); run();
run(myChart); }, 4000);
that.timer4 = setInterval(function () { },
myChart.clear(); // 获取实时数据
that.getPieData(); getsckdata(){
run(myChart); let that = this;
}, 4000); // websocket
}, 200) 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(){ beforeDestroy(){

698
src/views/ty/index.vue
View File

@ -153,7 +153,7 @@ import * as echarts from "echarts";
// 引入api // 引入api
import * as homeApi from '@/api/home' import * as homeApi from '@/api/home'
let lineChart1 = null, lineChart2 = null;
export default { export default {
components: { components: {
@ -213,11 +213,11 @@ export default {
}; };
}, },
created() { created() {
// do nothing // do nothing
}, },
mounted() { mounted() {
let cc = window.document.getElementById("app"); let cc = window.document.getElementById("app");
// 清除其他多余的classname // 清除其他多余的classname
setTimeout(() => { setTimeout(() => {
@ -241,7 +241,7 @@ export default {
this.ty_bar1()//24小时总服务 this.ty_bar1()//24小时总服务
this.ty_pieDo()//右上角占比 this.ty_pieDo()//右上角占比
this.ty_bar3()//右下角趋势图 this.ty_bar3()//右下角趋势图
}, 200); }, 500);
}) })
@ -264,142 +264,10 @@ export default {
ty_bar1() { ty_bar1() {
let that = this; let that = this;
// var xData = that.data24hX; lineChart1 = echarts.init(this.$refs.dinschart);
var data24h = that.data24h;
let max=data24h[0]; function run(){
for (let i = 0; i < data24h.length; i++) { var data24h = that.data24h;
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;
let max=data24h[0]; let max=data24h[0];
for (let i = 0; i < data24h.length; i++) { for (let i = 0; i < data24h.length; i++) {
if (data24h[i]>max) { if (data24h[i]>max) {
@ -408,296 +276,330 @@ export default {
} }
let dataLenArr = [], dataBGArr = []; let dataLenArr = [], dataBGArr = [];
data24h.map(item=>{ data24h.map(item=>{
dataLenArr.push(0);// 获取和数据一样长度的底部图形数组； dataLenArr.push(0);// 获取和数据一样长度的圆点图形数组
dataBGArr.push(max);// 数组最大值做背景柱形 dataBGArr.push(max);// 数组最大值做背景柱形
}) })
myChart.setOption({
var option = {
animation: true, animation: true,
xAxis: { tooltip: {
data: that.data24hX 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: [{ series: [{
type: 'bar', type: 'bar',
data: data24h, 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,
type: 'scatter', zlevel: 11
data: dataLenArr },
{
type: 'scatter',
stack: 1,
xAxisIndex: 0,
symbolOffset: [0, 0], //相对于原本位置的偏移量
data: dataLenArr,
itemStyle: {
normal: {
color: '#fff'
}
}, },
{ symbolSize: 13,
name: '背景', zlevel: 10,
type: 'bar', z: 2,
data: dataBGArr },
{
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 run();
setTimeout(()=>{ that.timer1 = setInterval(function () {
var myChart = echarts.init(this.$refs.dinschart); lineChart1.clear();
option && myChart.setOption(option); run();
that.timer1 = setInterval(function () { }, 3000);
myChart.clear();
option && myChart.setOption(option);
run(myChart);
}, 3000);
}, 200)
}, },
ty_bar3() { ty_bar3() {
let that = this; let that = this;
var chartDom = document.getElementById("pcgchart2"); var chartDom = document.getElementById("pcgchart2");
lineChart2 = echarts.init(chartDom);
var option;
var option function run(){
var xData = that.rsqsXData; // 获取新数据-处理--改用ws处理数据
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
var name = that.rsqsDataName var xData = that.rsqsXData;
// console.log(that.rsqsDataName, 'that.rsqsDataName') var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
// = ['体育场', '体育馆', '游泳场馆']; var name = that.rsqsDataName
var data = that.rsqsDataAll; // console.log(that.rsqsDataName, 'that.rsqsDataName')
let iconData = []; // = ['体育场', '体育馆', '游泳场馆'];
that.rsqsDataName.forEach((item, index)=>{ var data = that.rsqsDataAll;
if(index==0){ let iconData = [];
iconData.push({icon: 'image://img/tyc_icon.png', name: name[0]}) that.rsqsDataName.forEach((item, index)=>{
}else if(index==1){ if(index==0){
iconData.push({icon: 'image://img/tyg_icon.png', name: name[1]}) iconData.push({icon: 'image://img/tyc_icon.png', name: name[0]})
}else if(index==2){ }else if(index==1){
iconData.push({icon: 'image://img/yyg_icon.png', name: name[2]}) 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'
}
]
}, var series = [];
data: data[i], 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'
}
]
}) },
} 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
},
title: {
// text: "负面言论分领域趋势",
textStyle: {
color: '#fff',
fontSize: '22',
fontWeight: 'normal',
},
subtextStyle: {
color: '#90979c',
fontSize: '16',
})
}
option = {
// backgroundColor: "#141f56",
legend: {
// top: 390,
bottom: 10,
right: 0,
itemGap: 35,
itemWidth: 20,
itemHeight: 20,
textStyle: {
color: '#fff',
fontSize: '14'
},
data: iconData
}, },
}, title: {
tooltip: { // text: "负面言论分领域趋势",
trigger: "axis",
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
lineStyle: {
color: '#57617B'
}
},
formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{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,
textStyle: { textStyle: {
color: '#FFFFFF', color: '#fff',
fontSize: '22',
fontWeight: 'normal', fontWeight: 'normal',
fontSize: '12', },
subtextStyle: {
color: '#90979c',
fontSize: '16',
}, },
}, },
data: xData, tooltip: {
}], trigger: "axis",
yAxis: { axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'value', type: 'line', // 默认为直线，可选为：'line' | 'shadow'
axisTick: { lineStyle: {
show: false color: '#57617B'
}, }
axisLine: { },
show: false, formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{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: { grid: {
show: true, borderWidth: 0,
lineStyle: { top: 50,
color: '#32346c ', // bottom: '2rem',
right: 0,
left: 50,
textStyle: {
color: "#fff"
} }
}, },
splitNumber: 10, xAxis: [{
// interval:4.10, type: "category",
axisLabel: { axisLine: {
textStyle: { show: false,
color: '#0095FF',
fontWeight: 'normal',
fontSize: '12',
}, },
formatter: '{value}', splitLine: {
align: 'left', show: false,
margin: 40 },
}, boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
}, axisTick: {
series: series, show: false
} },
function run(myChart){ splitArea: {
// 获取新数据-处理 show: false
// that.getGcgNumDatas(); },
setTimeout(() => { axisLabel: {
// var xData = this.rsqsXData; inside: false,
var data = that.rsqsDataAll; textStyle: {
color: '#FFFFFF',
var series = []; fontWeight: 'normal',
for (var i = 0; i < data.length; i++) { fontSize: '12',
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: [ data: xData,
{ }],
name: '最大值', yAxis: {
type: 'max' 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], formatter: '{value}',
align: 'left',
}) margin: 40
} },
myChart.setOption({ },
xAxis: [{data: xData}], series: series,
series: series }
});
}, 200);
option && lineChart2.setOption(option);
} }
setTimeout(()=>{
var myChart = echarts.init(chartDom); run();
option && myChart.setOption(option);
that.timer2 = setInterval(function () { that.timer2 = setInterval(function () {
myChart.clear(); lineChart2.clear();
option && myChart.setOption(option); run();
run(myChart); }, 3000);
}, 2000);
}, 600)
}, },
ty_pieDo(){ ty_pieDo(){
let that = this; let that = this;

Write Preview
Loading…
Cancel
Save