echarts 柱状图渐变色,怎么都出不来,望大神指教一下

qq_40049863 2017-11-03 12:01:03
var myChartBar = echarts.init(document.getElementById('chart2'));
optionBar = {
title: {
x:"left",
text: '兴趣分布',
textStyle:{
fontSize:14
,fontWeight:'normal'
,color:'#565656'
}
,left:20
,top:10
},
color: ['#32A8FF'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['电子商务', '消费升级', 'o2o', '网络营销策略方案','行业报告','化妆品'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'浏览',
type:'bar',
itemStyle:{
normal:{
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#508DFF'
}, {
offset: 1,
color: '#26C5FE'
}])

}
},
data:[10, 52, 200, 334,43,87]
}
]
};
//为echarts对象加载数据
myChartBar.setOption(optionBar);
...全文
1409 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
2017-11-03
  • 打赏
  • 举报
回复 1
有效果 http://echarts.baidu.com/demo.html#bar-gradient 把你的option替换掉这个页面的内容,能看到渐变

option = {
    title: {
        x:"left",
        text: '兴趣分布',
        textStyle:{
            fontSize:14
            ,fontWeight:'normal'
            ,color:'#565656'
        }
        ,left:20
        ,top:10
    },
    color: ['#32A8FF'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器,坐标轴触发有效
            type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['电子商务', '消费升级', 'o2o', '网络营销策略方案','行业报告','化妆品'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'浏览',
            type:'bar',
            itemStyle:{
                normal:{
                    //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ 
                        offset: 0,
                        color: '#508DFF'
                    }, {
                        offset: 1,
                        color: '#26C5FE'
                    }])

                }
            },
            data:[10, 52, 200, 334,43,87]
        }
    ]
};

87,904

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧