Echarts图表柱状图基本用法（横向、纵向、柱宽度、圆角、图表渐变色、图表滚动条、图例样式等）

效果图：

JS:

function chart(){
        var chartDom = document.getElementById('这里写div的id名称');
        var myChart = echarts.init(chartDom);
        var option;
        myChart.clear();//图表清除，用于更新数据重新加载图表

        option = {
            //编辑图表整体布局宽、高等等
            grid:{
                top:'20%',
                left:'20%',
                bottom:'20%',
            },
            //鼠标移入图表出现的提示框
            tooltip: {
                trigger: 'axis',
            },
            //图例
            legend: {
                top:'5%',//图例距离顶部的位置
                right:'15%',//图例距离左侧的位置
                icon: 'circle',//图例图标样式为圆形
                textStyle:{
                    color:'#FFFFFF',//图例字体颜色
                },
            },
            //设置滚动条参数
            dataZoom: [
                {
                    type: 'inside',//inside属性为内置滚动条不会出现滚动条样式，鼠标直接拖动图表实现滚动样式，需要搭配start和end参数
                    start: 0 ,//所显示图表的开始位置
                    end: 100 ,//所显示图表的结束位置位置
                    //这里开始位置为0结束位置为100意思就是图表整体都显示所以不会出现滚动条，如何设置start：0；end：50；此时图表所显示的内容只有百分之50所以会显示滚动条（鼠标可以拖动图表滚动）
                }
            ],
            //设置X轴参数
            xAxis: [
                {
                    type: 'value',//横向滚动条X轴为值所以类型为value（同理如果为纵向滚动条这里为category，也就是说设置纵向滚动条时此参数与yAxis中的参数对调即可）
                    axisLabel:{
                        color:'#FFFFFF',//X轴上字体颜色（值的字体颜色）
                    },
                    splitLine:{
                        lineStyle: {
                            color:'#999999',//X轴上刻度线的颜色（不包括X轴本身样式，具体可以参考官方文档）
                        },
                    },
                }
            ],
            //设置Y轴参数
            yAxis: [
                {
                    type: 'category',//横向滚动条Y轴为类目所以此参数为category（同理如果为纵向滚动条这里为value）
                    name: '（单位：个）',//显示在Y轴上方的文字（可以是单位说明）
                    nameTextStyle:{
                        color:"#EEEEEE",//显示在Y轴上方的文字的字体样式
                    },
                    data: ['本月金额', '本年累计金额', '上年同期累计'],//Y轴需要显示的类目名称
                    axisLabel:{
                        color:'#FFFFFF',,//Y轴上字体颜色
                    },

                    axisPointer: {
                        type: 'shadow',//鼠标移入图表后Y轴的提示效果样式，可以删除看一下效果
                    }
                }
            ],
            series: [
                {
                    //柱1（类型一）
                    name: '主营业务收入',//柱状图统计类的名称
                    type: 'bar',//类型为柱形
                    yAxisIndex: 0,//所使用的Y轴（这个参数只在使用多个Y轴时会用到，比如折柱混合图，柱状图使用第一个Y轴也就是0，折线图使用第二个Y轴也就是1 以此类推）
                    barWidth:15,//设置柱的宽度
                    stack: 'total',//柱状图堆叠效果（如何使用堆叠那以下所有的柱都需要对应设置为堆叠）
                    label: {
                        //柱中显示值
                        show: true,
                        color:'#000000',//字体颜色
                        textBorderType:'solid',//字体边框类型
                        textBorderWidth:2,//字体边框宽度
                        textBorderColor:'#FFFFFF',//字体边框颜色
                    },
                    //设置柱的参数
                    itemStyle:{
                        //设置柱颜色为渐变色
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0,/*设置渐变颜色角度比如从上到下渐变或者从左往右渐变，自行调整*/ [{offset: 0, color: '#6DD400'},{offset: 1,color: '#44D7B6'}]),
                        borderRadius:[6,6,6,6],//柱设置为圆角
                    },
                    //当前柱在鼠标移入图表时提示框所显示的内容
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + '/千万元';
                        }
                    },
                    data: [56.0, 24.9, 22.22,],//此类型柱的值因为有三个类目所以是三个值以此类推
                },
                {
                    //柱2（类型二）
                    name: '其他业务收入',//柱状图统计类的名称
                    type: 'bar',//类型为柱形（如果参数为line此时图表为折柱混合图）
                    yAxisIndex: 0,
                    barWidth:15,
                    stack: 'total',
                    label: {
                        show: true,
                        color:'#000000',
                        textBorderType:'solid',
                        textBorderWidth:2,
                        textBorderColor:'#FFFFFF',
                    },
                    itemStyle:{
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0, color: '#009CD7'},{offset: 1,color: '#17EAFE'}]),
                        borderRadius:[6,6,6,6],
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + '/千万元';
                        }
                    },
                    data: [56.0, 24.9, 22.22,]
                },
            ]
        };
        option && myChart.setOption(option);

    }

纵向效果图：

参数对调即可：

原文地址：https://blog.csdn.net/qq_45609680/article/details/142957863

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！