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
});