柱状图设置渐变色时鼠标提示中的小圆点无法显示 #3994

Closed
stevobm opened this Issue Sep 1, 2016 · 2 comments

Comments

Projects
None yet
2 participants
@stevobm

stevobm commented Sep 1, 2016

问题简述 (One-line summary)

柱状图设置渐变色时提示框中的小圆点无法显示

版本及环境 (Version & Environment)

  • ECharts 版本 (ECharts version):3.2.3
  • 浏览器类型和版本 (Browser version):Chrome 48.0.2547.0
  • 操作系统类型和版本 (OS Version):Windows 7 64bit

重现步骤 (Steps to reproduce)

1.设置option中的itemStyle为渐变色
2.移上鼠标,提示框中的小圆点消失

期望结果 (Expected behaviour)

柱状图设置渐变色时提示框中的小圆点也呈现为渐变色,或者能够提供单独指定小圆点样式的api

可能哪里有问题 (What went wrong)

柱状图颜色设置选项与提示框(tooltip)的颜色设置选项正好都是itemStyle,没有像折线图(颜色设置选项是lineStyle)那样错开,因此只能一起设置。当柱状图设置渐变时,提示框却并不支持,因此出现无法显示的情况。

ECharts配置项 (ECharts option)

option = {
    color: ['#3398DB'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器,坐标轴触发有效
            type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    itemStyle:{
        normal: {
            color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgb(141,181,96)',
            }, {
                offset: 1,
                color: 'rgb(45,170,197)',
            }]),
            opacity: 0.8
        }
    },
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'直接访问',
            type:'bar',
            barWidth: '60%',
            data:[10, 52, 200, 334, 390, 330, 220]
        }
    ]
};

其他信息 (Other comments)

bug

@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang Sep 2, 2016

Contributor

嗯,小圆点是用 dom 画的,暂时不支持渐变色

Contributor

pissang commented Sep 2, 2016

嗯,小圆点是用 dom 画的,暂时不支持渐变色

@pissang pissang added the enhancement label Sep 2, 2016

@stevobm

This comment has been minimized.

Show comment
Hide comment
@stevobm

stevobm Nov 8, 2016

小圆点没必要画成渐变的,只需要取柱状图渐变色的底部颜色进行绘制即可(像渐变折线图那样),因为这总比现在完全显示不出来好。

stevobm commented Nov 8, 2016

小圆点没必要画成渐变的,只需要取柱状图渐变色的底部颜色进行绘制即可(像渐变折线图那样),因为这总比现在完全显示不出来好。

@100pah 100pah closed this in 49b099f Nov 8, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment