1.ECharts柱状图(横向+双Y轴)-部分配置项

最新推荐文章于 2023-09-15 20:09:42 发布

weixin_46917162

最新推荐文章于 2023-09-15 20:09:42 发布

阅读量3.4k

点赞数

分类专栏： EChart的使用

本文链接：https://blog.csdn.net/weixin_46917162/article/details/119844275

版权

EChart的使用专栏收录该内容

4 篇文章 1 订阅

订阅专栏

本文详细介绍了如何使用ECharts库创建带有自定义提示信息的横向柱状图，并配置了双Y轴图例，包括轴标签、网格线、图例样式等。通过实例演示了option配置的各个方面，适合ECharts初学者和进阶者参考。

摘要由CSDN通过智能技术生成

1.横向柱状图+自定义提示信息

1.1效果图:

2.option的配置:

var option1 = {
                //提示框，默认显示
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {// 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'// 默认为直线，可选为：'line' | 'shadow'
                    },
                    // 控制提示格式
                    formatter: function(param){
                        return `${param[0].axisValue}: <br/>${param[0].value}人`
                    }
                },
                //控制直角坐标系与容器上下左右的距离
                grid: {
                    left: '2%',
                    right: '12%',
                    bottom: '0',
                    top: '4%',
                    containLabel: true,//gid区域是否包含坐标轴的刻度标签。
                },
                // x轴（指的是水平的那条线）相关配置
                xAxis: [
                    {
                        type: 'value',//x轴数据类型，value时就是值，category时就是分类，可用于区分y轴与x轴
                        axisLabel: {    // 坐标轴标签
                            show: true,  // 是否显示
                            // inside: true, // 标签是否朝内,默认false
                            interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
                            rotate: 0, // 旋转角度
                            margin: 5, // 刻度标签与轴线之间的距离
                            color: '#000',  // 标签颜色默认取轴线的颜色 
                            fontSize: 12//标签字号
                        },
                        splitLine: {    // 网格线
                            show: false  // 是否显示，默认为true
                        },
                        axisLine: {    // 坐标轴 轴线
                            show: true,  // 是否显示,默认false
                            lineStyle: {
                            // color: '#FFFFFF',//轴线颜色
                            width: 1,//轴线宽度
                            type: 'solid'//轴线类型
                            }
                        },
                    }
                ],
                // y轴（垂直的那条线）设置
                yAxis: [
                    {
                        type: 'category',
                        data: ['棒球','羽毛球','足球','网球','篮球','乒乓球'],//类目轴数据
                        axisLabel: {    // 坐标轴标签
                            show: true,  // 是否显示
                            inside: false, // 是否朝内
                            color: '#000',
                            fontSize: 12
                        },
                        splitLine: {    // 网格线
                            show: false  // 是否显示，默认为false
                        },
                        axisLine: {    // 坐标轴 轴线
                            show: true,  // 是否显示
                            lineStyle: {
                            // color: '#FFFFFF',
                            width: 1,
                            type: 'solid'
                            }
                        },
                        boundaryGap: true,//显示刻度，默认为 true,只是作为分隔线，标签和数据点都会在两个刻度之间的带中间
                        axisTick: {//坐标轴刻度相关
                            alignWithLabel: true,//类目轴中在`boundaryGap`为`true`的时候有效，可以保证刻度线和标签对齐
                        },
                        inverse:true,//翻转y轴数据
                    }
                ],
                series: [
                    {
                        name: '直接访问',
                        type: 'bar',//表明柱状体，饼图是pie，折线图是line
                        barWidth: 10,//柱子宽度
                        data: [10,50,30,26,17,47],//值数据，与类型数据一一对应
                        itemStyle: {
                            // emphasis: {
                            //     barBorderRadius: 7,
                            // },
                            normal: {//柱子相关设置
                                barBorderRadius: [0,7,7,0],//设置柱子圆角;左上-右上-右下-左下
                                label: {//柱子标签相关
                                    show: true,
                                    position: 'right',//柱子标签位置
                                    textStyle: {//柱子标签文本设置
                                        color: '#000',
                                        fontSize: 12
                                    },
                                },
                                color: new echarts.graphic.LinearGradient(//柱子加渐变色
                                    0, 0, 1, 0,
                                    [
                                        {offset: 0, color: '#F9456D'},//柱图渐变色
                                        // {offset: 0.5, color: '#44C0C1'},//柱图渐变色
                                        {offset: 1, color: '#FDEEB0'},//柱图渐变色
                                    ]
                                )
                            },
                        }
                    }
                ],
            };

2.双Y轴+图例

2.1效果图:

2.2option的配置:

var option1 = {
                //提示框，默认显示
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {// 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'// 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                //控制直角坐标系与容器上下左右的距离
                grid: {
                    left: '2%',
                    right: '2%',
                    bottom: '15%',
                    top: '14%',
                    containLabel: true,//gid区域是否包含坐标轴的刻度标签。
                },
                //图例相关
                legend: {
                    top:'90%',
                    left:'center',
                    data:['喜爱人数','实际运动人数'],//与series两个对象中的name对应
                    itemGap: 15, // 图例间隔
                    itemWidth: 8, //图例大小(小方块)
                    itemHeight: 8, //图例大小
                    orient: 'vertical',// horizontal   vertical
                    icon: "rectangle", //图例的形状
                    textStyle: { //图例文字的样式
                        color: '#000',
                        fontSize: 12
                    },
                },
                // x轴（指的是水平的那条线）相关配置
                xAxis: [
                    {
                        type: 'category',
                        data: ['棒球','羽毛球','足球','网球','篮球','乒乓球'],//类目轴数据
                        axisLabel: {    // 坐标轴标签
                            show: true,  // 是否显示
                            inside: false, // 是否朝内
                            color: '#000',
                            fontSize: 12,
                            interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
                        },
                        splitLine: {    // 网格线
                            show: false  // 是否显示，默认为false
                        },
                        axisLine: {    // 坐标轴 轴线
                            show: true,  // 是否显示
                            lineStyle: {
                            // color: '#FFFFFF',
                            width: 1,
                            type: 'solid'
                            }
                        },
                        boundaryGap: 'true',//显示刻度，默认为 true,只是作为分隔线，标签和数据点都会在两个刻度之间的带中间
                        axisTick: {//坐标轴刻度相关
                            alignWithLabel: true,//类目轴中在`boundaryGap`为`true`的时候有效，可以保证刻度线和标签对齐
                        },
                        inverse:true,//翻转y轴数据
                    }
                ],
                // y轴（垂直的那条线）设置
                yAxis: [
                    {
                        type: 'value',//x轴数据类型，value时就是值，category时就是分类，可用于区分y轴与x轴
                        axisLabel: {    // 坐标轴标签
                            show: true,  // 是否显示
                            // inside: true, // 标签是否朝内,默认false
                            // interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
                            rotate: 0, // 旋转角度
                            margin: 5, // 刻度标签与轴线之间的距离
                            color: '#000',  // 标签颜色默认取轴线的颜色 
                            fontSize: 12//标签字号
                        },
                        splitLine: {    // 网格线
                            show: false  // 是否显示，默认为true
                        },
                        axisLine: {    // 坐标轴 轴线
                            show: true,  // 是否显示,默认false
                            lineStyle: {
                            // color: '#FFFFFF',//轴线颜色
                            width: 1,//轴线宽度
                            type: 'solid'//轴线类型
                            }
                        },
                    },
                    {
                        type: 'value',//x轴数据类型，value时就是值，category时就是分类，可用于区分y轴与x轴
                        axisLabel: {    // 坐标轴标签
                            show: true,  // 是否显示
                            // inside: true, // 标签是否朝内,默认false
                            // interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
                            rotate: 0, // 旋转角度
                            margin: 5, // 刻度标签与轴线之间的距离
                            color: '#000',  // 标签颜色默认取轴线的颜色 
                            fontSize: 12//标签字号
                        },
                        splitLine: {    // 网格线
                            show: false  // 是否显示，默认为true
                        },
                        axisLine: {    // 坐标轴 轴线
                            show: true,  // 是否显示,默认false
                            lineStyle: {
                            // color: '#FFFFFF',//轴线颜色
                            width: 1,//轴线宽度
                            type: 'solid'//轴线类型
                            }
                        },
                    }
                ],
                series: [
                    {
                        name: '喜爱人数',
                        type: 'bar',//表明柱状体，饼图是pie，折线图是line
                        barWidth: 10,//柱子宽度
                        data: [10,50,30,26,17,47],//值数据，与类型数据一一对应
                        yAxisIndex: 0,//数据的刻度对应左边
                        itemStyle: {
                            // emphasis: {
                            //     barBorderRadius: 7,
                            // },
                            normal: {//柱子相关设置
                                // barBorderRadius: [7,7,0,0],//设置柱子圆角;左上-右上-右下-左下
                                color: '#F9456D'
                            },
                        }
                    },
                    {
                        name: '实际运动人数',
                        type: 'bar',//表明柱状体，饼图是pie，折线图是line
                        barWidth: 10,//柱子宽度
                        data: [18,30,20,40,27,17],//值数据，与类型数据一一对应
                        yAxisIndex: 1,//数据的刻度对应右边
                        itemStyle: {
                            // emphasis: {
                            //     barBorderRadius: 7,
                            // },
                            normal: {//柱子相关设置
                                color: '#497EF2'
                            },
                        }
                    }
                ],
            };