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

feat: add border style for legend item #7340

Closed
chengwb53 opened this issue Dec 21, 2017 · 2 comments · Fixed by OpenTMI/opentmi-default-gui#32 or DeviaVir/zenbot#2011 · May be fixed by dyna-dot/iClient-JavaScript-s#1
Closed

feat: add border style for legend item #7340

chengwb53 opened this issue Dec 21, 2017 · 2 comments · Fixed by OpenTMI/opentmi-default-gui#32 or DeviaVir/zenbot#2011 · May be fixed by dyna-dot/iClient-JavaScript-s#1
Labels
en This issue is in English enhancement topic: legend
Milestone

Comments

@chengwb53
Copy link

chengwb53 commented Dec 21, 2017

One-line summary [问题简述]

When fill color is transparent with border for a bar series, the rectangle in the legend is transparent without border, so it's almost invisible.

So legend should add border width and border color of the series.

Version & Environment [版本及环境]

  • ECharts version [ECharts 版本]:3.8
  • Browser version [浏览器类型和版本]:chrome
  • OS Version [操作系统类型和版本]:win10

Expected behaviour [期望结果]

Legend style have the same border style as series.

ECharts option [ECharts配置项]

option = {
    color: ['#3398DB'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器,坐标轴触发有效
            type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
        }
    },
    legend: {
        data: ['直接访问', '间接访问']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'间接访问',
            type:'bar',
            barWidth: '30%',
            data:[10, 52, 200, 334, 390, 330, 220],
            stack: ['直接访问'],
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: 'blue',
                    borderColor: 'blue'
                }
            }
        },
        {
            name:'直接访问',
            type:'bar',
            barWidth: '30%',
            data:[10, 52, 200, 334, 390, 330, 220],
            itemStyle: {
                normal: {
                    borderColor: 'red',
                    borderWidth: 2,
                    color: 'rgba(0,0,0,0)'
                }
            },
            stack: ['直接访问']
        },
    ]
};

Other comments [其他信息]

image

@songxiulin2011
Copy link

songxiulin2011 commented Nov 2, 2018

Same problem here.

@100pah
Copy link
Member

100pah commented Nov 4, 2018

A itemStyle option should be added to legend option, similar to series.itemStyle. It should take borderColor, borderWidth, borderType from series by default, and can be overwritten by legend.itemStyle.

@100pah 100pah added this to the 4.3.0 milestone Jan 29, 2019
@Ovilia Ovilia self-assigned this Mar 4, 2019
@Ovilia Ovilia changed the title 柱状图设置item颜色为透明时,legend看不出来 feat: add border style for legend item Mar 6, 2019
@Ovilia Ovilia added en This issue is in English topic: legend labels Mar 6, 2019
@Ovilia Ovilia modified the milestones: 4.3.0, 4.3.1 Mar 12, 2019
@Ovilia Ovilia removed their assignment Aug 27, 2019
@Ovilia Ovilia modified the milestones: 4.3.1, 4.4.0 Aug 27, 2019
yufeng04 pushed a commit to yufeng04/incubator-echarts that referenced this issue Sep 20, 2019
yufeng04 pushed a commit to yufeng04/incubator-echarts that referenced this issue Sep 20, 2019
yufeng04 pushed a commit to yufeng04/incubator-echarts that referenced this issue Sep 20, 2019
yufeng04 pushed a commit to yufeng04/incubator-echarts that referenced this issue Sep 23, 2019
100pah added a commit that referenced this issue Sep 23, 2019
Feature #7340. Add the itemStyle to legend
@pissang pissang closed this as completed Sep 24, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment