在 ECharts 中,你可以通过配置 emphasis 属性来设置象形柱图的 hover 动画效果。这包括 hover 时的图形样式、标签样式等。以下是一个例子,演示如何设置象形柱图的 hover 动画效果:
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