国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Echarts組件介紹及應(yīng)用場(chǎng)景

IT那活兒 / 1890人閱讀
Echarts組件介紹及應(yīng)用場(chǎng)景
點(diǎn)擊上方“IT那活兒”公眾號(hào)，關(guān)注后了解更多內(nèi)容，不管IT什么活兒，干就完了！！！

ECharts簡(jiǎn)介

ECharts，EnterpriseCharts的縮寫(xiě)，商業(yè)級(jí)數(shù)據(jù)圖表，一個(gè)純Javascript的圖表庫(kù)，可以流暢的運(yùn)行在PC和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級(jí)的Canvas類庫(kù)ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。其創(chuàng)新的拖拽重計(jì)算、數(shù)據(jù)視圖、值域漫游等特性大大增強(qiáng)了用戶體驗(yàn)，賦予了用戶對(duì)數(shù)據(jù)進(jìn)行挖掘、整合的能力。

ECharts組件支持折線圖（區(qū)域圖）、柱狀圖（條狀圖）、散點(diǎn)圖（氣泡圖）、K線圖、餅圖（環(huán)形圖）、雷達(dá)圖（填充雷達(dá)圖）、和弦圖、力導(dǎo)向布局圖、地圖、儀表盤(pán)、漏斗圖、事件河流圖等12類圖表，同時(shí)提供標(biāo)題、詳情、氣泡、圖例、值域、數(shù)據(jù)區(qū)域、時(shí)間軸、工具箱等8個(gè)可交互組件，支持多圖表、組件的聯(lián)動(dòng)和混搭展示。

echarts組件使用示例

1. 首先引入JS

"dist/echarts.js">script>

"map/js/china.js">script>


首先給定一下全局樣式、給個(gè)地圖容器：


<style>

       *{margin:0;padding:0}

       html,body{

           width:100%;

           height:100%;

       }

       #main{

             width:800px;

             height:600px;

             margin:150px auto;

             border:1pxsolid #ffffd;

         }

       /*建議長(zhǎng)寬比0.75，符合審美*/

   style>

   <div id="main">

   div>

2. 獲取容器DOM，設(shè)置地圖相關(guān)參數(shù)

var myChart= echarts.init(document.getElementById(main));

myChart.setOption(option);

詳細(xì)配置，定制樣式，給自定義事件。

option= {

            tooltip:{

                    formatter:function(params,ticket,callback){

                        return params.seriesName+
+params.name+：+params.value

                    }

                },

            visualMap:{

                min:0,

                max:1500,

                left:left,

                top:bottom,

                text:[高,低],

                inRange:{

                    color:[#e0ffff, #006edd]

                },

                show:true

            },

            geo:{

                map:china,

                roam:false,

                zoom:1.23,

                label:{

                    normal:{

                        show:true,

                        fontSize:10,

                        color:rgba(0,0,0,0.7)

                    }

                },

                itemStyle:{

                    normal:{

                        borderColor:rgba(0, 0, 0, 0.2)

                    },

                    emphasis:{

                        areaColor:#F3B329,

                        shadowOffsetX:0,

                        shadowOffsetY:0,

                        shadowBlur:20,

                        borderWidth:0,

                        shadowColor:rgba(0, 0, 0, 0.5)

                    }

                }

            },

            series: [

                {

                    name:信息量,

                    type:map,

                    geoIndex:0,

                    data:dataList

                }

            ]

        };
變量解釋：

  • tooltip：定制信息提示框的內(nèi)容，其中params參數(shù)表示數(shù)據(jù)。

  • visualMap：圖注樣式定制，其中包括color范圍，文字提示。

  • geo:定義地圖為china。

  • zoom:視角縮放比例，roam：是否開(kāi)啟縮放和平移。

  • itemStyle：地圖外觀定制，其中normal表示正常顯示的樣式，emphasis表示鼠標(biāo)懸浮下樣式。

  • series：整體配置，其type很關(guān)鍵，表示該例是地圖。

  • data:圖表所用數(shù)據(jù)，實(shí)際項(xiàng)目中大家可以通過(guò)http獲取數(shù)據(jù)，再賦值給data。

實(shí)際應(yīng)用

Echarts圖表可為現(xiàn)場(chǎng)運(yùn)維人員提供可視化面板監(jiān)控工具，直觀展現(xiàn)被監(jiān)控的主機(jī)、業(yè)務(wù)、數(shù)據(jù)庫(kù)性能、也可以用于故障定位、故障分析等場(chǎng)景。

目前湖南/湖北移動(dòng)日志管理平臺(tái)報(bào)表管理中心，現(xiàn)場(chǎng)運(yùn)維人員正是通過(guò)echarts組件靈活配置實(shí)現(xiàn)數(shù)據(jù)庫(kù)性能監(jiān)控、故障定位等運(yùn)維場(chǎng)景。

停開(kāi)機(jī)工單統(tǒng)計(jì)報(bào)表：

服務(wù)器監(jiān)控圖表：

總 結(jié)：

對(duì)于運(yùn)維來(lái)說(shuō)，不同的數(shù)據(jù)需要不同的展現(xiàn)形式，要能通過(guò)靈活的配置來(lái)提供不同的數(shù)據(jù)展現(xiàn)，常規(guī)的柱狀圖、曲線圖、餅圖、雷達(dá)圖、面積圖都是運(yùn)維數(shù)據(jù)展現(xiàn)所應(yīng)具備的，

以上是echarts的基礎(chǔ)配置引入和使用規(guī)范，及結(jié)合項(xiàng)目實(shí)際場(chǎng)景使用介紹，希望對(duì)大家能有一點(diǎn)啟發(fā)。

本文作者：張 政（上海新炬王翦團(tuán)隊(duì)）

本文來(lái)源：“IT那活兒”公眾號(hào)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/129272.html

相關(guān)文章

  • 前端每周清單第 48 期：Slack Webpack 構(gòu)建優(yōu)化，CSS 命名規(guī)范與用戶追蹤，Vue.

    摘要：發(fā)布是由團(tuán)隊(duì)開(kāi)源的，操作接口庫(kù)，已成為事實(shí)上的瀏覽器操作標(biāo)準(zhǔn)。本周正式發(fā)布，為我們帶來(lái)了，，支持自定義頭部與腳部，支持增強(qiáng)，兼容原生協(xié)議等特性變化。新特性介紹日前發(fā)布了大版本更新，引入了一系列的新特性與提升，本文即是對(duì)這些變化進(jìn)行深入解讀。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清單專注前端...

    sean 評(píng)論0 收藏0

  • 尋找真兇Echarts or Angular

    摘要：我們?cè)賮?lái)看一下調(diào)用棧，如下圖從圖中我們發(fā)現(xiàn)了一個(gè)調(diào)用棧的代碼執(zhí)行過(guò)，還記得里提到嗎發(fā)起臟檢查的通知者，它代理了原生事件，任何一個(gè)原生異步事件的觸發(fā)都會(huì)導(dǎo)致的運(yùn)行。 尋找真兇Echarts or Angular 這是一篇故事，就如同技術(shù)，我們所追求的不是一個(gè)結(jié)局，而是那些深受啟發(fā)與共鳴的過(guò)程，那是我們成長(zhǎng)的經(jīng)驗(yàn)與生產(chǎn)力的積淀！ 故事開(kāi)始于瘋了的ionic3應(yīng)用 頁(yè)面打開(kāi)，什么也沒(méi)做5s里...

    sumory 評(píng)論0 收藏0

  • 小程序echarts+canvasdrawer實(shí)現(xiàn)頁(yè)面轉(zhuǎn)化圖片并保存到相冊(cè)

    摘要：小程序?qū)崿F(xiàn)頁(yè)面轉(zhuǎn)化圖片并保存到相冊(cè)場(chǎng)景小程序測(cè)試活動(dòng)，實(shí)現(xiàn)雷達(dá)圖展示不同的結(jié)果微信頭像二維碼測(cè)試結(jié)果文字，最終繪制出一張圖片用戶保存相冊(cè)。圓形頭像建議切鏤空?qǐng)D覆蓋，，有很難實(shí)現(xiàn)效果建議查看微信小程序社區(qū)的帖子。 小程序echarts+canvasdrawer實(shí)現(xiàn)頁(yè)面轉(zhuǎn)化圖片并保存到相冊(cè) 場(chǎng)景：小程序測(cè)試活動(dòng)，實(shí)現(xiàn)echarts雷達(dá)圖展示不同的結(jié)果、微信頭像、二維碼、測(cè)試結(jié)果文字，最終繪...

    Doyle 評(píng)論0 收藏0

  • 阿里云前端周刊 - 第 16 期

    摘要：或許，它還終將改變用戶對(duì)移動(dòng)的期待。通過(guò)一個(gè)場(chǎng)景實(shí)例了解前端處理大數(shù)據(jù)的無(wú)限可能隨著前端的飛速發(fā)展，在瀏覽器端完成復(fù)雜的計(jì)算，支配并處理大量數(shù)據(jù)已經(jīng)屢見(jiàn)不鮮。 推薦 1. 神經(jīng)網(wǎng)絡(luò)入門 http://www.ruanyifeng.com/blo... 眼下最熱門的技術(shù)，絕對(duì)是人工智能，人工智能的底層模型是神經(jīng)網(wǎng)絡(luò)（neural network）。許多復(fù)雜的應(yīng)用（比如模式識(shí)別、自動(dòng)控制）...

    waruqi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<