美文网首页
13、图表echarts 条形统计图样式修改

13、图表echarts 条形统计图样式修改

作者: 郑先森 | 来源:发表于2019-10-11 13:59 被阅读0次
    other_option = {
        color: ['#3398DB'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                type : 'false'        // 默认为直线,可选为:'line' | 'shadow'
            }
        },
        title:{
            left:'center',
            text:'其他片区排名',
            textStyle:{
                //文字颜色
                color:'#c4d9f5',
                //字体风格,'normal','italic','oblique'
                fontStyle:'normal',
                //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                fontWeight:'bold',
                fontSize:16
            }
    
    
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '4%',
            containLabel: true
        },
    
        xAxis : [
            {
                type : 'category',
                data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick: {//刻度
                    show:false,
                    alignWithLabel: true
                },
                axisLine:{show:false},
                axisLabel:{
                    show:true,
                    color:'#7b7b98',
                },
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisTick: {
                    show:false,
                    alignWithLabel: true
                },
                splitLine:{show:false},//网格线是否显示
                axisLine:{show:false},//主轴线是否显示
                axisLabel:{//轴线字体样式
                    show:true,
                    color:'#8687a3',
                },
            }
    
    
        ],
        series : [
            {
                name:'直接访问',
                type:'bar',
                barWidth: '60%',
                data:[10, 52, 200, 334, 390, 330, 220],
                label:{
                    normal:{
                        show:true,
                        position:'top',//柱状图头顶显示数据
                        color:'#027fcf'
                    }
                },
                itemStyle: {
                    normal: {
    
                        color: new echarts.graphic.LinearGradient(//柱状图颜色渐变
                            0, 0,0,1,
                            [
                                {offset: 0, color: '#58b9ed'},
                                {offset: 0.5, color: '#203dda'},
                                {offset: 1, color: '#3e28d7'}
                            ]
                        )
                    }
    
                }
            }
        ]
    };
    

    相关文章

      网友评论

          本文标题:13、图表echarts 条形统计图样式修改

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