Echarts 柱状图显示百分比

news2024/9/20 18:35:45

以下是生成的 option 

option = {
  yAxis: { name: '金额(元)', type: 'value' },
  xAxis: { type: 'category' },
  legend: {},
  series: [
    {
      stack: 'x',
      name: '早餐',
      label: {
        normal: {
          show: true,
          position: 'insideRight',
          // 格式化显示
          formatter: function (params) {
            let aa = params.seriesName + 'per';
            return params.data[aa];
          }
        }
      },
      type: 'bar'
    },
    {
      stack: 'x',
      name: '午餐',
      label: {
        normal: {
          show: true,
          position: 'insideRight',
          formatter: function (params) {
            let aa = params.seriesName + 'per';
            return params.data[aa];
          }
        }
      },
      type: 'bar'
    },
    {
      stack: 'x',
      name: '晚餐',
      label: {
        normal: {
          show: true,
          position: 'insideRight',
          formatter: function (params) {
            let aa = params.seriesName + 'per';
            return params.data[aa];
          }
        }
      },
      type: 'bar'
    }
  ],
  tooltip: {},
  title: { text: '每月销售数据' },
  // 使用数据集设置数据
  dataset: {
    source: [
      {
        product: '01',
        晚餐per: '20.64%',
        午餐: 88752.57,
        早餐per: '0.07%',
        晚餐: 23098.21,
        早餐: 73.0,
        午餐per: '79.30%'
      },
      {
        product: '02',
        晚餐per: '24.45%',
        午餐: 121701.86,
        早餐per: '0.31%',
        晚餐: 39547.61,
        早餐: 504.02,
        午餐per: '75.24%'
      },
      {
        product: '03',
        晚餐per: '29.46%',
        午餐: 159766.78,
        早餐per: '0.26%',
        晚餐: 66962.8,
        早餐: 590.0,
        午餐per: '70.28%'
      },
      {
        product: '04',
        晚餐per: '27.38%',
        午餐: 148685.83,
        早餐per: '0.07%',
        晚餐: 56110.05,
        早餐: 149.15,
        午餐per: '72.55%'
      },
      {
        product: '05',
        晚餐per: '25.80%',
        午餐: 160834.78,
        早餐per: '0.57%',
        晚餐: 56350.46,
        早餐: 1236.01,
        午餐per: '73.64%'
      },
      {
        product: '06',
        晚餐per: '23.86%',
        午餐: 158644.58,
        早餐per: '0.00%',
        晚餐: 49719.0,
        早餐: 0.5,
        午餐per: '76.14%'
      },
      {
        product: '07',
        晚餐per: '19.59%',
        午餐: 82146.2,
        早餐per: '0.07%',
        晚餐: 20031.44,
        早餐: 74.0,
        午餐per: '80.34%'
      },
      {
        product: '08',
        晚餐per: '0%',
        午餐: '0.00',
        早餐per: '0%',
        晚餐: '0.00',
        早餐: '0.00',
        午餐per: '0%'
      },
      {
        product: '09',
        晚餐per: '0%',
        午餐: '0.00',
        早餐per: '0%',
        晚餐: '0.00',
        早餐: '0.00',
        午餐per: '0%'
      },
      {
        product: '10',
        晚餐per: '0%',
        午餐: '0.00',
        早餐per: '0%',
        晚餐: '0.00',
        早餐: '0.00',
        午餐per: '0%'
      },
      {
        product: '11',
        晚餐per: '0%',
        午餐: '0.00',
        早餐per: '0%',
        晚餐: '0.00',
        早餐: '0.00',
        午餐per: '0%'
      },
      {
        product: '12',
        晚餐per: '0%',
        午餐: '0.00',
        早餐per: '0%',
        晚餐: '0.00',
        早餐: '0.00',
        午餐per: '0%'
      }
    ],
    dimensions: ['product', '早餐', '午餐', '晚餐']
  }
};

生成的柱状图如下

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/802367.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

清楚知道谁在划水?伙伴云一招搞定任务交办

伙伴云任务交办让每个职场人都拥有专属的事务汇集地, 让老板一张图把控全局,运筹帷幄, 让员工每天的工作井然有序,让每件事的进展都有始有终、形成闭环。一起来看看吧! 01企业内部任务管理的重要性 对于一家公司或一…

Java泛型的简单认识

泛型的认识 自定义泛型,定义了String类型,随后这个泛型就是String类型 于是他的方法都是字符串的类型 泛型接口 泛型方法 所有车可以进行比赛,定义了一个BMW和BENZ两个车类,都继承car,当使用泛型的 如果你顶一个狗对象…

Centos7 安装tomcat9

去官网下载 数据包 ps: wget https://dlcdn.apache.org/tomcat/tomcat-9/v9.0.78/bin/apache-tomcat-9.0.78.tar.gz检查Java环境 [tomcatlocalhost bin]$ java -version java version "1.8.0_121" Java(TM) SE Runtime Environment (build 1.8.0_121-b13) Java H…

品牌渠道治理的有效方法

什么是品牌渠道,即品牌的销售渠道,围绕销售渠道做的治理工作,根本上是对低价、窜货的治理,当渠道中存在低价问题,那不管是对经销商还是非授权店铺,都会有不好的影响,经销商会跟价,非…

派森编程软件python好学吗,派森语言python干什么的

大家好,小编来为大家解答以下问题,派森编程软件python有什么用,派森编程软件python好学吗,现在让我们一起来看看吧! 1、python真的值得学吗? 不建议学python的原因: 1、语言性能差 对于C老手…

ACL访问控制列表(红茶三杯CCNA)

ACL的两大主要功能: 1. 流量控制 2. 匹配感兴趣流量ACL分为两类 Standard ACL-标准访问控制列表 只能根据源地址做过滤针对整个协议采取相关动作(允许或禁止) Extended ACL-扩展访问控制列表 能根据源、目的地址、端口号进行过滤能允许或拒…

实验四 汇编语言程序上机过程

五、实验步骤 1、用文字编辑工具(记事本或EDIT)将源程序输入,其扩展名为Hello.ASM。将源文件放到Dosbox挂载的目录下面。 图5-1为源码写注释并更改扩展名为Hello.ASM 2、用MASM对源文件进行汇编,产生Hello.OBJ文件和Hello.LST文件。若汇编时提示有错,用文字编辑工具修改源程…

YAPI接口自动鉴权功能部署详解

安装准备 以下操作,默认要求自己部署过yapi,最好是部署过yapi二次开发环境。 无论是选择在线安装或者是本地安装,都需要安装client工具。 1、yapi-cli:npm install yapi-cli –g, 2、安装后将文件夹nodejs/node_gl…

Nexpose v6.6.208 for Linux Windows - 漏洞扫描

Nexpose v6.6.208 for Linux & Windows - 漏洞扫描 Rapid7 Vulnerability Management, Release Jul 27, 2023 请访问原文链接:https://sysin.org/blog/nexpose-6/,查看最新版。原创作品,转载请保留出处。 作者主页:sysin.o…

10分钟带你实现一个Android自定义View:带动画的等级经验条

先展示一下静态效果图 介绍一下我们的实现流程: 首先整个经验条有一个圆角边框的背景打底;然后给经验条绘制一条轨道,让用户比较直观地看到总进度的长度;在轨道的上层绘制我们的渐变色经验条;在经验条的上层绘制等级…

vue新学习 02 vue命令v-model,数据代理(作用域和作用域链),事件,监听,渲染,计算属性(也就是把操作属性的语句放到vue实例中)

双向绑定用命令v-model: v-bind的命令是单项去绑定data中的相关属性,此时的data是真正的data,并没有用变量声明的方式去接收vue实例对象,也就是例如用const vm new Vue({})。而是直接就采用了new Vue({})这…

6、Kubernetes核心技术 - Pod

目录 一、概述 二、Pod机制 2.1、共享网络 2.2、共享存储 三、Pod资源清单 四、 Pod 的分类 五、Pod阶段 六、Pod 镜像拉取策略 ImagePullBackOff 七、Pod 资源限制 八、容器重启策略 一、概述 Pod 是可以在 Kubernetes 中创建和管理的、最小的可部署的计算单元。P…

oracle12c静默安装

目录 前言 安装配置步骤 关闭防火墙,禁止防火墙开机自启 关闭selinux yum安装必要安装包 内网环境下载依赖包的方式 创建用户和组 创建oinstall和dba组 创建oracle用户 设置oracle密码 查看创建结果 修改内核参数 使配置生效 修改用户及文件限制 改文件限制 修改用…

ol.Overlay+gif动画及隐藏问题

隐藏要使用css比较彻底,例如$("#markerLbs").hide()。 如果使用markerLbs.setVisible(false),当地图刷新后再次显示,可能我的用法不对,欢迎指教。 我的demo是一个gif动画,当zoom变化时控制gif显隐&#xf…

防汛备汛 | EasyV数字孪生可视化防汛应急解决方案护平安!

一、方案背景 汛期是指季节性降雨增多,河流湖泊水位上涨的时期。当前,我国正式进入“七下八上”防汛关键期,多地进入主汛期。入汛以来,我国经历了18次强降雨过程,21个省份271条河流发生超警以上洪水。其中南方地区受台…

Linux文件和目录的777、755、644权限解释

1.文件权限 在linux系统中,文件或目录的权限可以分为3种: r:4 读 w:2 写 x:1 执行(运行) -:对应数值0 数字 4 、2 和 1表示读、写、执行权限 rwx 4 2 1 7 (可读写运行) rw 4 2 6 (可读写不可运行) rx …

vue3+ts+vite项目中使用@时报错:找不到模块,两步教你快速解决

亲爱的小伙伴,如果你也在vue3tsvite项目中使用时报错:找不到模块的话,如下图情况,不要担心,不要害怕,两步教你解决! 1.找到tsconfig.json文件 2.添加如下代码即可 代码如下: "…

SpringMVC中的返回值是什么?

1.谈谈你对SpringMVC的理解 SpringMVC是属于Spring Framework生态里面的一个模块,它是在Servlet的基础上构建并且使用了mvc模式设计的一个Web框架它的主要目的是为了去简化传统的ServletJSP模式下的Web开发方式,其次Spring mvc 的整个架构设计&#xff0…

建木使用进阶-创建密钥管理

阿丹: 第一次我们进入建木,第一件事情就是配置我们相关的密钥。 解读: 在建木中我们可以进行创建密钥来对我们服务器等密码进行方便的管理。 注意: 登录的时候账号为:admin 密码为:123456 这是初始…

【javaSE】 数组的定义与使用

目录 数组的基本概念 为什么要使用数组 什么是数组 数组的创建及初始化 数组的创建 数组的初始化 动态初始化 静态初始化 注意事项 数组的使用 数组中元素访问 注意事项 遍历数组 数组是引用类型 初识JVM的内存分布 基本类型变量与引用类型变量的区别 再谈引用…