echars仪表盘踩坑(1)

option = {
    tooltip: {
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        feature: {
            restore: {},
            saveAsImage: {}
        }
    },
    series: [{
        name: ‘业务指标‘,
        type: ‘gauge‘,
        title: {
            color: ‘blue‘
        },
        axisLine: { // 坐标轴线
            lineStyle: { // 属性lineStyle控制线条样式
                color: [
                    [0.59, ‘lime‘],
                    [1, ‘#1e90ff‘],
                ],
                width: 3,
                shadowColor: ‘#fff‘, //默认透明
                shadowBlur: 10
            }
        },
        axisLabel: { // 坐标轴小标记
            textStyle: { // 属性lineStyle控制线条样式
                fontWeight: ‘bolder‘,
                color: ‘#fff‘,
                shadowColor: ‘#fff‘, //默认透明
                shadowBlur: 10
            }
        },
        axisTick: { // 坐标轴小标记
            length: 15, // 属性length控制线长
            lineStyle: { // 属性lineStyle控制线条样式
                color: ‘auto‘,
                shadowColor: ‘#fff‘, //默认透明
                shadowBlur: 10
            }
        },
        splitLine: { // 分隔线
            length: 25, // 属性length控制线长
            lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
                width: 3,
                color: ‘#fff‘,
                shadowColor: ‘#fff‘, //默认透明
                shadowBlur: 10
            }
        },
        pointer: { // 分隔线
            shadowColor: ‘#fff‘, //默认透明
            shadowBlur: 5
        },
        detail: {
            formatter: ‘{value}%‘
        },
        data: [{
            value: 50,
            name: ‘完成率‘
        }]
    }]
};

app.timeTicket = setInterval(function() {
    option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    myChart.setOption(option, true);
}, 2000);

下面是仪表盘的效果图

时间: 2024-09-10 22:25:51

echars仪表盘踩坑(1)的相关文章

阿里云磁盘扩容踩坑总结

公司半年前上线一个新的项目,采购了一批阿里云主机,磁盘组成是40G系统盘+100G的数据盘,数据库采用MariaDB Galera Cluster集群部署,由于业务数据量快速增长,导致磁盘存储空间剩余量很少,急需要扩容,先总结整个项目规划中埋下的坑: 1.没有DBA对数据库的容量规划,而前期的运维人员采购时选用100G的SSD云盘: 2.数据库默认使用共享表空间,缺点是删除数据后不释放空间,当数据快速增长后,我们采取了先删除临时表数据的方式来尽量避免暴力扩容,争取在春节期间稳定,删除部分数据后,

Zabbix 踩坑之旅——zabbix触发重启tomcat

一.实验需求 公司tomcat服务经常自动崩溃,导致业务中断,暂时用zabbix对其执行监控,在tomcat崩溃时能够先自动启动,保证业务尽快恢复正常. 二.准备环境 系统环境:CentOS 6.5 IP地址: zabbix-server: 192.168.239.128 zabbix-agent: 192.168.239.130 zabbix的服务端和客户端的安装此处都以rpm包安装,配置略过.agent端上安装好tomcat. 三.开启踩坑之旅--agent端 ① 修改zabbix-agen

Android开发在路上:少去踩坑,多走捷径【转】

作者:gzjay,腾讯MIG无线产品部 高级工程师 最近一朋友提了几个Android问题让我帮忙写个小分享,我觉得对新人还是挺有帮助的,所以有了这个小分享. 1.目前, Android APP开发完成后,通常需要在哪些机型上进行测试? 2.目前, 开发Android APP时,需要考虑的分辨率有哪些? 这两个问题可以合起来回答的. http://developer.android.com/about/dashboards/index.html 源自Google Play的数据,每月都会进行upd

ELK之ES2.4.1双实例平滑升级至5.2.1踩坑并supervisor管理记

ES老集群用的2.4.1版本,跑的比较好就一直没动,最近看资料ES5.X已经稳定,并且性能有较大提升,心里就发痒了,但由于业务要保持高可以用的属性,就得想一个平滑升级的方案,最后想到了多实例过度的办法,5.X版本网上介绍配置变化较大,也做好了踩坑准备,确定好要升级后,立刻动手. 一.对应升级改造方案 使用端口9220和9330 安装并配置好新的ES5.2.1实例-->关掉logstash并将ES2.4.1实例堆栈调小重启(kafka保留3个小时日志所以不会丢失)-->启动ES5.2.1并将lo

vue+ vue-router + webpack 踩坑之旅

说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案   老司机可以忽略下面的内容了 1)起因  考虑到数据分离的问题  因为server是express搭的   自然少不了res.render("xx",data)    这句话的意思就是去查找相应的模板文件然后在用数据去渲染在将渲染好的页面去返回给浏览器,给浏览器去解析,渲染模板其实就是做的替换字符串+拼接字符串的活  各种的模板引擎也有各个优化的点(比如可以将对应的模板编译的函数保存在内存中,然后在通

AI相关 TensorFlow -卷积神经网络 踩坑日记之一

上次写完粗浅的BP算法 介绍 本来应该继续把 卷积神经网络算法写一下的 但是最近一直在踩 TensorFlow的坑.所以就先跳过算法介绍直接来应用场景,原谅我吧. TensorFlow 介绍 TF是google开源出来的人工智能库,由python语言写的 官网地址:http://www.tensorflow.org/   请用科学上网访问 中文地址:http://www.tensorfly.cn/ 当然还有其他AI库,不过大多数都是由python 写的 .net 的AI库叫 Accord.net

之后要接触更多代码管理的知识——2015踩坑有感

前言 学习是没有止境的,管理代码的能力也永远需要提高. 前几个月还觉得R语言,业务上要用的都学得七七八八了呢,这几个月在自家部门吭哧吭哧搞报表自动化时,各个坑一踩一个准,才明白写代码,懂得一点语言特性固然重要,弄一套科学地管理代码的方法,却是势在必行. 因此在这里总结一下这几个月来我踩过的种种坑,以及之后在查阅种种大神的经验,以及学软件工程这门课时看到的一些比较妥当的方法,算是这几个月的一个总结.2016年的时候,真的要多学学如何科学地管理代码,科学开发 请注意,因为我属于跨专业半路出家写代码,

运维小白部署网站踩坑全过程

作为一名一个星期之前还是个运维小白的我,经过一番摸爬滚打终于把我的小网站部署上去了 一.服务器环境 OK,一开始我得到的是一台centos的服务器,没有装apache/nginx.mysql和php环境,一开始我是使用lnmp一键安装包,结果发现php好多扩展和依赖缺失,重装了php后才解决了问题,mysql也遇到一些问题,所以建议大家在装环境时除非一键lamp/lnmp安装包经历过实践的考验,不然还是老老实实地一个一个组件安装,php.mysql.nginx. lnmp/lamp安装成功的标志

unionId突然不能获取的踩坑记录

昨天(2016-2-2日),突然发现系统的一个微信接口使用不了了.后来经查发现,是在网页授权获取用户基本信息的时候,unionid获取失败导致的. 在网页授权获取用户基本信息的介绍中(http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html),unionid可以在第二步(https://api.weixin.qq.com/sns/oauth2/access_token)和第四步的2个接口中获得.其中,第四步的接口是