[apache/echarts]<font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">柱状图点击以后，点中的柱子的影子一直不消失直到点中下根柱子再消失怎么实现？

tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow",
            shadowStyle: {
                color:’blue‘;,
                opacity: 0.1,
            },
        },
},

emyly

点击echarts柱状图后，点中柱子的阴影不会消失，直到点中的下一柱子再次消失，请问该如何处理？

emyly

@emyly 你好，目前提供选中图形的方法有两种，一种是select方法，参见select文档。第二种是用on监听'click'事件，然后监测到click之后对option进行改变，参考鼠标事件。

以下提供一种select的方案，可供参考

Code Sample

``` option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [120, {value: 200,name:'data'}, 150, 80, 70, 110, 130], type: 'bar', name: 'but', selectedMode: 'single', select: { itemStyle: { shadowBlur: 30, shadowColor: 'rgba(255,0,0,0.8)' } } } ], legend: {}, tooltip: { trigger:'axis', axisPointer: { type: 'shadow', shadowStyle: { color: 'blue', opacity: 0.1 } } } }; ```

jiawulin001

@jiawulin001 我还想问下echarts柱状图，柱子太短应该怎么实现点击

emyly

有没有示例或者截图让我更快了解你的情况？

jiawulin001

像这种数据很小的柱子会有点不中的情况

emyly

可加入dataZoom选项来加入缩放功能，具体可参考文档。

Code Example

``` option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, dataZoom:[{ type:'slider' }], series: [ { data: [120, 100000, 150, 80, 70, 110, 130], type: 'bar', selectedMode: true, select:{ label:{ show:true } } } ] }; ```

jiawulin001

@emyly 另外你最初说的那个效果可以用on添加监听'click'事件实现，这里给出一个示例，具体数据可能需要你自己调。

Code Example

``` let backShadow =[ [ { name: 'Mon', x: '10%' }, { x: '21.5%' } ], [ { name: 'Tue', x: '21.5%' }, { x: '33%' } ], [ { name: 'Wed', x: '33%' }, { x: '44.5%' } ], [ { name: 'Thu', x: '44.5%' }, { x: '55.7%' } ], [ { name: 'Fri', x: '55.7%' }, { x: '67.2%' } ], [ { name: 'Sat', x: '67.2%' }, { x: '78.7%' } ], [ { name: 'Sun', x: '78.7%' }, { x: '90%' } ], ]; option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', markArea: { itemStyle: { color: 'rgba(0,0,255,0.1)' }, } } ] }; myChart.on('click',function(params){ for (let i = 0; i

jiawulin001

好的，感谢，很好的方法

emyly

[apache/echarts]<font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">柱状图点击以后，点中的柱子的影子一直不消失直到点中下根柱子再消失怎么实现？

回答