echarts仪表盘的基础配置,附代码,超详细!!!-阿里云开发者社区

开发者社区> 九龄要努力> 正文

echarts仪表盘的基础配置,附代码,超详细!!!

简介: echarts仪表盘的基础配置
+关注继续查看

前言

echarts官网

基础配置

看不懂,可以与最后的代码对照看
  1. startAngle 开始角度
  2. endAngle 结束角度
  3. name 鼠标移入显示的名称
  4. radius 仪表盘的在父级中所占的百分比 类似大小
  5. center 仪表盘的位置
  6. pointer 指针样式

    • width 宽度
    • length 长度
  1. detail 仪表盘中间数据值默认样式

    • formatter 数据值 语法类似模板字符串
    • textStyle 中间文字的大小
    • offsetCenter 中间值的位置
  2. title 仪表中间标题的配置

    • offsetCenter 标题位置
  3. axisTick 短刻度样式 与长刻度配置差不多
  4. splitLine 长刻度样式

    • show 是否显示该刻度
    • distance 位置,负数在仪表盘外面,反之在里面
    • length 长度
    • lineStyle 刻度样式

      • width 宽度
      • color 刻度颜色
  5. axisLabel 刻度值样式

    • distance 位置,负数在仪表盘外面,反之在里面
    • color 颜色
    • fontSize 字体大小
  6. color 仪表盘的主体颜色
  7. data 数据

代码

 option = {
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%'
    },
    series: [
      {
        startAngle: 210, // 开始角度 左侧角度
        endAngle: -30, // 结束角度 右侧
        name: 'Pressure',
        type: 'gauge',
        radius: '65%',
        progress: {
          show: true
        },
        center: ['50%', '63%'],
        pointer: { // 指针样式
          width: 3,
          length: '60%',
          shadowBlur: 5
        },
        detail: { // 中间数据
          valueAnimation: true,
          formatter: '{value}%', // 数据值的样式
          textStyle: {
            fontSize: 14
          },
          offsetCenter: [0, '70%'] // 中间值的位置
        },
        title: { // 标题位置
          offsetCenter: [0, '45%']
        },
        axisTick: { // 短刻度样式
          show: false // false表示不显示
        },
        splitLine: { // 长刻度设置
          distance: -20, // 位置
          length: 8,
          lineStyle: {
            width: 3,
            color: '#bbb'
          }
        },
        axisLabel: { // 刻度值
          distance: -20, // 位置
          color: '#AAAAAA',
          fontSize: 12
        },
        color: [themeColor],
        data: [
          {
            value: 50,
            name: '完成率'
          }
        ]
      }
    ]
  }

本文到此结束啦~,喜欢可以点个赞!!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Spring AOP 源码分析——创建代理对象
1.简介 与筛选合适的通知器相比,创建代理对象的过程则要简单不少,本文所分析的源码不过100行,相对比较简单。在接下里的章节中,我将会首先向大家介绍一些背景知识,然后再去分析源码。
977 0
1.3—Spring基础配置—1.依赖注入
Spring框架本身有四大原则: 1)使用POJO进行轻量级和最小侵入式开发。 2)通过依赖注入和基于接口编程实现松耦合。 3)通过AOP和默认习惯进行声明式编程。 4)使用AOP和模板(template)减少模式化代码。
1093 0
1.3—Spring基础配置—3.AOP
Sping学习笔记—AOP
1370 0
Android JAVA 语言基础例子代码
Android的界面一般都是java开发的,因此对于c++,.net人员来说理解和编写有一个适应过程,最近参考了一下资料,把这些涉的一些java基础使用以例子代码的形式总结起来,记录了这个平台的熟悉过程。
812 0
Java基础-08总结帮助文档,代码块,继承
1:如何制作帮助文档(了解)(1)写一个类(2)加入文档注释(3)通过javadoc工具生成即可javadoc -d 目录 -author -version ArrayTool.java /*我想要对数组进行操作在同一个文件夹下,类定义在两个文件中和定义在一个文件中其实一样的。 */ class ArrayDemo {public static void main(String[]
1144 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
7407 0
学习hadoop需要什么基础
“学习hadoop需要什么基础”这已经不是一个新鲜的话题了,随便上网搜索一下就能找出成百上千篇的文章在讲学习hadoop需要掌握的基础。再直接的一点的问题就是——学Hadoop难吗?用一句特别让人无语的话回答就是:难不会,会不难!
1514 0
numpy基础代码操练
In [20]: b[0,:,1] Out[20]: array([1, 5, 9]) In [21]: b[0,:,1] Out[21]: array([1, 5, 9]) In [22]: b[0,:,-1] Out[22]: array([ 3, 7, 11]) ...
911 0
《Ansible权威指南 》一 第一篇 Part 1 基础入门篇
“未来主体是传统行业利用互联网技术,以云端用人工智能的方式处理大数据”,在腾讯“云+未来”技术峰会上,马化腾这样形容未来。15年前,电脑还只是少数人的专属,那时的网吧还很火,还没人知道“网咖”是什么。而现在人手一部智能手机,物联网更是让日常生活中的普通家电也能在互联网占据一席之地。
1510 0
+关注
九龄要努力
一个爱代码的程序媛~
10
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载