529 lines
9.9 KiB
JavaScript
529 lines
9.9 KiB
JavaScript
import {
|
|
chartColor1,
|
|
chartColor2,
|
|
chartColor3,
|
|
chartColor5,
|
|
chartColor6,
|
|
unitTypes
|
|
} from '@/utils/constants'
|
|
import unitConvert from '@/utils/unit-convert'
|
|
import { axisFormatter } from '@/views/charts/charts/tools'
|
|
|
|
export const pieChartOption1 = {
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
color: chartColor1,
|
|
legend: {
|
|
orient: 'vertical',
|
|
top: '25%',
|
|
left: '50%',
|
|
itemGap: 4,
|
|
itemWidth: 15,
|
|
itemHeight: 7,
|
|
textStyle: {
|
|
fontFamily: 'SimHei',
|
|
rich: {
|
|
a: {
|
|
width: 60,
|
|
align: 'left',
|
|
fontWeight: 'bold'
|
|
},
|
|
b: {
|
|
align: 'left',
|
|
fontSize: 12,
|
|
color: '#575757'
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
show: true
|
|
},
|
|
formatter: function (name) {
|
|
const data = pieChartOption1.series[0].data
|
|
let value
|
|
data.forEach(t => {
|
|
if (t.name === name) {
|
|
value = t.value
|
|
}
|
|
})
|
|
name = name.length > 9 ? name.substr(0, 9) + '...' : name
|
|
const arr = ['{a|' + ' ' + value + '}' + '{b|' + name + '}']
|
|
return arr
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
right: '50%',
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
radius: ['40%', '60%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: false
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: []
|
|
}
|
|
]
|
|
}
|
|
export const pieChartOption2 = {
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
top: '25%',
|
|
left: '50%',
|
|
itemGap: 4,
|
|
itemWidth: 15,
|
|
itemHeight: 7,
|
|
textStyle: {
|
|
fontFamily: 'SimHei',
|
|
rich: {
|
|
a: {
|
|
width: 60,
|
|
align: 'left',
|
|
fontWeight: 'bold'
|
|
},
|
|
b: {
|
|
align: 'left',
|
|
fontSize: 12,
|
|
color: '#575757'
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
show: true
|
|
},
|
|
formatter: function (name) {
|
|
const data = pieChartOption2.series[0].data
|
|
let value
|
|
data.forEach(t => {
|
|
if (t.name === name) {
|
|
value = t.value
|
|
}
|
|
})
|
|
name = name.length > 9 ? name.substr(0, 9) + '...' : name
|
|
const arr = ['{a|' + ' ' + value + '}' + '{b|' + name + '}']
|
|
return arr
|
|
}
|
|
},
|
|
color: chartColor2,
|
|
series: [
|
|
{
|
|
right: '50%',
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
radius: ['40%', '60%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: false
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: []
|
|
}
|
|
]
|
|
}
|
|
export const pieChartOption3 = {
|
|
color: chartColor5,
|
|
series: [
|
|
{
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
radius: ['45%', '50%'],
|
|
avoidLabelOverlap: false,
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: 20,
|
|
fontWeight: 500,
|
|
fontFamily: 'NotoSansHans-Medium',
|
|
color: '#353636',
|
|
formatter: function (params) {
|
|
return params.data.value
|
|
}
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: []
|
|
}
|
|
]
|
|
}
|
|
|
|
export const stackedLineChartOption = {
|
|
color: chartColor3,
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
className: 'echarts-tooltip echarts-tooltip-dark'
|
|
},
|
|
toolbox: {
|
|
show: false
|
|
},
|
|
brush: {
|
|
toolbox: ['lineX'],
|
|
xAxisIndex: 'all',
|
|
throttleType: 'debounce',
|
|
transformable: false
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
grid: {
|
|
top: '12%',
|
|
left: '2%',
|
|
right: '1.5%',
|
|
bottom: 15,
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'time',
|
|
splitNumber: 8
|
|
// axisLabel: {
|
|
// formatter: function (value) {
|
|
// const data = new Date(value)
|
|
// const h = data.getHours() > 9 ? data.getHours() : '0' + data.getHours()
|
|
// const m = data.getMinutes() > 9 ? data.getMinutes() : '0' + data.getMinutes()
|
|
// return h + ':' + m
|
|
// }
|
|
// }
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
formatter: function (value) {
|
|
return unitConvert(value, unitTypes.number).join('')
|
|
}
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
type: 'line',
|
|
symbol: 'circle',
|
|
smooth: true,
|
|
showSymbol: false,
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: []
|
|
}
|
|
]
|
|
}
|
|
|
|
export const linkTrafficLineChartOption = {
|
|
color: chartColor3,
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
className: 'echarts-tooltip echarts-tooltip-dark'
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
grid: {
|
|
top: '12%',
|
|
left: '2%',
|
|
right: '1.5%',
|
|
bottom: 15,
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'time',
|
|
splitNumber: 8
|
|
// axisLabel: {
|
|
// formatter: function (value) {
|
|
// const data = new Date(value)
|
|
// const h = data.getHours() > 9 ? data.getHours() : '0' + data.getHours()
|
|
// const m = data.getMinutes() > 9 ? data.getMinutes() : '0' + data.getMinutes()
|
|
// return h + ':' + m
|
|
// }
|
|
// }
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
formatter: function (value) {
|
|
return unitConvert(value, unitTypes.number).join('')
|
|
}
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
type: 'line',
|
|
symbol: 'circle',
|
|
smooth: true,
|
|
showSymbol: false,
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: []
|
|
}
|
|
]
|
|
}
|
|
|
|
export const appListChartOption = {
|
|
tooltip: {
|
|
appendToBody: true,
|
|
trigger: 'axis',
|
|
formatter: axisFormatter,
|
|
show: true
|
|
},
|
|
xAxis: {
|
|
show: false,
|
|
type: 'time'
|
|
},
|
|
yAxis: {
|
|
show: false,
|
|
type: 'value'
|
|
},
|
|
grid: {
|
|
left: 0,
|
|
right: 1,
|
|
top: 2,
|
|
bottom: 0
|
|
},
|
|
animation: false,
|
|
color: chartColor3[2],
|
|
axisLabel: {},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'line',
|
|
smooth: false,
|
|
symbol: 'none',
|
|
data: [],
|
|
markLine: {}
|
|
}
|
|
]
|
|
}
|
|
|
|
export const npmLineChartOption = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
className: 'echarts-tooltip echarts-tooltip-dark'
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
grid: {
|
|
top: '13%',
|
|
left: '4.6%',
|
|
right: '3%',
|
|
bottom: 15,
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'time',
|
|
splitNumber: 8
|
|
// axisLabel: {
|
|
// formatter: function (value) {
|
|
// const data = new Date(value)
|
|
// const h = data.getHours() > 9 ? data.getHours() : '0' + data.getHours()
|
|
// const m = data.getMinutes() > 9 ? data.getMinutes() : '0' + data.getMinutes()
|
|
// console.log(h + ':' + m)
|
|
// return h + ':' + m
|
|
// }
|
|
// }
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
// formatter: function (value) {
|
|
// return unitConvert(value, unitTypes.number).join('')
|
|
// }
|
|
}
|
|
}
|
|
],
|
|
series: []
|
|
}
|
|
|
|
export const trafficLineChartOption = {
|
|
color: chartColor3,
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
className: 'echarts-tooltip echarts-tooltip-dark'
|
|
},
|
|
legend: {
|
|
show: true,
|
|
left: '0.8%',
|
|
top: '4%',
|
|
padding: 2,
|
|
orient: 'horizontal',
|
|
icon: 'circle',
|
|
itemGap: 20,
|
|
itemWidth: 8,
|
|
textStyle: {
|
|
padding: [0, 0, 0, 2],
|
|
fontSize: 12,
|
|
color: '#717171',
|
|
fontFamily: 'NotoSansSChineseRegular'
|
|
}
|
|
},
|
|
grid: {
|
|
top: '21%',
|
|
left: '2%',
|
|
right: '1%',
|
|
bottom: 20,
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'time',
|
|
splitNumber: 8
|
|
// axisLabel: {
|
|
// formatter: function (value) {
|
|
// const data = new Date(value)
|
|
// const h = data.getHours() > 9 ? data.getHours() : '0' + data.getHours()
|
|
// const m = data.getMinutes() > 9 ? data.getMinutes() : '0' + data.getMinutes()
|
|
// return h + ':' + m
|
|
// }
|
|
// }
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
// formatter: function (value) {
|
|
// return unitConvert(value, unitTypes.number).join('')
|
|
// }
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
type: 'line',
|
|
symbol: 'circle',
|
|
smooth: true,
|
|
showSymbol: false,
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: []
|
|
}
|
|
]
|
|
}
|
|
|
|
export const linksTrafficSankeyOption = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
triggerOn: 'mousemove',
|
|
border: '#C5C5C5',
|
|
borderWidth: 1,
|
|
boxShadow: '-1px 1px 10px -1px rgba(122,116,116,0.85)',
|
|
borderRadius: '2px 2px 2px 2px'
|
|
},
|
|
series: [
|
|
{
|
|
type: 'sankey',
|
|
data: [],
|
|
links: [],
|
|
right: '7%',
|
|
left: '3%',
|
|
top: '0%',
|
|
bottom: '23%',
|
|
label: {
|
|
color: 'rgba(0,0,0,0.7)',
|
|
fontSize: 12,
|
|
formatter (params) {
|
|
return params.data.originalName || params.data.name
|
|
}
|
|
},
|
|
draggable: false
|
|
}
|
|
]
|
|
}
|
|
|
|
export const stackedBarChartOption = {
|
|
color: chartColor6,
|
|
legend: {
|
|
show: false
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
barWidth: 26,
|
|
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
top: '12%',
|
|
left: '2%',
|
|
right: '2%',
|
|
bottom: 24,
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'time',
|
|
boundaryGap: ['1%', '3%'],
|
|
splitNumber: 8,
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
// axisLabel: {
|
|
// margin: 12,
|
|
// formatter: function (value) {
|
|
// const data = new Date(value)
|
|
// const h = data.getHours() > 9 ? data.getHours() : '0' + data.getHours()
|
|
// const m = data.getMinutes() > 9 ? data.getMinutes() : '0' + data.getMinutes()
|
|
// return h + ':' + m
|
|
// }
|
|
// }
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#ECECEC'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
margin: 20
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
data: [],
|
|
stack: 'total',
|
|
type: 'bar',
|
|
name: '',
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
barWidth: 26
|
|
}
|
|
]
|
|
}
|