位置: 编程技术 - 正文

ECharts仪表盘实例代码(附源码下载)(echarts图表)

编辑:rootadmin

推荐整理分享ECharts仪表盘实例代码(附源码下载)(echarts图表),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:echarts 仪表盘大小,echarts 仪表盘大小,echarts 仪表盘,echarts 仪表盘大小,echarts 仪表盘刻度值,echarts 仪表盘刻度值,echarts仪表盘指针颜色,echarts仪表盘渐变色,内容如对您有帮助,希望把文章链接给更多的朋友!

大家在汽车驾驶舱里一眼就可以看到仪表盘,使用使用Echarts制作的仪表盘可以轻松展示用户的数据,清晰的看出某个指标值所在的范围,仪表盘形式的报表应用在各种统计系统中,本文结合实例讲解仪表盘在销售任务完成率的统计应用。

效果演示 源码下载

HTML

首先引入Echarts,然后在需要放置图表的地方加上div#myChart,同时给它加上宽度和高度属性。

ECharts仪表盘实例代码(附源码下载)(echarts图表)

Javascript

接下来要初始化echarts实例,然后设置选项,最后渲染图像。

选项设置中的tooltip是一个提示框组件,默认参数show:true是显示提示框的。参数formatter是提示框浮层内容格式,它支持字符串模板和回调函数两种形式。一般我们使用字符串模板,模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。 在 trigger 为 'axis' 的时候,会有多个系列的数据,此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a},{b},{c},{d} 含义不一样。对饼图、仪表盘、漏斗图三种类型的图表参数含义为: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)。

选项中的series是系列列表。每个系列通过 type 决定自己的图表类型,它包含很多参数。其中参数name表示系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。参数type指图表类型,type:'gauge'即仪表盘。参数detail是指仪表盘详情,用于显示数据,可以定义数据显示的高宽大小,背景色,边框颜色等等,本例中定义了仪表盘的详情显示为百分数。参数axisLine可以定义仪表盘轴线相关配置,如轴线样式等。参数splitLine用来定义仪表盘中的分隔线样式,如线长、线的颜色、线宽等等。参数data则是用来展示数据的,可以设置仪表盘指标对应的值以及名称。

如果是一个动态变化的仪表盘,可以使用setInterval()定时变换仪表值,如以下代码。

以上内容给大家介绍了ECharts仪表盘实例代码,希望对大家有所帮助!

JS实现以内被3或5整除的数字之和 今天在技术群里看到一道这样的提:求以内被3或5整除的数字之和。其中看到很有趣的解法二,最开始还是挺迷惑的,后来想了下,再经人指点,就

多种js图片预加载实现方式分享 图片预加载有大体有几种方式1.html标签或css加载图片显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载。但是为了避免

谈一谈javascript中继承的多种方式 JS是没有继承的,不过可以曲线救国,利用构造函数、原型等方法实现继承的功能。varo=newObject();其实用构造函数实例化一个对象,就是继承,这里可以

标签: echarts图表

本文链接地址:https://www.jiuchutong.com/biancheng/380381.html 转载请保留说明!

上一篇:用canvas 实现个图片三角化(LOW POLY)效果(canvas实例)

下一篇:JS实现1000以内被3或5整除的数字之和(js输出100以内能被5整除的数)

  • 化肥与农药的利与弊
  • 企业所得税法允许税前扣除的费用划分为
  • 房开企业预售阶段预交的税费
  • 专票要写开户行和账号
  • 收益性支出包括哪些内容
  • 施工劳务企业要交增值税吗
  • 小规模纳税人缴纳上月应交增值税
  • 管理费用贷方有哪些递减
  • 建筑业工人工资保障
  • 一般纳税人计提增值税账务处理
  • 工资表的其他扣除
  • 房产公司收到的增值税
  • 开办费一次性摊销企业所得税
  • 不收汇样品的会计分录
  • 出售旧机床的账务处理
  • 虚开发票走账对方不返还如何处理?
  • 企业所得税国税还是地税征管
  • 安全生产费纳税调整政策
  • 月末利润分配的账务处理
  • 红字负数发票可以抵扣吗
  • 计提个税会计科目怎么做
  • 研发费用归集会计分录
  • 销售商品包安装如何确认收入
  • 电脑下载的文件打不开怎么回事
  • 入库单的金额填不填价税合计
  • win8.1技巧
  • 使用时间
  • 呆账核销的条件有哪些
  • PHP:getallheaders()的用法_Apache函数
  • PHP:Memcached::getResultCode()的用法_Memcached类
  • php 操作mysql
  • php的项目
  • php获取ipv6地址
  • css如何实现文字环绕
  • php炫酷代码
  • grid 框架
  • 消耗品算什么科目
  • vue使用教程
  • 盘点那些神级翻唱现场
  • js文件合并工具
  • 固定资产处置怎么计算
  • 收到的发票税收怎么处理
  • 不含税开发票吗
  • 财企[2002]313号
  • 为什么盈余公积减少,未分配利润增加
  • 专利技术资本化
  • 新会计准则规定
  • 我有朋友吗朋友圈说说
  • 防暑降温费计入工资还是福利费
  • 三证合一哪三个证
  • 分月摊销怎么处理
  • 私车公用税务处理
  • 其他综合收益要转入投资收益吗
  • 科技经费使用
  • centos虚拟机怎么用
  • 勒索病毒2021
  • 微软每月补丁更新一般于什么时间发布
  • win10怎么自定义壁纸
  • dsapi.exe是什么
  • cfg是什么格式,怎么打开
  • win7系统禁用网络后如何开启
  • mom.exe是什么进程
  • 怎么看win8.1的版本
  • win8系统找不到无线网络
  • linux rsyslogd
  • linux系统怎么启动软件
  • html中title的作用
  • lua struct
  • eclipse cocos2dx Command line too long
  • unity urp 性能
  • js按照指定顺序排序
  • Linux查看所有用户和密码
  • python利用for循环求1到100的奇数之和
  • javascript零基础
  • js访问thymeleaf值
  • jquery ui和jquery easy ui
  • javascript数据结构与算法
  • 计算消费税为什么要除1-比例税率
  • 宿迁市国家税务局徐友谅
  • 消费税可抵扣的分录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设