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

修改图表显示

master
453530270@qq.com 3 years ago
parent
33a19dd061
commit
cb52788680
1 changed files with 5 additions and 201 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. 206
      src/views/WhView.vue

206
src/views/WhView.vue
View File

@ -367,12 +367,12 @@ export default {
// //
this.whtdrs() this.whtdrs()
// this.gc_line() // this.gc_line()
// // 图书借阅信息
this.libinfoData() this.libinfoData()
// websocket // websocket
this.ws = new WebSocket(publicConfig.WS_URL_WH); this.ws = new WebSocket(publicConfig.WS_URL_WH);
// this.getsckdata() this.getsckdata()
}, },
methods: { methods: {
@ -564,205 +564,25 @@ export default {
whtdrs() { whtdrs() {
homeApi.whtdrs().then(res => { homeApi.whtdrs().then(res => {
console.log("whtd", res) console.log("whtd", res)
// const tmpdata = res.data.data
// this.xData.push(res.data.data[0].list.dkeys)
// // X 轴的名称字段
// const darr =new Array;
// tmpdata.forEach(function(item,idx){
// // 读取list
// const list = item.list
// darr.push(list.dvalue)
// })
// this.whfwdata = darr
// get allTimeData // get allTimeData
const tmpdata = res.data.data const tmpdata = res.data.data
// X 轴的名称字段 // X 轴的名称字段
const xarr = new Array const xarr = tmpdata[0].list.dkeys
const darr = new Array; const darr = new Array;
tmpdata.forEach(function (item, idx) { tmpdata.forEach(function (item, idx) {
// 读取list // 读取list
const list = item.list const list = item.list
xarr.push(list.dkeys)
darr.push(list.dvalue) darr.push(list.dvalue)
}) })
// console.log(darr) // console.log(darr)
this.zxlindata = xarr this.zxlindata = xarr
this.zxliddata = darr this.zxliddata = darr
// //
this.gc_line() this.cg_line()
}); });
}, },
// 各场馆人数趋势
gc_line() {
var chartDom = document.getElementById("gc_charts");
var myChart = echarts.init(chartDom);
var option
var xData = this.xData
//var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',];
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
var name = ['图书馆', '文化馆', '博物馆']
var xData = this.zxlindata
var data = this.zxliddata
var series = [];
for (var i = 0; i < 3; 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,
right: 10,
itemGap: 15,
itemWidth: 20,
itemHeight: 20,
// icon: ['image://img/tyc_icon.png', 'image://img/tyg_icon.png', 'image://img/tyc_icon.png'],
textStyle: {
color: '#fff',
fontSize: '14'
},
data: [
{ icon: 'image://img/tyc_icon.png', name: '图书馆' },
{ icon: 'image://img/tyg_icon.png', name: '文化馆' },
{ icon: 'image://img/yyg_icon.png', 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}',
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: 240,
left: 30,
right: 10,
bottom: 240,
textStyle: {
color: "#fff"
}
},
xAxis: [{
type: "category",
axisLine: {
show: false,
},
splitLine: {
show: false,
},
boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
axisTick: {
show: false
},
splitArea: {
show: false
},
axisLabel: {
inside: false,
interval: 0,
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}',
},
},
series: series,
}
option && myChart.setOption(option);
},
// 图书馆借阅查询 // 图书馆借阅查询
libinfoData() { libinfoData() {
homeApi.libLeaseData().then(res => { homeApi.libLeaseData().then(res => {
@ -1074,22 +894,6 @@ export default {
} }
option = { option = {
// backgroundColor: "#141f56", // backgroundColor: "#141f56",
legend: {
bottom: 0,
right: 20,
itemGap: 20,
itemWidth: 20,
itemHeight: 20,
textStyle: {
color: '#fff',
fontSize: '14'
},
data: [
{ icon: 'image://img/tyc_icon.png', name: '体育场' },
{ icon: 'image://img/tyg_icon.png', name: '体育馆' },
{ icon: 'image://img/yyg_icon.png', name: '游泳场馆' },
]
},
title: { title: {
// text: "负面言论分领域趋势", // text: "负面言论分领域趋势",
textStyle: { textStyle: {
@ -1231,7 +1035,7 @@ export default {
that.rsqsDatas.push(item.list) that.rsqsDatas.push(item.list)
}) })
that.zxlindata = jstr.toDayGroupsEnterNum.data[0].list.dkeys; that.zxlindata = jstr.getLibraryGroupHoursList.data[0].list.dkeys;
that.rsqsDatas.forEach((item) => { that.rsqsDatas.forEach((item) => {
let rsqsData = [] let rsqsData = []
Object.getOwnPropertyNames(item).forEach((value) => { Object.getOwnPropertyNames(item).forEach((value) => {

Write Preview
Loading…
Cancel
Save