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
Split 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={
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'
}

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

@ -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 + "</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;
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 + "</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: [{
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}<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,
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}<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: {
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);

730
src/views/index.vue
View File

@ -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}<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: {
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}<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;', //添加阴影
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(){

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

@ -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}<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,
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}<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: {
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;

Write Preview
Loading…
Cancel
Save