jiangyy
3 years ago
4 changed files with 601 additions and 5 deletions
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,140 @@ |
|||
import * as echarts from 'echarts' |
|||
export function barOption () { |
|||
|
|||
return { |
|||
title: { |
|||
text: '单位（人）', |
|||
left: 5, |
|||
textStyle: { |
|||
|
|||
fontSize: 14, |
|||
color: " rgba(255,255,255,0.65)", |
|||
fontWeight: 400, |
|||
}, |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
}, |
|||
// legend: {},
|
|||
grid: { |
|||
top:40, |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: 19, |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
axisLine: { |
|||
lineStyle: { |
|||
color:'rgba(255,255,255,0.15)', |
|||
width: 1, |
|||
type: 'solid' |
|||
} |
|||
}, |
|||
axisTick: { |
|||
alignWithLabel: true |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
textStyle: { |
|||
color: 'rgba(255,255,255,0.85)', //更改坐标轴文字颜色
|
|||
fontSize : 12 //更改坐标轴文字大小
|
|||
} |
|||
}, |
|||
|
|||
data: [] |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
max : 1000, |
|||
splitNumber : 5, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle:{ |
|||
color:'rgba(255,255,255,0.15)', |
|||
width: 1, |
|||
type: 'solid' |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
textStyle: { |
|||
color: 'rgba(255,255,255,0.85)', //更改坐标轴文字颜色
|
|||
fontSize : 12 //更改坐标轴文字大小
|
|||
} |
|||
}, |
|||
} |
|||
], |
|||
series: [ |
|||
|
|||
{ |
|||
name: '常住人口', |
|||
type: 'line', |
|||
stack: 'Total', |
|||
barWidth:12, |
|||
emphasis: { |
|||
focus: 'series' |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
color: "#FFAA00", //图例颜色
|
|||
borderWidth: 2, |
|||
borderColor: "#FFAA00", |
|||
lineStyle: { color: "#FFAA00", width: 1 } |
|||
} |
|||
}, |
|||
|
|||
areaStyle: { |
|||
normal: { |
|||
// 渐变填充色（线条下半部分）
|
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: "#FFAA00" }, |
|||
{ offset: 1, color: "rgba(255,170,0,0)" } |
|||
]) |
|||
} |
|||
}, |
|||
|
|||
data: [] |
|||
}, |
|||
{ |
|||
name: '流动人口', |
|||
type: 'line', |
|||
barWidth:12, |
|||
stack: 'Total', |
|||
emphasis: { |
|||
focus: 'series' |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
color: "#1A95FF", //图例颜色
|
|||
borderWidth: 2, |
|||
borderColor: "#1A95FF", |
|||
lineStyle: { color: "#1A95FF", width: 1 } |
|||
} |
|||
}, |
|||
|
|||
areaStyle: { |
|||
normal: { |
|||
// 渐变填充色（线条下半部分）
|
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: "#1A95FF" }, |
|||
{ offset: 1, color: "rgba(255,170,0,0)" } |
|||
]) |
|||
} |
|||
}, |
|||
data: [] |
|||
}, |
|||
|
|||
|
|||
|
|||
] |
|||
|
|||
} |
|||
} |
|||
@ -0,0 +1,90 @@ |
|||
import * as echarts from 'echarts' |
|||
export function pieOption() { |
|||
const center = ["50%", "170px"]; |
|||
return { |
|||
title: { |
|||
text: "0", |
|||
top: 45, |
|||
left: "center", |
|||
textStyle: { |
|||
width: "100%", |
|||
fontSize: 24, |
|||
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: [ |
|||
{ |
|||
name: 'Access From', |
|||
type: 'pie', |
|||
radius: ['60%', '90%'], |
|||
avoidLabelOverlap: false, |
|||
label: { |
|||
show: false, |
|||
position: 'center' |
|||
}, |
|||
// emphasis: {
|
|||
// label: {
|
|||
// show: true,
|
|||
// fontSize: 40,
|
|||
// fontWeight: 'bold'
|
|||
// }
|
|||
// },
|
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
color: (list) => { |
|||
// 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
|
|||
var colorList = [ |
|||
{ |
|||
colorStart:'#00023A', |
|||
colorEnd:'#6FDEFF' |
|||
}, |
|||
{ |
|||
colorStart:'#00023A', |
|||
colorEnd:'#FFAA00' |
|||
}, |
|||
|
|||
|
|||
] |
|||
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //左、下、右、上
|
|||
offset: 0, |
|||
color: colorList[list.dataIndex]['colorStart'] |
|||
}, { |
|||
offset: 1, |
|||
color: colorList[list.dataIndex]['colorEnd'] |
|||
}]) |
|||
} |
|||
} |
|||
}, |
|||
|
|||
data: [ |
|||
] |
|||
} |
|||
] |
|||
}; |
|||
} |
|||
Loading…
Reference in new issue