Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

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

stevobm opened this issue Sep 1, 2016 · 2 comments

Comments

@stevobm
Copy link

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
Copy link
Contributor

pissang commented Sep 2, 2016

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

@stevobm
Copy link
Author

stevobm commented Nov 8, 2016

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

@100pah 100pah closed this as completed in 49b099f Nov 8, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants