首页 > 其他分享 >echarts记录篇(二 ):使用横向柱状图实现左侧分类对齐右侧显示数据效果

echarts记录篇(二 ):使用横向柱状图实现左侧分类对齐右侧显示数据效果

时间:2023-07-23 16:56:10浏览次数:34  
标签:false show 右侧 value 柱状图 对齐 data1 echarts

一、效果图如下:

 二、直接上代码

yAxis: [
    {//左侧name分类
        inverse: true, //如果数据数组倒置排序,加上此代码
        data:categories1,
        axisLabel: {
            fontSize: 16,
            color: '#fff' 
        },
        axisLine:{  
            show:false
        },
        axisTick: {
            show: false
        },
        splitLine:{ //修改背景线条样式
            show:false 
        }
    },
    {//右侧value数值
        inverse: true, //如果数据数组倒置排序,加上此代码
        data:data1,
        axisLabel: {
            textStyle: {
                color: '#fff',
                fontSize: '16'
            },
            formatter: (value) =>{
                // console.log(data1,'data1哈哈啊');
                if(value){
                    value = (value*1).toLocaleString()
                }
                return value;
            },
        },
        axisLine:{  
            show:false
        },
        axisTick: {
            show: false
        },
        splitLine:{ //修改背景线条样式
            show:false 
        }
    }
],

 

标签:false,show,右侧,value,柱状图,对齐,data1,echarts
From: https://www.cnblogs.com/fkcqwq/p/17575220.html

相关文章

  • css基础-垂直对齐vertical-align
    什么是垂直对齐vertical-align指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。不能用它垂直对齐块无素必须是行内或者行内块元素对齐方式有哪些/*Keywordvalues*/vertical-align:baseline;vertical-align:sub;vertical-align:super;vertical-align:......
  • vue使用echarts图表,有一个组件:v-charts
    介绍在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,便可轻松生成常见的图表。是vue的charts的......
  • 柱状图-带边框柱状图
    效果图: 代码:constchart=this.refs.vChartRef.chartfunctionupOpt(){chart.setOption({tooltip:{trigger:"axis",show:true,backgroundColor:"rgba(0,0,0,0.4)",borderColor:&quo......
  • 柱状图-渐变色-竖双柱状图
    效果图: chart.setOption({tooltip:{trigger:'axis',show:true,backgroundColor:'rgba(6,19,40,0.8)',borderColor:'transparent',padding:[8,20,8,8],textStyle:{color......
  • 柱状图-横向渐变色柱状图
    效果图: chart.setOption({tooltip:{trigger:'axis',show:true,backgroundColor:'rgba(10,30,30,0.8)',borderColor:'transparent',padding:[8,20,8,8],textStyle:{c......
  • 【echarts】柱状图上方显示数值
    使用官网的例子,只不过加了itemStyle属性<!DOCTYPEhtml><head> <metacharset="utf-8"> <title>ECharts</title></head><body> <!--为ECharts准备一个具备大小(宽高)的Dom--> <divid="main"style="width......
  • python ws.alignment 连续设置对齐方式
    Python中的ws.alignment:连续设置对齐方式在Python中,ws.alignment是一个用于设置Excel表格中单元格对齐方式的功能模块。通过设置该模块,我们可以在Excel中对单元格的内部内容进行水平和垂直方向上的对齐,从而使得表格更加美观和易读。本文将介绍如何使用ws.alignment模块来实现连......
  • 要在HTML中让文字居中,可以使用CSS样式来设置文本的对齐方式
    以下是几种常见的居中文本的方法:使用text-align:center;CSS样式:这个方法适用于将文本居中对齐在其父元素内。可以将text-align:center;应用于父元素,这将使其内部的所有文本内容都居中对齐。示例代码:<style>.container{text-align:center;}</style>......
  • Tita 升级|OKR 仪表盘新增对齐率
    升级快速一览:【OKR 仪表盘】部门与人员的目标对齐率升级详情Tita-OKR和新绩效一体化管理平台数据范围所有数据范围根据右上角的筛选条件来控制:部门:根据所选部门统计部门下成员所负责的OKR情况1.仪表盘页面OKR设定中,新增【OKR人员对齐率】与【OKR部门人......
  • 代码随想录算法训练营第60天 | ● 84.柱状图中最大的矩形 - 第10章 动态规划part03
     第十章 单调栈part03有了之前单调栈的铺垫,这道题目就不难了。  ●  84.柱状图中最大的矩形   今天是训练营最后一天,恭喜坚持两个月的录友们,接下来可以写一篇自己 代码随想录一刷的总结。好好回顾一下,这两个月自己的博客内容,以及自己的收获。  ......