fix: 修复部分 echart 图表bug，样式调整
This commit is contained in:
@changcode
359
src/views/charts2/charts/options/echartOption.js
Normal file
359
src/views/charts2/charts/options/echartOption.js
Normal file
@@ -0,0 +1,359 @@
|
||||
import { chartColor1, chartColor2, chartColor3, chartColor4, unitTypes } from '@/utils/constants'
|
||||
import unitConvert from '@/utils/unit-convert'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export const pieChartOption1 = {
|
||||
color: chartColor1,
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
top: 45,
|
||||
left: '50%',
|
||||
itemGap: 4,
|
||||
itemWidth: 15,
|
||||
itemHeight: 7,
|
||||
textStyle: {
|
||||
fontFamily: 'SimHei',
|
||||
rich: {
|
||||
a: {
|
||||
width: 35,
|
||||
align: 'left'
|
||||
},
|
||||
b: {
|
||||
width: 6,
|
||||
align: 'left',
|
||||
fontSize: 12,
|
||||
color: '#575757'
|
||||
}
|
||||
}
|
||||
},
|
||||
formatter: function (name) {
|
||||
const data = pieChartOption1.series[0].data
|
||||
let value
|
||||
data.forEach(t => {
|
||||
if (t.name === name) {
|
||||
value = t.describe
|
||||
}
|
||||
})
|
||||
const arr = ['{a|' + ' ' + name + '}' + '{b|' + value + '}']
|
||||
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 = {
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
top: 45,
|
||||
left: '50%',
|
||||
itemGap: 4,
|
||||
itemWidth: 15,
|
||||
itemHeight: 7,
|
||||
textStyle: {
|
||||
fontFamily: 'SimHei',
|
||||
rich: {
|
||||
a: {
|
||||
width: 35,
|
||||
align: 'left'
|
||||
},
|
||||
b: {
|
||||
width: 6,
|
||||
align: 'left',
|
||||
fontSize: 12,
|
||||
color: '#575757'
|
||||
}
|
||||
}
|
||||
},
|
||||
formatter: function (name) {
|
||||
const data = pieChartOption2.series[0].data
|
||||
let value
|
||||
data.forEach(t => {
|
||||
if (t.name === name) {
|
||||
value = t.describe
|
||||
}
|
||||
})
|
||||
const arr = ['{a|' + ' ' + name + '}' + '{b|' + value + '}']
|
||||
return arr
|
||||
}
|
||||
},
|
||||
color: chartColor2,
|
||||
series: [
|
||||
{
|
||||
right: '50%',
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
const sizes = [3, 6, 8, 9, 10]
|
||||
export const stackedLineChartOption = {
|
||||
color: chartColor3,
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
top: '30%',
|
||||
left: '1%',
|
||||
right: '2%',
|
||||
bottom: 15,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'time',
|
||||
splitNumber: 12,
|
||||
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',
|
||||
axisLabel: {
|
||||
formatter: function (value) {
|
||||
return unitConvert(value, unitTypes.number).join('')
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
symbolSize: function (value, params) {
|
||||
return symbolSizeSortChange(0, value[0])
|
||||
},
|
||||
showSymbol: false,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
lineStyle: {
|
||||
color: chartColor3[0],
|
||||
width: 1
|
||||
},
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
borderColor: chartColor4[0],
|
||||
borderWidth: 2,
|
||||
shadowColor: chartColor4[0],
|
||||
shadowBlur: sizes[0] + 2
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.1,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColor3[0]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: chartColor3[0]
|
||||
}
|
||||
])
|
||||
},
|
||||
data: []
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
symbolSize: function (value, params) {
|
||||
return symbolSizeSortChange(1, value[0])
|
||||
},
|
||||
showSymbol: false,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
lineStyle: {
|
||||
color: chartColor3[1],
|
||||
width: 1
|
||||
},
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
borderColor: chartColor4[1],
|
||||
borderWidth: 2,
|
||||
shadowColor: chartColor4[1],
|
||||
shadowBlur: sizes[1] + 2
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.1,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColor3[1]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: chartColor3[1]
|
||||
}
|
||||
])
|
||||
},
|
||||
data: []
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
symbolSize: function (value, params) {
|
||||
return symbolSizeSortChange(2, value[0])
|
||||
},
|
||||
showSymbol: false,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
lineStyle: {
|
||||
color: chartColor3[2],
|
||||
width: 1
|
||||
},
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
borderColor: chartColor4[2],
|
||||
borderWidth: 2,
|
||||
shadowColor: chartColor4[2],
|
||||
shadowBlur: sizes[2] + 2
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.1,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColor3[2]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: chartColor3[2]
|
||||
}
|
||||
])
|
||||
},
|
||||
data: []
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
symbolSize: function (value, params) {
|
||||
return symbolSizeSortChange(3, value[0])
|
||||
},
|
||||
showSymbol: false,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
lineStyle: {
|
||||
color: chartColor3[3],
|
||||
width: 1
|
||||
},
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
borderColor: chartColor4[3],
|
||||
borderWidth: 2,
|
||||
shadowColor: chartColor4[3],
|
||||
shadowBlur: sizes[3] + 2
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.1,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColor3[3]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: chartColor3[3]
|
||||
}
|
||||
])
|
||||
},
|
||||
data: []
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
symbolSize: function (value, params) {
|
||||
return symbolSizeSortChange(4, value[0])
|
||||
},
|
||||
showSymbol: false,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
lineStyle: {
|
||||
color: chartColor3[4],
|
||||
width: 1
|
||||
},
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
borderColor: chartColor4[4],
|
||||
borderWidth: 2,
|
||||
shadowColor: chartColor4[4],
|
||||
shadowBlur: sizes[4] + 2
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.1,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColor3[4]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: chartColor3[4]
|
||||
}
|
||||
])
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
function symbolSizeSortChange (index, time) {
|
||||
const totalData = stackedLineChartOption.series[0].data.find(t => t[0] === time) // [time, value]
|
||||
const inboundData = stackedLineChartOption.series[1].data.find(t => t[0] === time)
|
||||
const outboundData = stackedLineChartOption.series[2].data.find(t => t[0] === time)
|
||||
const internalData = stackedLineChartOption.series[3].data.find(t => t[0] === time)
|
||||
const otherData = stackedLineChartOption.series[4].data.find(t => t[0] === time)
|
||||
totalData[2] = 0
|
||||
inboundData[2] = 1
|
||||
outboundData[2] = 2
|
||||
internalData[2] = 3
|
||||
otherData[2] = 4
|
||||
const dataIntegrationArray = [totalData, inboundData, outboundData, internalData, otherData]
|
||||
dataIntegrationArray.sort((a, b) => { return a[1] - b[1] })
|
||||
const sortIndex = dataIntegrationArray.findIndex(a => a[2] === index)
|
||||
return sizes[sortIndex]
|
||||
}
|
||||
Reference in New Issue
Block a user