echart3 柱状图 渐变 #3065

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

Comments

Projects
None yet
2 participants
@czwanmmwhh

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

This comment has been minimized.

Show comment
Hide comment
@czwanmmwhh

czwanmmwhh 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);
});

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