故宫16-17客流量同比统计echarts 折线配置项内容和展示

区分两条lines数据关系,利用bar图区分同比数据变化;增加显示绿色,减少显示红色

      //------------------------------------引用请注明出处
var data1=[260, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122];
var data2=[120, 110, 125, 145, 122, 165, 122, 260, 182, 191, 134, 150];
var axisData=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];

var barData1=[];
var barData2=[];
for(var i=0;i<axisData.length;i++){
    barData1.push(Math.min(data1[i],data2[i]));
    barData2.push(Math.abs(data1[i]-data2[i]));
}


option = {
    backgroundColor: '#333',
    title: {
        text: '故宫16-17客流量同比统计',
        subtext:'作者:花自飘凌水自流',
        textStyle: {
            fontWeight: 'normal',
            fontSize: 14,
            color: '#F1F1F3'
        },
        subtextStyle: {
            fontWeight: 'normal',
            fontSize: 12,
            color: '#F1F1F3'
        },
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                color: 'cyan'
            }
        },
        formatter:function(params){
            console.log(params);
            var tooltipStr=
                '<p>2016年 : '+data1[params[0].dataIndex]+' 千人/次</p>'+
                '<p>2017年 : '+data2[params[0].dataIndex]+' 千人/次</p>'+
                '<p>差值 : '+barData2[params[0].dataIndex]+' 千人/次</p>';
                
            return tooltipStr;
        }
    },
    legend: {
        icon: 'rect',
        itemWidth: 14,
        itemHeight: 5,
        itemGap: 13,
        data: ['2017', '2016',],
        right: '4%',
        top: '10%',
        textStyle: {
            fontSize: 12,
            color: '#F1F1F3'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        top: '15%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: true,
        axisLine: {
            lineStyle: {
                color: '#fff'
            }
        },
        axisLabel:{
            textStyle:{
                color:'#fff'
            }
        },
        data: axisData
    },
    yAxis: {
        type: 'value',
        name: '客流量（千人/次）',
        axisTick: {
            show: true
        },
        axisLine: {
            lineStyle: {
                color: '#fff'
            }
        },
        axisLabel: {
            textStyle: {
                color:'#fff',
                fontSize: 14,
            }
        },
        splitLine: {
            lineStyle: {
                color: '#fff'
            }
        }
    },
    series: [
        {
            name: '2017',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgb(137,189,27)',
                    borderColor: 'rgba(137,189,2,0.27)',
                    borderWidth: 8
    
                }
            },
            data: data1
        }, 
        {
            name: '2016',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgb(0,136,212)',
                    borderColor: 'rgba(0,136,212,0.2)',
                    borderWidth: 8
    
                }
            },
            data: data2
        }, 
    
        // bar图
        {
            type:'bar',
            stack:'test',
            // barWidth:'10%',
            itemStyle:{
                normal:{
                    color:'rgba(0,0,0,0)'
                }
            },
            data:barData1,
            tooltip:{
                show:false
            }
            
        },
        {
            type:'bar',
            stack:'test',
            barWidth:4,
            itemStyle:{
                normal:{
                    color:function(params){
                        // console.log(params);
                        if(data1[params.dataIndex]>data2[params.dataIndex]){
                            return 'green';
                        }else if(data1[params.dataIndex]<data2[params.dataIndex]){
                            return 'red';
                        }else{
                             return 'rgba(0,0,0,0)';
                        }
                    },
                    barBorderRadius:2
                }
            },
            data:barData2,
            tooltip:{
                show:false
            }
            
        }
    
    ]
};