https://blog.csdn.net/zc763375777/article/details/53837391

来无事,制作不一样的图标一发,领导让把仪表盘做成百分条,我TM也是醉了,大体样式如下图:(图标是没2秒变化的) 

  1. <div id="main" style="width: 400px;height: 300px;"></div>
  2. <script>
  3. var myChart = echarts.init(document.getElementById("main"));
  4. option = {
  5. //提示框组件。开发实际中去掉了指针,提示框可以不用设置。
  6. tooltip: {
  7. formatter: "{a} <br/>{b} : {c}%"
  8. },
  9. //工具栏。本次好像也没用到,刷新,下载,我觉得还是挺实用的,具体开需求!
  10. toolbox: {
  11. feature: {
  12. restore: {},
  13. saveAsImage: {}
  14. }
  15. },
  16. //下面属性才是仪表盘的核心!!反正我是这么认为的!!!
  17. series: [{
  18. //类型
  19. type: 'gauge',
  20. //半径
  21. radius: 150,
  22. //起始角度。圆心 正右手侧为0度,正上方为90度,正左手侧为180度。
  23. startAngle: 180,
  24. //结束角度。
  25. endAngle: 0,
  26. center: ['50%', '90%'],
  27. //仪表盘轴线相关配置。
  28. axisLine: {
  29. show:true,
  30. // 属性lineStyle控制线条样式
  31. lineStyle: {
  32. width: 60,
  33. color:[[1, '#63869e']]
  34. }
  35. },
  36. //分隔线样式。
  37. splitLine: {
  38. show: false,
  39. },
  40. //刻度样式。
  41. axisTick: {
  42. show: false,
  43. },
  44. //刻度标签。
  45. axisLabel: {
  46. show:false,
  47. },
  48. //仪表盘指针。
  49. pointer: {
  50. //这个show属性好像有问题,因为在这次开发中,需要去掉指正,我设置false的时候,还是显示指针,估计是BUG吧,我用的echarts-3.2.3;希望改进。最终,我把width属性设置为0,成功搞定!
  51. show: false,
  52. //指针长度
  53. length:'90%',
  54. width:0,
  55. },
  56. //仪表盘标题。
  57. title: {
  58. show: true,
  59. offsetCenter: [0, '-40%'], // x, y,单位px
  60. textStyle: {
  61. color: '#hhh',
  62. fontSize: 30
  63. }
  64. },
  65. //仪表盘详情,用于显示数据。
  66. detail: {
  67. show: true,
  68. offsetCenter: [0, '-10%'],
  69. formatter: '{value}%',
  70. textStyle: {
  71. fontSize: 30
  72. }
  73. },
  74. data: [{
  75. value: 0,
  76. name: '存储量'
  77. }]
  78. }]
  79. };
  80. myChart.setOption(option);
  81. //设置定时,加载随机数据,可以直观显示
  82. timeTicket = setInterval(function() {
  83. var random=(Math.random() * 100).toFixed(2);
  84. var color=[[random/100, '#63869e'], [1, '#c23531']];
  85. option.series[0].axisLine.lineStyle.color=color;
  86. option.series[0].data[0].value =random ;
  87. myChart.setOption(option, true);
  88. }, 200)
  89. </script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 仪表盘默认是三个区域,此次百分比显示,只能设置两个区域。
  • 通过改变axisLine(仪表盘轴线相关配置)中的lineStyle中color数组,默认是3个。
  • 本次,我初始化的时候是1个,然后定时加载显示2个,用百分比隔开,成功显示进度条样式。
  • 图标是动态变化的,开发的时候可以根据需求设置,在此次样例中,我设置了随机数

Echarts关于仪表盘的更多相关文章

  1. Echarts——更改仪表盘方向和颜色

    做小项目需要用到仪表盘,官方给出的颜色设置如下: 而我想要如下样式的: 最后,经过一番折腾算是搞成了如下样式效果: 要达到上面效果关键在于设置Echarts的如下两处js代码: 1.大小值要颠倒,因为 ...

  2. echarts实现仪表盘(自己动起来,没有后端,顺便重温math.random

    let a = parseInt(Math.random() * (2 + 1), 10); let arr = []; arr.push(res[a]); let option = { toolti ...

  3. echarts gauge 仪表盘去除外发光效果

    textStyle中加shadow选项: textStyle: { shadowColor : '#000', //默认透明 shadowBlur: 0 }

  4. ECharts学习(4)--仪表盘

    1. ECharts中的仪表盘,要使用这个图表时把series中的type属性修改成'gauge',然后在detail中设置仪表盘详情,用于显示数据.最常用的是formatter(格式化函数或者字符串 ...

  5. echarts仪表盘如何设置图例(legend)

    echarts 图表中经常需要对不同的颜色设置图例标识不同的意义,而仪表盘的指针只存在一个值,如何表示不同颜色的意义,官网配置项并未给出该功能: 不同段的颜色是通过axisLine->lineS ...

  6. Echarts CPU监控 (折线仪表盘,图例混搭)

    https://blog.csdn.net/mengxiangfeiyang/article/details/44802939 CPU page   <script type="tex ...

  7. 使用echarts绘制漂亮的渐变键盘仪表盘

    echarts官方示例和默认样式都比较难看,经过一顿捣鼓实现比较漂亮的渐变仪表盘. 第一步:设置轴线 将图表轴线.label.分割线.隐藏,只保留刻度,然后修改刻度样式达到最终效果.不过要注意的是ax ...

  8. echarts仪表盘配置参数

    require.config({ paths:{ echarts:"js/chart" } }); require([ 'echarts', 'echarts/chart/gaug ...

  9. echarts仪表盘

    echarts链接:https://gallery.echartsjs.com/editor.html?c=xkasbcOqh0 代码: var axislineColor = new echarts ...

随机推荐

  1. tensorflow实现基于LSTM的文本分类方法

    tensorflow实现基于LSTM的文本分类方法 作者:u010223750 引言 学习一段时间的tensor flow之后,想找个项目试试手,然后想起了之前在看Theano教程中的一个文本分类的实 ...

  2. python爬虫之初始Selenium

    1.初始 Selenium[1]  是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE(7, 8, 9, 10, 11),Moz ...

  3. Linux基础学习(14)--日志管理

    第十四章——日志管理 一.日志管理简介 1.日志服务: 2.常见日志的作用: 二. rsyslogd日志服务 1.日志文件格式: 2./etc/rsyslog.conf配置文件: 三.日志轮替 1.日 ...

  4. React Router 4.0 ---- 嵌套路由和动态路由

    嵌套路由,从广义上来说,分为两种情况:一种是每个路由到的组件都有共有的内容,这时把共有的内容抽离成一个组件,变化的内容也是一个组件,两种组件组合嵌套,形成一个新的组件.另一种是子路由,路由到的组件内部 ...

  5. No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK问题解决

    Maven构建项目报错: 解决办法: 1.eclipse菜单 -  Window - Preferences- Java - Installed JREs 将配置的JRE定位到JDK,例如JRE ho ...

  6. 前端使用Javascrip实现图片轮播

    Javascript实现网页图片自动轮播 1.创建一个img标签 设置默认图片,以及图片的高度和宽度,为了大家方便,我将CSS样式和JS语句都写在一个html文件中,演示用的图片来自小明官网:'htt ...

  7. sws_getContext函数参数介绍

    原型: SwsContext *sws_getContext(int srcW, int srcH, enum AVPixelFormat srcFormat, int dstW, int dstH, ...

  8. Java中的CopyOnWrite

    CopyOnWrite简称COW,是一种程序设计的一种优化的策略方法,他开始的思想就是大家一起共享一件东西或商品,当一个人想要改这个事物原有的状态时,会重新复制一份出去,然后再新的事物上面改他所需要的 ...

  9. Python字符串和列表的内置方法

    一.字符串内置方法 1.strip()  删除开头和结尾的字符串 s.strip(rm) 删除s字符串中开头,结尾处,位于rm删除序列的字符串 s.lstrip(rm) 删除s字符串中开头位于rm删除 ...

  10. HDU4625 JZPTREE 【树形DP】【第二类斯特林数】

    题目大意: 对1到n求题目中描述的那个式子. 题目分析: 幂不好处理,转化为斯特林数. 根据$ n^k= \sum_ { i=0 }^k S(k,i)×i!×C(n,i) $. 我们可以将问题转化为对 ...