jiangyy
3 years ago
4 changed files with 183 additions and 755 deletions
@ -1,86 +0,0 @@ |
|||||
import * as echarts from 'echarts' |
|
||||
export function lineOption () { |
|
||||
|
|
||||
return { |
|
||||
tooltip: { |
|
||||
trigger: 'axis', |
|
||||
axisPointer: { |
|
||||
type: 'cross', |
|
||||
label: { |
|
||||
backgroundColor: '#6a7985' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
xAxis: { |
|
||||
type: 'category', |
|
||||
// boundaryGap: false,
|
|
||||
axisLabel: { |
|
||||
color: '#8ec7dc', |
|
||||
fontSize: 16 |
|
||||
}, |
|
||||
axisTick: { |
|
||||
show: false |
|
||||
}, |
|
||||
axisLine: { |
|
||||
lineStyle: { |
|
||||
color: '#0c4b59' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
yAxis: { |
|
||||
nameTextStyle: { |
|
||||
color: '#8ec7dc', |
|
||||
fontSize: 18 |
|
||||
}, |
|
||||
splitNumber: 4, |
|
||||
minInterval: 1, |
|
||||
show: true, |
|
||||
type: 'value', |
|
||||
axisLabel: { |
|
||||
color: '#8ec7dc', |
|
||||
fontSize: 18 |
|
||||
}, |
|
||||
axisTick: { |
|
||||
show: false |
|
||||
}, |
|
||||
splitLine: { |
|
||||
lineStyle: { |
|
||||
color: ['#145968'], |
|
||||
type: 'dotted' |
|
||||
} |
|
||||
}, |
|
||||
axisLine: { |
|
||||
show: true, |
|
||||
symbol: ['none', 'arrow'], |
|
||||
symbolOffset: [0, 15], |
|
||||
lineStyle: { |
|
||||
color: '#0c4b59' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
series: [ |
|
||||
{ |
|
||||
name: '项目数', |
|
||||
type: 'line', |
|
||||
smooth: true, |
|
||||
barWidth: 15, |
|
||||
areaStyle: {}, |
|
||||
itemStyle: { |
|
||||
color: new echarts.graphic.LinearGradient( |
|
||||
0, 1, 0, 0, |
|
||||
[ |
|
||||
{ offset: 0, color: 'rgba(121, 55, 255, 0)' }, |
|
||||
{ offset: 1, color: '#6339FF' } |
|
||||
] |
|
||||
) |
|
||||
} |
|
||||
}, |
|
||||
// {
|
|
||||
// data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
||||
// type: 'line',
|
|
||||
// areaStyle: {}
|
|
||||
// }
|
|
||||
] |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
@ -1,183 +0,0 @@ |
|||||
|
|
||||
export function pieOption (_charts) { |
|
||||
const center= ['50%', '170px'] |
|
||||
return { |
|
||||
title: { |
|
||||
text: '0', |
|
||||
top: 140, |
|
||||
left: 'center', |
|
||||
textStyle: { |
|
||||
width: '100%', |
|
||||
fontSize: 32, |
|
||||
color: '#FFFFFF', |
|
||||
fontWeight: 400 |
|
||||
}, |
|
||||
itemGap: 5, |
|
||||
subtext: '总数', |
|
||||
subtextStyle: { |
|
||||
fontSize: 20, |
|
||||
color: '#fff', |
|
||||
fontWeight: 400 |
|
||||
} |
|
||||
}, |
|
||||
tooltip: { |
|
||||
show: false |
|
||||
}, |
|
||||
// legend: {
|
|
||||
// top: 350,
|
|
||||
// bottom: 0,
|
|
||||
// itemWidth: 20,
|
|
||||
// itemHeight: 10,
|
|
||||
// textStyle: {
|
|
||||
// color: '#D2E7FF',
|
|
||||
// fontSize: 16,
|
|
||||
// lineHeight: 20,
|
|
||||
// },
|
|
||||
|
|
||||
// },
|
|
||||
series: [ |
|
||||
// 外侧圆环
|
|
||||
{ |
|
||||
type: 'pie', |
|
||||
// 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
|
|
||||
startAngle: 0, |
|
||||
hoverAnimation: false, |
|
||||
// tooltip: {
|
|
||||
// },
|
|
||||
center: center, |
|
||||
radius: ['58%', '58.3%'], |
|
||||
label: { |
|
||||
normal: { |
|
||||
show: false |
|
||||
} |
|
||||
}, |
|
||||
labelLine: { |
|
||||
normal: { |
|
||||
show: false |
|
||||
} |
|
||||
}, |
|
||||
data: [{ |
|
||||
value: 360, |
|
||||
itemStyle: { |
|
||||
normal: { |
|
||||
color: 'rgba(40, 101, 250, 0)', |
|
||||
width:0, |
|
||||
borderColor: 'rgba(40, 101, 250, 0.5)', |
|
||||
borderWidth: 1, |
|
||||
borderType: 'dotted' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
] |
|
||||
}, |
|
||||
|
|
||||
// 突出的
|
|
||||
{ |
|
||||
hoverAnimation: false, |
|
||||
// name: 'Access From',
|
|
||||
type: 'pie', |
|
||||
center: center, |
|
||||
radius: ['35%', '48%'], |
|
||||
avoidLabelOverlap: false, |
|
||||
// top: top + '%',
|
|
||||
// height: '80%',
|
|
||||
selectedMode: 'single', |
|
||||
left: 'center', |
|
||||
width: 400, |
|
||||
label: { |
|
||||
// show: false,
|
|
||||
position: 'outside', |
|
||||
alignTo: 'edge', |
|
||||
// formatter: '{a|{c}}\n\n{name|{b}}',
|
|
||||
formatter: '{a|{c}%}\n{r|}\n{name|{b}}', |
|
||||
minMargin: 5, |
|
||||
edgeDistance: 1, |
|
||||
lineHeight: 15, |
|
||||
color: '#fff', |
|
||||
fontSize: 12, |
|
||||
// distanceToLabelLine: -60,
|
|
||||
rich: { |
|
||||
name: { |
|
||||
padding: [0, 6, 0, 6] |
|
||||
}, |
|
||||
a: { |
|
||||
fontSize: 30, |
|
||||
color: '#fff', |
|
||||
padding: [0, 6, 6, 6] |
|
||||
}, |
|
||||
r: { |
|
||||
backgroundColor: 'auto', |
|
||||
borderRadius: 6, |
|
||||
width: 6, |
|
||||
height: 6, |
|
||||
// padding: [3, 3, 0, -12]
|
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
labelLine: { |
|
||||
show: false, |
|
||||
smooth: 0.2, |
|
||||
length: 30, |
|
||||
length2: 0, |
|
||||
maxSurfaceAngle: 80 |
|
||||
}, |
|
||||
labelLayout: function (params) { |
|
||||
|
|
||||
const isLeft = params.labelRect.x < _charts.getWidth() / 2; |
|
||||
const points = params.labelLinePoints; |
|
||||
// Update the end point.
|
|
||||
if (points) { |
|
||||
points[2][0] = isLeft |
|
||||
? params.labelRect.x |
|
||||
: params.labelRect.x + params.labelRect.width; |
|
||||
} |
|
||||
|
|
||||
return { |
|
||||
labelLinePoints: points |
|
||||
}; |
|
||||
}, |
|
||||
itemStyle: { |
|
||||
color:function(params) { |
|
||||
//自定义颜色
|
|
||||
var colorList = [ '#FAC126', '#3DDA83']; |
|
||||
return colorList[params.dataIndex] |
|
||||
} |
|
||||
}, |
|
||||
data: [], |
|
||||
|
|
||||
}, |
|
||||
// 中间圆环
|
|
||||
{ |
|
||||
type: 'pie', |
|
||||
// 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
|
|
||||
startAngle: 0, |
|
||||
hoverAnimation: false, |
|
||||
center: center, |
|
||||
// tooltip: {
|
|
||||
// },
|
|
||||
radius: ['0%', '25%'], |
|
||||
label: { |
|
||||
|
|
||||
show: false |
|
||||
|
|
||||
}, |
|
||||
labelLine: { |
|
||||
|
|
||||
show: false |
|
||||
|
|
||||
}, |
|
||||
data: [{ |
|
||||
value: 360, |
|
||||
itemStyle: { |
|
||||
normal: { |
|
||||
color: 'rgba(8, 37, 134, 1)', |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
] |
|
||||
}, |
|
||||
] |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
Loading…
Reference in new issue