当前位置 : 首页 » 博文聚焦 » 正文

echarts柱状图的高亮显示方案

分类 : 博文聚焦 | 发布时间 : 2018-03-05 18:26:17 | 浏览 : 705
var option = {
tooltip : {
trigger : 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
yAxis : {
type : 'value'
},
xAxis : {
type : 'category',
data : data.xData
},
series : [ {
           name: '在线数量',
           type: 'bar',
           label: {
               normal: {
                   show: true,
                   position: 'top'
               }
           },
           data: data.yData,
           //配置样式
           itemStyle: {   
               //通常情况下:
               normal:{  
            //当前选中的柱子使用亮色,其余的使用基本颜色
                    color: function (param){
                       return (params['company']==data.xData[param.dataIndex])?
                        'rgb(204,0,51)':
                        'rgb(42,170,227)';
                   }

               },
               //鼠标悬停时:
               emphasis: {
                       shadowBlur: 10,
                       shadowOffsetX: 0,
                       shadowColor: 'rgba(0, 0, 0, 0.5)'
               }
           }
       }


]
};

相关阅读: