美文网首页
echarts柱形图legend设置每个柱子颜色

echarts柱形图legend设置每个柱子颜色

作者: 韩小强 | 来源:发表于2018-01-10 15:09 被阅读0次

    设置每个柱子对应一个图标。legend对应每个series 的name来设置。所以要定义多组

     option = {
        legend: {  // 对应series的name
            data:['直接访问','邮件营销','联盟广告','视频广告'']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
         tooltip : {
            //trigger: 'axis',    //显示其他分类
            axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
            }
        },
        xAxis : [
            {
                type : 'category',
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'直接访问',
                stack: '广告',  //设置分类,同一类合并,多个series数据成一个柱
                type:'bar',
                itemStyle: {   //配置样式,设置每个柱子的颜色
                   normal:{  
                      color: function (params){
                      var colorList = ['#f54882','#47d1de','#8058bd','#ffd84f'];
                       return colorList[params.dataIndex];
                   }
             },
                data:[320]
            },
            {
                name:'邮件营销',
                type:'bar',
                stack: '广告',
                data:[0, 132]
            },
            {
                name:'联盟广告',
                type:'bar',
                stack: '广告',
                data:[0, 0, 191,]
            },
            {
                name:'视频广告',
                type:'bar',
                stack: '广告',
                data:[0, 0, 0, 154]
            },
        ]
    };
    

    相关文章

      网友评论

          本文标题:echarts柱形图legend设置每个柱子颜色

          本文链接:https://www.haomeiwen.com/subject/fbeonxtx.html