option = {
xAxis: {
type: 'category',
data: ['Category A', 'Category B', 'Category C', 'Category D']
},
yAxis: {
type: 'value'
},
series: [{
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {
color: 'skyblue'
},
symbolSize: 40,
data: [100, 80, 120, 150],
symbolRepeat: 'fixed',
symbolMargin: '50%',
z: 3,
label: {
show: true,
position: 'top',
formatter: '{c}%',
fontSize: 12,
color: 'black'
},
emphasis: {
itemStyle: {
color: 'orange' // 高亮时的图形颜色
},
label: {
show: true,
position: 'inside', // 标签位置,'inside' 表示在象形柱内部
fontSize: 14,
color: 'white' // 高亮时的标签颜色
}
},
animationDuration: 1000,
animationEasing: 'cubicOut'
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
在上述代码中,emphasis 部分包含了高亮时的配置,其中:
- itemStyle 控制高亮时的图形样式,包括颜色等。
- label 控制高亮时的标签样式,包括是否显示、位置、字体大小、颜色等。
这样配置后,当鼠标悬停在象形柱图上时,会显示定义的高亮效果。
你可以根据实际需求调整高亮时的样式,以满足你的交互设计需求。
转载请注明出处:http://www.zyzy.cn/article/detail/5447/ECharts