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

echart3 柱状图 渐变 #3065

Closed
czwanmmwhh opened this issue Apr 25, 2016 · 1 comment
Closed

echart3 柱状图 渐变 #3065

czwanmmwhh opened this issue Apr 25, 2016 · 1 comment
Labels
Milestone

Comments

@czwanmmwhh
Copy link

czwanmmwhh commented Apr 25, 2016

 var color = new echarts.graphic.LinearGradient(-1,0,2,0,[{
            offset:0,
            color:'red'
        },{
            offset:0.5,
            color:'yellow'
        },{
            offset:1,
            color:'red'
        }]
    );

var option = {
    color : [color]
}

在柱状图中初始化时是有渐变的 但是鼠标移入后渐变就有问题了

@czwanmmwhh
Copy link
Author

czwanmmwhh commented Apr 25, 2016

完整代码:

var option = {
    title: {
        text: '深圳月最低生活费组成(单位:元)',
        subtext: 'From ExcelHome',
        sublink: 'http://e.weibo.com/1341556070/AjQH99che'
    },
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器,坐标轴触发有效
            type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
        },
        formatter: function (params) {
            var tar = params[0];
            return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type : 'category',
        splitLine: {show:false},
        data : ['总费用','房租','水电费','交通费','伙食费','日用品数']
    },
    yAxis: {
        type : 'value'
    }
};

this.echarts(function(ec){
    ec.setOption(option);
    // var canvas = ec.getRenderedCanvas();
    // var ctx = canvas.getContext('2d');
    ec.on('mouseover',function(o){
        console.log(o.color);
        utils.stopBubble(o.event.event);
    })
    var color = new echarts.graphic.LinearGradient(-1,0,2,0,[{
            offset:0,
            color:'red'
        },{
            offset:0.5,
            color:'yellow'
        },{
            offset:1,
            color:'red'
        }]
    );
    console.log(color)
    var cg = color.canvasGradient;
    console.log(ec)
    var series = {
        color : [color],
        series: [
        {
            name: '辅助',
            type: 'bar',
            stack:  '总量',
            data: [0, 1700, 1400, 1200, 300, 0]
        },
        {
            name: '生活费',
            type: 'bar',
            stack: '总量',
            legendHoverLink : true,
            label: {
                normal: {
                    show: true,
                    position: 'inside'
                }
            },
            data:[2900, 1200, 300, 200, 900, 300]
        }
    ]};
    // var grad  = ctx.createLinearGradient(0,100,140,0);
    // grad.addColorStop(0,'rgb(192, 80, 77)');    // 红
    // grad.addColorStop(0.5,'rgb(155, 187, 89)'); // 绿
    // grad.addColorStop(1,'rgb(128, 100, 162)');
    ec.setOption(series);
});

@pissang pissang added the bug label Apr 29, 2016
@pissang pissang added this to the 3.1.8 milestone Apr 29, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants