echarts-柱状图

app.title = '排名 - 条形图';
        
    /**
     * 柱状图tootiple自定义
     * @param params
     * @returns {string}
     */
    function formatterTip(params) {
        //移除重复的数据
        for (var i = 0; i < params.length; i++) {
            for (var j = params.length - 1; j > i; j--) {
                if (params[j].data == params[i].data) {
                    params.splice(j, 1);
                    break;
                }
            }
        }
        var tip = '';
        for (var z = 0; z < params.length; z++) {//这里是自己定义样式， params[i].marker 表示是否显示左边的那个小圆圈
            if ( params[z].seriesName=="实时排名") {
                var icon  =" <div style='background: #73aae5;height: 8px;width: 8px;border-radius: 8px;margin-top:7px;margin-right: 4px;float: left;display: inline-block'></div>";
                tip = tip + icon +  params[z].name + ' : ' + params[z].value + '<br/>';
            }
        }
        return tip;
    }
    var xAxisData = ["100.23","89","77","66.66","55.89","30"];
    var yAxisData = ["测试1","测试2","测试3","测试4","测试5","测试6"];
    var tempData = [
    {"name":"","value":"100.23","dataOrder":"1"},
    {"name":"","value":"100.23","dataOrder":"2"},
    {"name":"","value":"100.23","dataOrder":"3"},
    {"name":"","value":"100.23","dataOrder":"4"},
    {"name":"","value":"100.23","dataOrder":"5"},
    {"name":"","value":"100.23","dataOrder":"6"}];
    option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },formatter: function (params) {//提示框自定义
             
                    return formatterTip(params);
                }
            },
            grid:{
                left:'6%',
                right:'6%'
            },
            xAxis: {
                type: 'value',
                show:false,
                splitLine:{
                    show:false
                }
            },
            yAxis: {
                type: 'category',
                data: yAxisData,
                inverse: true,
                show:false,
                splitLine:{
                    show:false
                }
            },
            series: [
                {
                    type: 'bar',
                    itemStyle: {
                        normal: {color: 'rgba(0,0,0,0.3)'}
                    },
                    barGap:'-100%',
                    barCategoryGap:'60%',
                  
                    data: tempData,
                    animation: false,
                    label: {
                        normal: {
                            show: true,
                            position:[1,-14],
                            textStyle: { //数值样式
                                color: 'black',
                                fontSize:12
                            },
                            formatter: function(params) {
                                var valueTxt = '';
                                if (params.name.length > 14) {
                                    valueTxt = params.name.substring(0, 14) + '...';
                                }
                                else {
                                    valueTxt = params.name;
                                }
                                var index = params.data.dataOrder;

                                return "NO." +index+" " + valueTxt ;
                            }
                        }
                    },
                },
                {
                    name: '实时排名',
                    type: 'bar',
                    barGap:'-100%',
                    barCategoryGap:'90%',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0,1, 0,
                                [
                                    {offset: 0, color: '#2a82cf'},
                                    {offset: 0.5, color: '#15c1cd'},
                                    {offset: 1, color: '#01facc'}
                                ]
                            )
                        },
                        emphasis: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#2378f7'},
                                    {offset: 0.7, color: '#2378f7'},
                                    {offset: 1, color: '#83bff6'}
                                ]
                            )
                        }
                    },
                    data: xAxisData
                }
            ]
        };