echarts 儀表盤三分鐘上手及屬性修改示例

時間 2019-12-06

標籤 echarts 儀表盤三分 3分上手屬性修改示例简体版

原文原文鏈接

1：echarts 後面儀表盤三分鐘上手示例

引入相關的文件

<!-- 引入 echarts.js -->
        <script src="js/echarts.min.js"></script>
        <script src="js/jquery-1.11.3.js"></script>

原始默認顯示以下

圖片.png

三分鐘代碼
參考API：http://echarts.baidu.com/examples/editor.html?c=gauge

<!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',
javascript

圖片.png

效果以下

圖片.png
需求二：儀表盤刻度顏色html

在series裏面添加代碼，讓紅色在0-20 ，80-100是綠色前端

axisLine: {            // 座標軸線  
                     lineStyle: {       // 屬性lineStyle控制線條樣式  
                         color: [[0.2, '#c23531'], [0.8, '#63869e'], [1, '#91c7ae']]
                                }  
                            },

圖片.png

原文做者：祈澈姑娘
技術博客：https://www.jianshu.com/u/05f416aefbe1
90後前端妹子，愛編程，愛運營，愛折騰。堅持總結工做中遇到的技術問題，堅持記錄工做中所所思所見，歡迎你們一塊兒探討交流。java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。