echarts仪表盘更换样式全圆形换成半圆

问题:想把图一的仪表盘默认样式换乘图二半圆的这个样式。官网中通过更换主题按钮切换的仪表盘样式,但是没有实际的demo~具体是怎么实现更换样式的?

图片1.png

图片2.png

参考API:http://echarts.baidu.com/examples/editor.html?c=gauge

其实很简单,只需要在series:里面加上开始角度和结束角度即可。

startAngle: 180, //开始角度 左侧角度
endAngle: 0, //结束角度 右侧

图片.png

写了一个小的demo如下:

<!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({
                //backgroundColor: '#000000',
                backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1
                tooltip: {
                    formatter: "{a} <br/>{b} : {c}%"
                },
                toolbox: {
                    feature: {
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [{
                    startAngle: 180, //开始角度 左侧角度
                    endAngle: 0, //结束角度 右侧
                    name: '业务指标',
                    type: 'gauge',
                    detail: { formatter: '{value}%' },

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

                    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>

此demo的实现效果如下,妥妥的半圆

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

Bootstrap基本入门大全

Bootstrap 是基于 HTML、CSS、JAVASCRIPT的,它简洁灵活,使得 Web 开发更加快捷。 重点的是你要理解这个框架的运行机制,了解了它是怎...

265100
来自专栏web前端

Vuejs --01 起步

一、是什么      1、是一套构建用户界面的渐进式框架,Vue采用自底向上增量开发的设计           1.1     解释:框架譬如angular,是...

23050
来自专栏C/C++基础

CSS3制作3D水晶糖果按钮

本人仿照20个漂亮 CSS3 按钮效果及优秀的制作教程中的BonBon(Candy)Button实现了其棒棒糖果按钮,如下图所示:

12510
来自专栏葡萄城控件技术团队

Web页面中5种超酷的Hover效果

想在自己的网站中应用超酷的hover效果吗?也许你可以从如下的这些实例中获得一些灵感,如果你喜欢这些效果,也可以直接拷贝代码并应用到你的站点。 给平淡的站点带来...

27690
来自专栏埋名

React UI 组件库【uiw】发布

高品质的UI工具包,基于React 16+的组件库。 ? 为了表示支持,点击 阅读原文 搞点Star,多多益善。

20020
来自专栏河湾欢儿的专栏

(第一版)知识点

11220
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:快速实现应用中的图片、声音等文件上传功能

最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便

12120
来自专栏互联网软件技术

js控制两个元素高度保持一致

19760
来自专栏GuZhenYin

C#使用Xamarin开发可移植移动应用(3.Xamarin.Views控件)附源码

前言 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. .NET core2.0 ...

25190
来自专栏前端杂货铺

翻译:如何使用CSS实现多行文本的省略号显示

本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添...

39860

扫码关注云+社区

领取腾讯云代金券