echart横向柱状图

app.title = 'Top 10';

option = {
    tooltip: {
        trigger: 'axis',
        show:false,
        textStyle:{
            color:'#6a717b',
        },
         
    }, 
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    yAxis: [{
        type: 'category',//Y轴为类别名
        data: ['OPPO R9s','OPPO A57'],
        show: false,//同时隐藏坐标轴（yAxis）和刻度：
        inverse: true,
        axisTick: {
            alignWithLabel: false,//Y轴黑色凸起
            show: false,//y刻度
            },
        axisLabel: {
            margin: 10,//配合align设置类别名显示左对齐
            textStyle: {
                fontSize: 14,
                align:'left',//设置类别名显示左对齐
                color:'#000000'//y轴坐标字体颜色
                }
        },
         axisLine: {
             show:false,
            lineStyle: {
                // color: '#2548ac'
            }
         },
         
    }],
    xAxis: [{
        show: false,//同时隐藏坐标轴（xAxis）和刻度：
        type: 'value',
         axisLabel: {
            margin: 10,
            show:false,
            textStyle: {

                fontSize: 12,
                color:'#53a8fa',
                
                }
        },
        axisTick: {
            show: true,//x轴刻度
            },
         axisLine: {
            show:false, //隐藏X坐标轴
            lineStyle: {
                color: '#192469'
            }
         },
         splitLine: {
             show:false,
            lineStyle: {

                color: '#17367c'
            }
        }
         
         
        
    }],
    // backgroundColor: '#192469',//背景色
    series: [{
        name: 'Top 10',
        type: 'bar',
        barWidth:26,
        data: [8827896, 7472072],
        label: {
            normal: {
                show: true,
                position: 'right',
                textStyle: {//柱状体显示字体设置
                    color: 'black', //颜色,//不设置默认为当前该柱体颜色
                    fontSize:16  ,//大小
                    fontWeight:400,//粗细
                },
                formatter: '{c} 个'//c后面加单位

            }
        },
        itemStyle: {
            normal: {
　　　　　　　　//这里是重点
                color: function(params) {//柱体颜色设置
                	//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                    var colorList = ['#FF9900','#5CDF2E', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
                    return colorList[params.dataIndex]
                }
            }
            
        },
    }]
};

echarts图表设置自定义属性并获取自定义属性的值，点击事件函数

data:[
{value:0, name:'打开', myId:4},
{value:0, name:'离线', myId:5},
{value:0, name:'关闭bai', myId:6},
],
Chart.on('click', function (params) {
alert(params.data.myId);//输出自定义的myId值du
});