echarts柱状图详解

在这里插入图片描述
在这里插入图片描述

getLchart(){
          var profitData = [100,200,300,400,500]

          var option12 = {
              //鼠标悬浮提示框
              tooltip: {
                  trigger: 'axis',
                      formatter: function (datas) {
                          var res = datas[0].name + ":" + datas[0].value + "%"
                          return res
                      }
              },
              xAxis: {
                  type: 'category',
                  data: ['保洁', '维修', '搬家','保姆','母婴'],
                  //轴坐标名称(x,y轴通用)
                  name:'种类', 
                  //坐标轴名称样式(x,y轴通用)
                  nameTextStyle:{             
                      color:"#ffffff",
                      //坐标轴名称相对位置
                      padding:[5,0,0,5],  
                  },
                  //改变坐标轴字体颜色和大小(x,y轴通用)
                  axisLabel: {
                      textStyle: {
                          color: '#6E88C9',
                          fontSize: '11'
                      }
                  },
                  //坐标轴横线样式(x,y轴通用)
                  axisLine: {
                      lineStyle: {
                          color: '#6E88C9',
                      }
                  },
              },
              yAxis: {
                type: 'value',
                name: "利润占比",
                nameTextStyle:{
                    color:'#F7F7F7',
                    fontSize:11,
                    align:'left'
                },
                axisLine: {
                    onZero:false,
                    lineStyle: {
                        color: '#6E88C9' ,
                    }
                },
                //背景网格横线
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#20273A' ,
                    }
                },
                axisLabel: {
                  formatter: '{value} %',
                  color: '#6E88C9'
                }
              },
              series: [{
                    itemStyle:{
                        normal:{
                            //对应柱状条颜色
                            color: function(params) {
                                //只有一个值就是每个柱状条都是该颜色;多个值就和每个柱状条一一对应
                                var colorList = [
                                '#6E88C9',
                                ];
                                return colorList[params.dataIndex]
                            },
                            //显示对应柱状条数据
                            //label: {
                            //    //具体值
                            //    formatter:function (value) {
                            //        return value.value + '%'
                            //    },
                            //    show: true, //开启显示
                            //    position: 'right', //在上方显示
                            //    textStyle: { //数值样式
                            //        color: '#10DFE9',
                            //        fontSize: 12
                            //    }
                            //}
                        },
                    },
                    //柱状图的真实数据,是一个数组
                    data: profitData,
                    //柱状条颜色
                    barWidth: "40%",
                    type: 'bar',
              },]
          };
          //true,是清除上一个echart的缓存
          myChart9.setOption(option12,true);
        },
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts柱状图中,可以使用属性position来设置数据的展示位置。具体参数设置如下: 1. position:"inside",将数据自适应在柱状图的中间位置。 2. position:"top", "bottom", "left", "right",将数据设置在柱形图的外部的上、下、左、右位置。 3. position: "insideTop", "insideBottom", "insideLeft", "insideRight",将数据设置在柱形图的内部的上、下、左、右位置。 4. position: (x, y),这里的x, y是相对柱形图的原点坐标来定位的,也就是每条柱状图的底部的中心点坐标。可以使用两种形式: - 绝对像素值,例如:position: (10, 10)。 - 相对于柱形图的百分比,例如:position: (20%, 30%)。 另外,在自定义柱子的颜色方面,可以在series中配置itemStyle来实现。可以根据数据的不同值来分别定义柱子的颜色,例如: - 当数据值大于等于6000时,使用绿色。 - 当数据值小于6000且大于等于4000时,使用黄色。 - 其他情况下使用红色。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [echarts 柱状图渐变色背景](https://download.csdn.net/download/qq_36437172/12418565)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [echarts 柱形图数据位置显示](https://blog.csdn.net/lucky569/article/details/104939543)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [echarts 柱状图 详解与使用集合](https://blog.csdn.net/happy81997/article/details/109158824)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值