echarts柱状图基本属性。

最新推荐文章于 2024-09-04 11:09:14 发布

先生抽烟吗

最新推荐文章于 2024-09-04 11:09:14 发布

阅读量492

点赞数

分类专栏： java idea

本文链接：https://blog.csdn.net/qq_41417259/article/details/118250912

版权

java 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

idea

1 篇文章 0 订阅

订阅专栏

X轴线颜色

    var barwidth = 32;// 柱状图宽度
    var radius =[4, 4, 0, 0];//柱状图圆角
    return {
        title: {
                textStyle: {
                fontWeight: 'normal',      
                color: '#fff' // 标题颜色
            },
            
        },
        tooltip: {},
        legend: {
            data:[data.series[0].name,data.series[1].name,data.series[2].name],//legend标题
            textStyle:{
                fontSize:16, // legend标题字体大小
                color:'#fff' //legend标题字体颜色
            }
        },
        xAxis: [//X轴（横轴）
            {
                data: data.categories,
                axisLine: { //x轴线的颜色以及宽度
                    show: true,
                    lineStyle: {
                        color: "#ffff", //x轴线的颜色
                        width: 2, //x轴线的宽度
                        type: "solid"
                    },
                    textStyle: {
                        fontSize:14,//x轴字体大小
                        color: '#fff'//字体颜色
                    }
                }
            }
        ],
        yAxis: [//Y轴线
            {
                type: 'value',
                scale: true,
                name: '分',//轴线名称（单位）
                axisLine: {//左边Y轴线的颜色以及宽度
                    show: true,
                    lineStyle: {
                        color: "#ffff",
                        width: 2,
                        type: "solid"
                    }
                },
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 14 //纵坐标单位字体大小
                },
                max: 100, //最大刻度
                min: 0, //最小刻度
                axisLabel: {
                    show: true,
                    textStyle: {
                        fontSize:14,//左边纵坐标字体大小
                        color: '#fff'
                    }
                },
                splitLine:{
            　　　　show:false
            　　},
                boundaryGap: [0.2, 0.2]
            },
            {
                type: 'value',
                scale: true,
                axisLine: {//右边Y轴线的颜色以及宽度
                    show: true,
                    lineStyle: {
                        color: "#ffff",
                        width: 2,
                        type: "solid"
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        fontSize:14,//右边纵坐标字体大小
                        color: '#fff'
                    }
                },
                splitLine:{
            　　　　show:false
            　　},
                boundaryGap: [0.2, 0.2]
            }
        ],
        series: [ //数据
            {
                name: data.series[0].name, //数据名称
                showBackground: true, 
                label:  //图上的字体颜色，位置，字体大小
                {
                    show: true,
                    position: 'top',
                    fontSize:14,
                    color: '#ffffff'
                },
                barWidth: barwidth, //柱状图宽度
                itemStyle: //柱状图要是渐变
                 {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: 'rgba(0, 206, 209, 1)'},
                                {offset: 0.5, color: 'rgba(0, 206, 209, 1)'},
                                {offset: 1, color: 'rgba(51, 187, 255, 0)'}
                            ]
                        ),
                        barBorderRadius: radius  //柱状图圆角
                    }
                },
                type: 'bar', //图类型，柱状图bar，折线图：line
                data: data.series[0].data  //数据
            },
            {
                name: data.series[1].name,
                showBackground: true,
                label: {
                    show: true,
                    position: 'top',
                    fontSize:14,
                    color: '#ffffff'
                },
                barWidth: barwidth,
                itemStyle: {
                    normal: {
                        //柱形图圆角，初始化效果
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#88cc66'},
                                {offset: 0.5, color: '#88cc66'},
                                {offset: 1, color: 'rgba(51, 187, 255, 0)'}
                            ]
                        ),
                        barBorderRadius: radius
                    },
                },
                type: 'bar',
                data: data.series[1].data
            },
            {
                name: data.series[2].name,
                type: 'line',
                itemStyle: {color: 'rgba(242, 214, 58, 1)',},
                yAxisIndex: 1,
                smooth: true,
                data: data.series[2].data
            }

        ]
    };