|
|
@@ -1,6 +1,6 @@
|
|
|
import * as echarts from 'echarts'
|
|
|
import 'echarts-gl'
|
|
|
-import wlimg from '../../assets/images/wl.png'
|
|
|
+import e1 from '@/assets/images/e1.png'
|
|
|
|
|
|
export const chartOptions = {
|
|
|
setOption2() {
|
|
|
@@ -1015,202 +1015,74 @@ export const chartOptions = {
|
|
|
}
|
|
|
return option
|
|
|
},
|
|
|
- setBjzxOption(data, type = 0) {
|
|
|
- const color = ['#379ED7', '#F0BC1E']
|
|
|
- const legendData = ['已处理', '未处理']
|
|
|
- const series = []
|
|
|
- const xPoint = []
|
|
|
- switch (type) {
|
|
|
- case 0:
|
|
|
- for (let i = 0; i < 10; i++) {
|
|
|
- let currentTime = new Date().getTime() - 3600 * 1000 * i
|
|
|
- let time = new Date(currentTime).toLocaleTimeString()
|
|
|
- xPoint.push(time)
|
|
|
- }
|
|
|
- for (let i = 0; i < legendData.length; i++) {
|
|
|
- const curData = []
|
|
|
- for (let j = 0; j < 10; j++) {
|
|
|
- curData.push(Math.floor(Math.random() * 100))
|
|
|
- }
|
|
|
-
|
|
|
- let obj = {
|
|
|
- name: legendData[i],
|
|
|
- type: 'line',
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 6,
|
|
|
- itemStyle: {
|
|
|
- color: color[i % color.length],
|
|
|
- borderWidth: 6,
|
|
|
- borderColor: 'rgba(51, 181, 255, .2)'
|
|
|
- },
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2,
|
|
|
- color: color[i % color.length] // 线条颜色
|
|
|
- }
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- color: 'rgba(255,255,255, 0.6)'
|
|
|
- },
|
|
|
- data: curData
|
|
|
- }
|
|
|
- series.push(obj)
|
|
|
- }
|
|
|
- break
|
|
|
- case 1:
|
|
|
- for (let i = 0; i < 7; i++) {
|
|
|
- // 修改循环次数为7
|
|
|
- let currentTime = new Date().getTime() - 24 * 3600 * 1000 * i // 修改为每天减少一天的时间
|
|
|
- let time = new Date(currentTime).toLocaleDateString() // 使用 toLocaleDateString 获取日期部分
|
|
|
- xPoint.push(time)
|
|
|
- }
|
|
|
- for (let i = 0; i < legendData.length; i++) {
|
|
|
- const curData = []
|
|
|
- for (let j = 0; j < 7; j++) {
|
|
|
- curData.push(Math.floor(Math.random() * 100))
|
|
|
+ setAqscOption(data) {
|
|
|
+ var nameArray = data.map((item) => {
|
|
|
+ return item.name
|
|
|
+ })
|
|
|
+ const seriesData = []
|
|
|
+ const color = ['#FF2B66', '#FF8033', '#febe13']
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ seriesData.push(
|
|
|
+ {
|
|
|
+ value: data[i].value,
|
|
|
+ name: data[i].name,
|
|
|
+ label: {
|
|
|
+ color: '#fac858'
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderWidth: 10,
|
|
|
+ shadowBlur: 20,
|
|
|
+ borderColor: color[i],
|
|
|
+ shadowColor: color[i]
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- let obj = {
|
|
|
- name: legendData[i],
|
|
|
- type: 'line',
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 6,
|
|
|
- itemStyle: {
|
|
|
- color: color[i % color.length],
|
|
|
- borderWidth: 6,
|
|
|
- borderColor: 'rgba(51, 181, 255, .2)'
|
|
|
- },
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2,
|
|
|
- color: color[i % color.length] // 线条颜色
|
|
|
- }
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- color: 'rgba(255,255,255, 0.6)'
|
|
|
- },
|
|
|
- data: curData
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 8,
|
|
|
+ name: '',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ color: 'rgba(0, 0, 0, 0)',
|
|
|
+ borderColor: 'rgba(0, 0, 0, 0)',
|
|
|
+ borderWidth: 0
|
|
|
+ }
|
|
|
}
|
|
|
- series.push(obj)
|
|
|
}
|
|
|
- break
|
|
|
- case 2:
|
|
|
- for (let i = 0; i < 30; i++) {
|
|
|
- // 修改循环次数为30
|
|
|
- let currentTime = new Date().getTime() - 24 * 3600 * 1000 * i // 修改为每天减少一天的时间
|
|
|
- let time = new Date(currentTime).toLocaleDateString() // 使用 toLocaleDateString 获取日期部分
|
|
|
- xPoint.push(time)
|
|
|
- }
|
|
|
- for (let i = 0; i < legendData.length; i++) {
|
|
|
- const curData = []
|
|
|
- for (let j = 0; j < 30; j++) {
|
|
|
- curData.push(Math.floor(Math.random() * 100))
|
|
|
- }
|
|
|
-
|
|
|
- let obj = {
|
|
|
- name: legendData[i],
|
|
|
- type: 'line',
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 6,
|
|
|
- itemStyle: {
|
|
|
- color: color[i % color.length],
|
|
|
- borderWidth: 6,
|
|
|
- borderColor: 'rgba(51, 181, 255, .2)'
|
|
|
- },
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2,
|
|
|
- color: color[i % color.length] // 线条颜色
|
|
|
- }
|
|
|
- },
|
|
|
+ )
|
|
|
+ }
|
|
|
+ var seriesOption = [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'pie',
|
|
|
+ clockWise: false,
|
|
|
+ radius: [70, 80],
|
|
|
+ width: 280,
|
|
|
+ height: 252,
|
|
|
+ hoverAnimation: false,
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ left: 'center',
|
|
|
+ top: 'center',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
label: {
|
|
|
- show: false,
|
|
|
- color: 'rgba(255,255,255, 0.6)'
|
|
|
- },
|
|
|
- data: curData
|
|
|
+ show: false
|
|
|
+ }
|
|
|
}
|
|
|
- series.push(obj)
|
|
|
- }
|
|
|
- break
|
|
|
- }
|
|
|
+ },
|
|
|
+ data: seriesData
|
|
|
+ }
|
|
|
+ ]
|
|
|
|
|
|
const option = {
|
|
|
- grid: {
|
|
|
- top: '15%',
|
|
|
- bottom: '15%',
|
|
|
- left: '10%',
|
|
|
- right: '5%'
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- boundaryGap: false,
|
|
|
- axisLabel: {
|
|
|
- // X轴刻度标签
|
|
|
- color: 'rgba(255, 255, 255, 0.6)',
|
|
|
- fontSize: 12
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- // X轴线
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(255, 255, 255, .4)'
|
|
|
- }
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- // 网格线
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- type: 'dashed',
|
|
|
- width: 1,
|
|
|
- color: 'rgba(255, 255, 255, .2)'
|
|
|
- }
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- data: xPoint
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- axisLabel: {
|
|
|
- color: 'rgba(255, 255, 255, .6)',
|
|
|
- fontSize: 12
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- // 网格线
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- type: 'dashed',
|
|
|
- width: 1,
|
|
|
- color: 'rgba(255, 255, 255, .2)'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- }
|
|
|
- },
|
|
|
- legend: {
|
|
|
- show: false,
|
|
|
- data: legendData,
|
|
|
- left: 'center',
|
|
|
- top: 0,
|
|
|
- itemHeight: 8,
|
|
|
- textStyle: {
|
|
|
- fontSize: 14,
|
|
|
- color: '#fff'
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- borderWidth: 6,
|
|
|
- borderColor: 'rgba(51, 181, 255, .2)'
|
|
|
- }
|
|
|
- },
|
|
|
+ color: color,
|
|
|
tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
backgroundColor: 'rgba(33, 85, 154, .6)',
|
|
|
borderWidth: 1,
|
|
|
borderColor: {
|
|
|
@@ -1242,23 +1114,111 @@ export const chartOptions = {
|
|
|
}
|
|
|
},
|
|
|
extraCssText: 'box-shadow: 2px 2px 16px 1px rgba(0, 39, 102, 0.16)',
|
|
|
- formatter: function (params) {
|
|
|
- let content = `<div style='font-size: 14px; color: #fff;'>${params[0].name}</div>`
|
|
|
- if (Array.isArray(params)) {
|
|
|
- for (let i = 0; i < params.length; i++) {
|
|
|
- content += `
|
|
|
- <div style='display: flex; align-items: center; padding: 4px; background: #21559A; margin-top: 4px; color: #fff;'>
|
|
|
- <div style='width: 10px; height: 10px; background: ${params[i].color}; margin-right: 8px;'></div>
|
|
|
- <div style='font-size: 12px; margin-right: 32px;'>${params[i].seriesName}</div>
|
|
|
- <div style='font-size: 14px;'>${params[i].value}</div>
|
|
|
- </div>
|
|
|
- `
|
|
|
+ formatter: function (param) {
|
|
|
+ let html = `<div style='display: flex; align-items: center; padding: 4px; background: #21559A; margin-top: 4px; color: #fff;'>
|
|
|
+ <div style='width: 10px; height: 10px; background: ${param.color}; margin-right: 8px;'></div>
|
|
|
+ <div style='font-size: 12px; margin-right: 32px;'>${param.name}级</div>
|
|
|
+ <div style='font-size: 14px;'>${param.value}个</div>
|
|
|
+ </div>`
|
|
|
+
|
|
|
+ return html
|
|
|
+ // param.marker + ' ' + param.name + ' ：' + `<span style="color:'#fff'">${param.value}%</span>`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ graphic: {
|
|
|
+ elements: [
|
|
|
+ {
|
|
|
+ type: 'image',
|
|
|
+ style: {
|
|
|
+ // image: rightPieCenter,
|
|
|
+ width: 46,
|
|
|
+ height: 60,
|
|
|
+ zIndex: 2,
|
|
|
+ top: 'center'
|
|
|
+ },
|
|
|
+ left: 'center',
|
|
|
+ top: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'image',
|
|
|
+ style: {
|
|
|
+ image: e1,
|
|
|
+ width: 100,
|
|
|
+ height: 100,
|
|
|
+ zIndex: 1,
|
|
|
+ top: 'center'
|
|
|
+ },
|
|
|
+ left: 'center',
|
|
|
+ top: 'center',
|
|
|
+ originX: 50,
|
|
|
+ originY: 50,
|
|
|
+ keyframeAnimation: [
|
|
|
+ {
|
|
|
+ duration: 200000,
|
|
|
+ loop: true,
|
|
|
+ keyframes: [
|
|
|
+ {
|
|
|
+ percent: 0,
|
|
|
+ rotation: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ percent: 1,
|
|
|
+ rotation: -360
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ legend: [
|
|
|
+ {
|
|
|
+ // textStyle: { color: '#fff', fontSize: 20 },
|
|
|
+ bottom: '-2%',
|
|
|
+ textStyle: {
|
|
|
+ color: 'auto',
|
|
|
+ rich: {
|
|
|
+ name: {
|
|
|
+ color: 'auto',
|
|
|
+ fontSize: 12
|
|
|
+ },
|
|
|
+ percent: {
|
|
|
+ color: 'auto',
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ data: nameArray,
|
|
|
+ icon: 'diamond',
|
|
|
+ itemGap: 8,
|
|
|
+ itemHeight: 8,
|
|
|
+ itemWidth: 10,
|
|
|
+ formatter: function (name) {
|
|
|
+ let total = 0
|
|
|
+ let target
|
|
|
+ for (var i = 0, l = data.length; i < l; i++) {
|
|
|
+ if (data[i].name === name) {
|
|
|
+ target = data[i].value
|
|
|
+ }
|
|
|
}
|
|
|
+ let html = ` {name|${name.split('').length < 10 ? name : name.split('').slice(0, 10).join('') + '...'}：}{percent|${target}个}`
|
|
|
+ // let html = ` {name|${name.split('').length < 10 ? name : name.split('').slice(0, 10).join('') + '...'}}`
|
|
|
+ var arr = [
|
|
|
+ // ' ' +
|
|
|
+ // `<span style="color:'#A6B7C2'">${name}：</span>` +
|
|
|
+ // (target / total).toFixed(2) * 100 +
|
|
|
+ // '%',
|
|
|
+ html
|
|
|
+ ]
|
|
|
+ return arr.join('\n')
|
|
|
}
|
|
|
- return content
|
|
|
}
|
|
|
+ ],
|
|
|
+ toolbox: {
|
|
|
+ show: false
|
|
|
},
|
|
|
- series
|
|
|
+ series: seriesOption
|
|
|
}
|
|
|
return option
|
|
|
},
|
|
|
@@ -2020,7 +1980,6 @@ export const chartOptions = {
|
|
|
return toolTiphtml
|
|
|
}
|
|
|
},
|
|
|
- backgroundColor: '#fff',
|
|
|
borderColor: '#333',
|
|
|
padding: [5, 10],
|
|
|
textStyle: {
|
|
|
@@ -2039,6 +1998,15 @@ export const chartOptions = {
|
|
|
aspectScale: 1,
|
|
|
animation: true,
|
|
|
animationDurationUpdate: 0,
|
|
|
+ selectedMode: 'single',
|
|
|
+ select: {
|
|
|
+ label: {
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ areaColor: 'rgba(58,149,253,0.75)'
|
|
|
+ }
|
|
|
+ },
|
|
|
label: {
|
|
|
show: false,
|
|
|
textStyle: {
|
|
|
@@ -2077,34 +2045,8 @@ export const chartOptions = {
|
|
|
shadowOffsetY: 10,
|
|
|
shadowBlur: 120
|
|
|
},
|
|
|
- // normal: {
|
|
|
- // areaColor: {
|
|
|
- // type: 'linear',
|
|
|
- // x: 0,
|
|
|
- // y: 0,
|
|
|
- // x2: 0,
|
|
|
- // y2: 1200,
|
|
|
- // colorStops: [
|
|
|
- // {
|
|
|
- // offset: 0,
|
|
|
- // color: 'rgba(3,27,78,0.75)' // 0% 处的颜色
|
|
|
- // },
|
|
|
- // {
|
|
|
- // offset: 1,
|
|
|
- // color: 'rgba(58,149,253,0.75)' // 50% 处的颜色
|
|
|
- // }
|
|
|
- // ],
|
|
|
- // global: true // 缺省为 false
|
|
|
- // },
|
|
|
- // borderColor: '#c0f3fb',
|
|
|
- // borderWidth: 1,
|
|
|
- // shadowBlur: 2,
|
|
|
- // shadowColor: '#0e2f50',
|
|
|
- // shadowOffsetX: 10,
|
|
|
- // shadowOffsetY: 15
|
|
|
- // },
|
|
|
emphasis: {
|
|
|
- areaColor: 'rgba(0,254,233,0.6)'
|
|
|
+ areaColor: 'rgba(58,149,253,0.75)'
|
|
|
// borderWidth: 0
|
|
|
}
|
|
|
}
|
gitboyzcf
