专栏首页编程微刊echarts 仪表盘三分钟上手及属性修改示例

echarts 仪表盘三分钟上手及属性修改示例

1:echarts 后面仪表盘三分钟上手示例

  • 引入相关的文件
<!-- 引入 echarts.js -->
        <script src="js/echarts.min.js"></script>
        <script src="js/jquery-1.11.3.js"></script>
  • 原始默认显示如下

图片.png

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>三分钟上手之仪表盘</title>
        <!-- 引入 echarts.js -->
        <script src="js/echarts.min.js"></script>
        <script src="js/jquery-1.11.3.js"></script>
    </head>

    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            myChart.setOption({
                tooltip: {
                    formatter: "{a} <br/>{b} : {c}%"
                },
                toolbox: {
                    feature: {
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [{
                    name: '业务指标',
                    type: 'gauge',
                    detail: { formatter: '{value}%' },
                    data: [{ value: 50, name: '完成率' }]
                }]
            });

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

</html>

2:相关修改

  • 需求一:把总体的背景色改为黑色 首先,把总体的背景色改为黑色,显得比较高大上添加属性:backgroundColor: '#12cf96',

图片.png 效果如下

图片.png

  • 需求二:仪表盘刻度颜色

在series里面添加代码,让 红色在0-20 ,80-100是绿色

axisLine: {            // 坐标轴线  
                     lineStyle: {       // 属性lineStyle控制线条样式  
                         color: [[0.2, '#c23531'], [0.8, '#63869e'], [1, '#91c7ae']]
                                }  
                            },   

图片.png

图片.png

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【前端图表】echarts实现散点图x轴时间轴

    王小婷
  • 在jsp页面里面设置全局引用文件

    王小婷
  • 三分钟上手Highcharts简易甘特图

    根据业务需求,找到了这个很少使用的图形,话不多说,看看该如何使用。首先要引入支持文件:可根据链接下载。 exporting.js:https://img.hc...

    王小婷
  • fis3 commonJs中的moduleId

    IMWeb前端团队
  • fis3 commonJs中的moduleId

    本文作者:IMWeb 袁飞翔 原文出处:IMWeb社区 未经同意,禁止转载 首先看一个有趣的问题 // fis-conf.js fis.hook('c...

    IMWeb前端团队
  • fis3 commonJs 中的 moduleId

    我们来首先看一个有趣的问题为什么会出现实际输出和理想中输出不一致的情况,本文主要讲解了 fis3 commonJs 中的 moduleId。

    腾讯IVWEB团队
  • 带你实现一个 JSONP 实例

    4、可读性较强,虽然比不上 XML 那么一目了然,但在合理的依次缩进之后还是很容易识别的;

    小皮咖
  • vue中使用Echart

    在main.js引用主题JS  --    import  'echarts/theme/shine.js' 使用方法 -- let myChart = th...

    tianyawhl
  • 前端学习与工作书籍推荐

    前端_AWhile
  • 一对一沟通

    现在互联网软件这么丰富,各种IM工具发达,企业QQ、TM、微信、钉钉,交流起来真的很方便,效率也很高。但是这种交流是缺少触觉的,是无法捕捉到对方的表情和肢体语言...

    奎哥

扫码关注云+社区

领取腾讯云代金券