2. 程式人生 > >將echarts圖調成響應式的程式碼

將echarts圖調成響應式的程式碼

阿新 • • 發佈：2019-01-02
<!doctype html> <html lang="us"> <head> <meta charset="utf-8"><title></title><script src="echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> </body> </html> <script src="jquery.js"></script> <script> var myChart = document.getElementById('main');
//自適應寬高var myChartContainer = function () { myChart.style.width = window.innerWidth+'px'; myChart.style.height = window.innerHeight+'px'; }; myChartContainer(); var myChart = echarts.init(myChart); option = { title: { text: '基礎雷達圖' }, radar: { indicator: [ { name: '銷售', max: 6500}, { name: '管理', max: 16000},
{ name: '資訊科技', max: 30000}, { name: '客服', max: 38000}, { name: '研發', max: 52000}, { name: '市場', max: 25000} ], name:{ formatter:function(v){ console.log(v);return v; } }, triggerEvent:true }, series: [ { name: '預算vs開銷', type: 'radar', data : [{ value : [4300, 10000, 28000, 35000, 50000, 19000], name : '預算分配' }, { value : [5000, 14000, 28000, 31000, 42000, 21000],
name : '實際開銷' }] }]}; myChart.setOption(option); //瀏覽器大小改變時重置大小 window.onresize = function () { myChartContainer(); myChart.resize(); }; </script>

相關推薦

將echarts圖調成響應式的程式碼

<!doctype html> <html lang="us"> <head> <meta charset="utf-8"><title>&

想要將CAD圖轉換成JPG圖片該怎麽操作

　　CAD圖紙文件在各個行業基本都是會使用到的因為CAD圖紙文件的查看需要借助於專業的軟件進行查看，因此為了方便顧客進行查看，我們通過會將CAD圖轉換成JPG圖片，這樣就可以直接使用JPG圖片查看圖紙文件了。那麽應該使用什麽軟件，才能夠快速的將CAD圖轉換成JPG圖片？怎麽把CAD圖轉換成JPG圖片？

利用Unity自帶的合圖切割功能將合圖切割成子圖

int 方便 無法 object idt http eal data- 像素 轉載的，牛人無處不在，我還太渺小 雖然目前網上具有切割合圖功能的工具不少，但大部分都是自動切割或者根據plist之類的合圖文件切割的， 這種切割往往不可自己微調或者很難維調，導致效果不理想。

（17）Reactor的調試——響應式Spring的道法術器

Spring WebFlux 響應式編程 本系列文章索引《響應式Spring的道法術器》前情提要 Reactor 3快速上手 | 響應式流規範本文測試源碼 2.7 調試 在響應式編程中，調試是塊難啃的骨頭，這也是從命令式編程到響應式編程的切換過程中，學習曲線最陡峭的地方。 在命令式編程中，方法的調用

普通網頁怎麼改成響應式佈局

<span style="font-family: verdana, 'ms song', Arial, Helvetica, sans-serif;"> </span><span style="background-color: rgb(2

如何將ER圖轉換成關係模式集

在ER圖中，主要是實體型別和聯絡型別。 1、實體型別的轉換 （“——”表示對應關係） 實體型別——關係模式 實體的屬性——關係模式的屬性 實體識別符號——關係模式的鍵 2、聯絡的轉換 一元聯

Java 8原生API也可以開發響應式程式碼？

前段時間工作上比較忙，這篇文章一直沒來得及寫，本文是閱讀《Java8實戰》的時候，瞭解到Java 8裡已經提供了一個非同步非阻塞的介面（CompletableFuture），可以實現簡單的響應式程式設計的模式，因此用這篇文章做個梳理。我是帶著下面這幾個問題去學習CompletableFuture這個介面的

響應式滾動圖懶載入 element ui el-carousel 元件優化程式碼

 響應式滾動圖懶載入 element ui  el-carousel 元件優化程式碼    懶載入外掛vue-lazyload //main.js import VueLazyload from 'vue-lazyload' Vue.use(

響應式滾動圖懶載入 element ui el-carousel 元件優化程式碼

 響應式滾動圖懶載入 element ui  el-carousel 元件優化程式碼  懶載入外掛vue-lazyload //main.js import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload, {

將課程作業01的設計思想、程序流程圖、源程序代碼和結果截圖整理成一篇博文

package static 技術分享 整理 public out 計算 mage 數字 1.程序設計思想 先讓用戶輸入要計算的數字的個數，然後讓用戶輸入這幾個數，將字符型轉化為整數，然後求和，最後輸出所求得的和即可。 2.程序流程圖 3.源程序代碼 pack

matlab 將數字矩陣轉換成圖像

之間 灰度 範圍 黑白 最好 沒有 imshow 原理 記錄 MATLAB中，常常使用imshow()函數來顯示圖像，而此時的圖像矩陣可能經過了某種運算。在matlab中，為了保證精度，經過了運算的圖像矩陣I其數據類型會從unit8型變成double型。如果直接運行imsh

將課程作業01、02、03的設計思想、源程序代碼和結果截圖整理成一篇博文。。

top exception 漢諾塔 一個數 resource valueof val 作業 回文數 信1605-3 於丁一 20163578 使用組合數公式利用n！來計算 設計思想：首先要判斷一個數的階乘如何表達，然後調用方法用組合數公式，最後求出組合數。 packag

（14）Reactor調度器與線程模型——響應式Spring的道法術器

響應式編程 Spring WebFlux 本系列文章索引《響應式Spring的道法術器》前情提要 Spring WebFlux快速上手 | Spring WebFlux性能測試前情提要：Reactor 3快速上手 | 響應式流規範 | 自定義數據流本文測試源碼 2.4 調度器與線程模型 在1.3.2

不使用SpringBoot如何將原生Feign集成到Spring中來簡化http調用

getname anr fig ssp sin int all process 代碼 在微服務架構中，如果使用得是SpringCloud，那麽只需要集成SpringFeign就可以了，SpringFeign可以很友好的幫我們進行服務請求，對象解析等工作。 然而SpingC

自定義EL表達式，將對象轉成json格式，關鍵代碼

地址 .com rar json common onf jsp頁面 conf 標簽 做javaweb開發的最常用的一個東西el表達式，這個東西是個很好用的東西，但有些時候我們處理復雜的字符串操作，就有些相形見絀了，這個時候就需要用自定義的方法去實現更多簡潔方便的事情。下面自

調用百度地圖開發平臺的JavascriptAPI實現將市縣位置轉換成坐標

json 2.7 func 技術分享 真的 工具 深圳市 tar () 最近的項目要做的地圖比較多，有的還比較復雜，而地圖用到的坐標，上網找json文件更是良莠不齊的。真是讓人傷腦筋，後來突然想到了百度地圖開發平臺，沒想到真的有對應的API哦，謝天謝地！！！下面說一下完整的

ubuntu下使用pyinstaller將python檔案打包成exe（py檔案中含有keras框架的程式碼）

一 使用工具 pyinstaller, 在ubuntu上安裝pyinstaller非常的簡單，直接使用下面的命令即可 pip install pyinstaller 注意：推薦大家使用python3.0及以上的python版本（好像python3.6使用pyinstaller也存在一些問題），因為使用p

bootstrap響應式；輪播圖pc端，m端

　隨著3G的普及，越來越多的人使用手機上網。移動裝置正超過桌面裝置，成為訪問網際網路的最常見終端。於是，網頁設計師不得不面對一個難題：如何才能在不同大小的裝置上呈現同樣的網頁？本篇文章將講述自適應網頁設計的概念和方法，使網頁開發人員維護同一個網頁程式碼，即可使網站在多種裝置上具有更好的閱讀體驗。本文

JavaScript響應式輪播圖外掛–Flickity

簡介 flickity是一款自適應手機觸屏滑動外掛，它的API引數很豐富，包括對齊方式、迴圈滾動、自動播放、是否支援拖動、是否開啟分頁、是否自適應視窗等。 線上演示及下載 演示地址 下載頁面 使用方法 引入檔案 <link rel="stylesheet" href="flickity.

強大的螢幕適配佈局rem響應式 實現一套web程式碼多端自適應適配 （實用、贊）

原文出處：https://blog.csdn.net/qq_14997169/article/details/53914201 實現強大的螢幕適配佈局 流式的佈局、固定的寬度，還有響應式來做，但是這些方案都不是最佳的解決方法。->->rem rem是什麼？