人事变动趋势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+":&nbsp;&nbsp;"+prm+"<br>"
            + pht +param.seriesName+":&nbsp;&nbsp;"+param.value+"&nbsp;&nbsp;|&nbsp;&nbsp;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
    }]
};
    
截图如下