人事变动趋势echarts none' // 默认为直线，可选为：'line' | 'shadow' // }, }, legend: { icon: 'rect配置项内容和展示
人事变动趋势
配置项如下
var arrIn = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var arrlabel = ["2018-06-07", "2018-06-08", "2018-06-09", "2018-06-10", "2018-06-11", "2018-06-12", "2018-06-13", "2018-06-14", "2018-06-15", "2018-06-16", "2018-06-17", "2018-06-18", "2018-06-19", "2018-06-20", "2018-06-21", "2018-06-22", "2018-06-23", "2018-06-24", "2018-06-25", "2018-06-26", "2018-06-27", "2018-06-28", "2018-06-29", "2018-06-30", "2018-07-01", "2018-07-02", "2018-07-03", "2018-07-04", "2018-07-05", "2018-07-06", "2018-07-07", "2018-07-08", "2018-07-09", "2018-07-10", "2018-07-11", "2018-07-12", "2018-07-13", "2018-07-14", "2018-07-15", "2018-07-16", "2018-07-17", "2018-07-18", "2018-07-19", "2018-07-20", "2018-07-21", "2018-07-22", "2018-07-23", "2018-07-24", "2018-07-25", "2018-07-26", "2018-07-27", "2018-07-28", "2018-07-29", "2018-07-30", "2018-07-31", "2018-08-01", "2018-08-02", "2018-08-03", "2018-08-04", "2018-08-05", "2018-08-06", "2018-08-07", "2018-08-08", "2018-08-09", "2018-08-10", "2018-08-11", "2018-08-12", "2018-08-13", "2018-08-14", "2018-08-15", "2018-08-16", "2018-08-17", "2018-08-18", "2018-08-19", "2018-08-20", "2018-08-21", "2018-08-22", "2018-08-23", "2018-08-24", "2018-08-25", "2018-08-26", "2018-08-27", "2018-08-28", "2018-08-29", "2018-08-30", "2018-08-31", "2018-09-01", "2018-09-02", "2018-09-03", "2018-09-04", "2018-09-05", "2018-09-06", "2018-09-07"];
var arrLeave = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var arrTotal = [18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23];
var dt = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
option = {
// backgroundColor: '#424956',
title: {
// text: '请求数',
textStyle: {
fontWeight: 'normal',
fontSize: 16,
color: '#F1F1F3'
},
left: '6%'
},
tooltip: {
trigger: 'axis',
borderRadius:0,
// backgroundColor:'#7AD1A8',
formatter:function(pm){
var param=pm[0];
var pht='<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:rgba(166,154,228);"></span>';
console.log(param.marker);
var prm= "星期"+"日一二三四五六 ".charAt(new Date(param.name).getDay());
return param.name+": "+prm+"<br>"
+ pht +param.seriesName+": "+param.value+" | 80.33ttt%";
},
// axisPointer: { // 坐标轴指示器，坐标轴触发有效
// type: 'none' // 默认为直线，可选为：'line' | 'shadow'
// },
},
legend: {
icon: 'rect',
itemWidth: 10,
itemHeight: 10,
itemGap: 10,
data: ['实名率'],
left: '4%',
textStyle: {
fontSize: 12,
color: '#292f39'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
axisTick: {
show: false,
},
type: 'category',
axisLabel: {
margin: 10,
textStyle: {
fontSize: 12,
color: '#666'
}
},
boundaryGap: false,
splitLine:{
lineStyle: {
color: '#ddd',
},
show:true
},
axisLine: {
lineStyle: {
color: '#979797',
width: 1,
}
},
data: arrlabel
}],
yAxis: [{
position:'right',
type: 'value',
// name: '单 位（%）',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#979797'
}
},
axisLabel: {
margin: 10,
inside:true,
textStyle: {
fontSize: 14,
// color:'#979797'
}
},
splitLine: {
show : true,
lineStyle: {
// color: '#57617B'
}
}
}],
series: [{
name: '实名率',
type: 'line',
smooth: true,
// symbol: 'circle',
//symbolSize: 5,
// showSymbol: false,
// markPoint: { // markLine 也是同理
// data: [{
// coord: [0,1,2,3,4], // 其中 5 表示 xAxis.data[5]，即 '33' 这个元素。
// // coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
// // 注意，使用这种方式时，xAxis.data 不能写成 [number, number, ...]
// // 而只能写成 [string, string, ...]
// }]
// },
lineStyle: {
normal: {
width: 2
}
},
areaStyle: {
normal: {
color: 'rgba(166,154,228,0.40)',
// shadowColor: 'rgba(0, 0, 0, 0.1)',
//shadowBlur: 10
}
},
itemStyle: {
normal: {
areaStyle: {
type: 'default'
},
color: 'rgba(166,154,228)',
},
emphasis: {
// color: 'rgb(0,196,132)',
borderColor: 'rgba(0,196,132,0.2)',
extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
// borderWidth: 10
}
},
data: arrTotal
}]
};
截图如下
