wylyl22
3 years ago
parent
0fc604e428
commit
458e1769b4
@ -0,0 +1,62 @@
|
||||
// 象形
|
||||
export default function pictographicOption(dRegion=[],dValue=[]){
|
||||
return {
|
||||
tooltip: {
|
||||
},
|
||||
xAxis: {
|
||||
show:false,
|
||||
type:'value'
|
||||
},
|
||||
yAxis:
|
||||
{
|
||||
data: dRegion,
|
||||
inverse: true,
|
||||
axisTick: { show: false },
|
||||
axisLine: { show: false },
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
color: '#333333',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
// top: 'center',
|
||||
bottom:20,
|
||||
height:186,
|
||||
width:48,
|
||||
left: 40,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
itemStyle:{
|
||||
normal:{
|
||||
color:'#0084FF',
|
||||
barBorderRadius:12
|
||||
},
|
||||
},
|
||||
// current data
|
||||
type: 'bar',
|
||||
barWidth:10,
|
||||
data:dValue,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: function (params) {
|
||||
return ((params.value / 100) * 100).toFixed(1) + ' %';
|
||||
},
|
||||
// position: 'right',
|
||||
// offset: [20, 0],
|
||||
color: '#333333',
|
||||
fontSize: 12,
|
||||
position:[60,-4]
|
||||
},
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(180, 180, 180, 0.2)'
|
||||
},
|
||||
markLine: {
|
||||
symbol: 'none',
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,54 @@
|
||||
// 饼图
|
||||
export default function pieOption(color=[],data=[]){
|
||||
return{
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
// 注释字体样式
|
||||
// legend: {
|
||||
// orient: 'vertical',
|
||||
// top:16,
|
||||
// left:170,
|
||||
// itemWidth: 10,//data图标大小
|
||||
// itemHeight: 10,
|
||||
// itemGap: 50//图标之间间距
|
||||
// },
|
||||
// 环形统计图样式
|
||||
series: [
|
||||
{
|
||||
// bottom:68,
|
||||
// right:6,
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['66', '40'],
|
||||
avoidLabelOverlap: false,
|
||||
|
||||
itemStyle: {
|
||||
// borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
// 点击弹出提示位置
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
color:color,
|
||||
//点击弹出提示样式
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
// 环形数据
|
||||
data: data
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,128 @@
|
||||
// 柱状
|
||||
export default function sHistogram(dx=[],ds=[],data=[],color2=[]) {
|
||||
// MS判断多条数据还是单条数据 true为单条false为多条
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
confine: true
|
||||
},
|
||||
legend: {
|
||||
icon: 'rectangle',//data图标样式
|
||||
itemWidth: 8,//data图标大小
|
||||
itemHeight: 8,
|
||||
left: 5,
|
||||
textStyle: {
|
||||
fontSize: 8,
|
||||
fontWeight: 400
|
||||
},
|
||||
data: data,
|
||||
},
|
||||
//图表位置
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 15,
|
||||
top: 40,
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisTick:{
|
||||
show:false //去除刻度线
|
||||
},
|
||||
axisLine:{
|
||||
show:false //去除轴线
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#999999',//y轴文本颜色
|
||||
textStyle: {
|
||||
fontSize : 9
|
||||
}
|
||||
},
|
||||
splitLine: { //分割线
|
||||
// lineStyle:{
|
||||
// // color:"#2d3436"
|
||||
|
||||
// }
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#E8E8E8',
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: dx,
|
||||
axisTick:{
|
||||
show:false //去除刻度线
|
||||
},
|
||||
axisLine:{
|
||||
show:false, //去除轴线
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#999999',//x轴文本颜色
|
||||
textStyle: {
|
||||
fontSize : 9
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
],
|
||||
series:columar(data,ds,color2)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function columar(data=[],ds=[],color2=[]){
|
||||
// MS判断多条数据还是单条数据 true为单条false为多条
|
||||
let list=[]
|
||||
for (let i = 0; i < color2.length; i++) {
|
||||
// MS?
|
||||
// list.push({
|
||||
// type: 'bar',
|
||||
// data: ds,
|
||||
// stack:"Search Engine",
|
||||
// emphasis: {//折线图的高亮状态。
|
||||
// focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
|
||||
// },
|
||||
// itemStyle: {
|
||||
// normal:{
|
||||
// color: color1,
|
||||
// lineStyle: {
|
||||
// color: color1
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }) :
|
||||
list.push({
|
||||
name: data[i],
|
||||
type: 'bar',
|
||||
barWidth : 24,
|
||||
data: ds[i],
|
||||
stack:"Search Engine",
|
||||
emphasis: {//折线图的高亮状态。
|
||||
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
|
||||
},
|
||||
itemStyle: {
|
||||
normal:{
|
||||
color: color2[i],
|
||||
lineStyle: {
|
||||
color: color2[i]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
return list
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in new issue