2. 程式人生 > >echarts的 各種引數

echarts的 各種引數

阿新 • • 發佈：2018-12-17
[html]  view plain  copy   在CODE上檢視程式碼片 派生到我的程式碼片
  1. 轉載：http://blog.csdn.net/zou128865/article/details/42802671  
  2.   
  3.     <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>    
  4.     <%    
  5.     String path = request.getContextPath();    
  6.     String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";    
  7.     %>    
  8.         
  9.     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
  10.     <html>    
  11.       <head>    
  12.         <base href="<%=basePath%>">    
  13.         <title>ECharts例項</title>    
  14.       </head>    
  15.       <body>    
  16.         <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->    
  17.         <!--Step:1 為ECharts準備一個具備大小（寬高）的Dom-->    
  18.         <div id="mainBar" style="height:500px;border:1px solid #ccc;padding:10px;"></div>    
  19.             
  20.         <!--Step:2 Import echarts.js-->    
  21.         <!--Step:2 引入echarts.js-->    
  22.         <script src="js/echarts.js"></script>    
  23.             
  24.         <script type="text/javascript">    
  25.         // Step:3 conifg ECharts's path, link to echarts.js from current page.    
  26.         // Step:3 為模組載入器配置echarts的路徑，從當前頁面連結到echarts.js，定義所需圖表路徑    
  27.         require.config({    
  28.             paths: {    
  29.                 echarts: './js'    
  30.             }    
  31.         });    
  32.             
  33.         // Step:4 require echarts and use it in the callback.    
  34.         // Step:4 動態載入echarts然後在回撥函式中開始使用，注意保持按需載入結構定義圖表路徑    
  35.         require(    
  36.             [    
  37.                 //這裡的'echarts'相當於'./js'    
  38.                 'echarts',    
  39.                 'echarts/chart/bar',    
  40.                 'echarts/chart/line',    
  41.             ],    
  42.             //建立ECharts圖表方法    
  43.             function (ec) {    
  44.                 //--- 折柱 ---    
  45.                     //基於準備好的dom,初始化echart圖表    
  46.                 var myChart = ec.init(document.getElementById('mainBar'));    
  47.                 //定義圖表option    
  48.                 var option = {    
  49.                     //標題，每個圖表最多僅有一個標題控制元件，每個標題控制元件可設主副標題    
  50.                     title: {    
  51.                         //主標題文字，'\n'指定換行    
  52.                         text: '2013年廣州降水量與蒸發量統計報表',    
  53.                         //主標題文字超連結    
  54.                         link: 'http://www.tqyb.com.cn/weatherLive/climateForecast/2014-01-26/157.html',    
  55.                         //副標題文字，'\n'指定換行    
  56.                         subtext: 'www.stepday.com',    
  57.                         //副標題文字超連結    
  58.                         sublink: 'http://www.stepday.com/myblog/?Echarts',    
  59.                         //水平安放位置，預設為左側，可選為：'center' | 'left' | 'right' | {number}（x座標，單位px）    
  60.                         x: 'left',    
  61.                         //垂直安放位置，預設為全圖頂端，可選為：'top' | 'bottom' | 'center' | {number}（y座標，單位px）    
  62.                         y: 'top'    
  63.                     },    
  64.                     //提示框，滑鼠懸浮互動時的資訊提示    
  65.                     tooltip: {    
  66.                         //觸發型別，預設（'item'）資料觸發，可選為：'item' | 'axis'    
  67.                         trigger: 'axis'    
  68.                     },    
  69.                     //圖例，每個圖表最多僅有一個圖例    
  70.                     legend: {    
  71.                         //顯示策略，可選為：true（顯示） | false（隱藏），預設值為true    
  72.                         show: true,    
  73.                         //水平安放位置，預設為全圖居中，可選為：'center' | 'left' | 'right' | {number}（x座標，單位px）    
  74.                         x: 'center',    
  75.                         //垂直安放位置，預設為全圖頂端，可選為：'top' | 'bottom' | 'center' | {number}（y座標，單位px）    
  76.                         y: 'top',    
  77.                         //legend的data: 用於設定圖例，data內的字串陣列需要與sereis陣列內每一個series的name值對應    
  78.                         data: ['蒸發量','降水量']    
  79.                     },    
  80.                     //工具箱，每個圖表最多僅有一個工具箱    
  81.                     toolbox: {    
  82.                         //顯示策略，可選為：true（顯示） | false（隱藏），預設值為false    
  83.                         show: true,    
  84.                         //啟用功能，目前支援feature，工具箱自定義功能回撥處理    
  85.                         feature: {    
  86.                             //輔助線標誌    
  87.                             mark: {show: true},    
  88.                             //dataZoom，框選區域縮放，自動與存在的dataZoom控制元件同步，分別是啟用，縮放後退    
  89.                             dataZoom: {    
  90.                                 show: true,    
  91.                                  title: {    
  92.                                     dataZoom: '區域縮放',    
  93.                                     dataZoomReset: '區域縮放後退'    
  94.                                 }    
  95.                             },    
  96.                             //資料檢視，開啟資料檢視，可設定更多屬性,readOnly 預設資料檢視為只讀(即值為true)，可指定readOnly為false開啟編輯功能    
  97.                             dataView: {show: true, readOnly: true},    
  98.                             //magicType，動態型別切換，支援直角系下的折線圖、柱狀圖、堆積、平鋪轉換    
  99.                             magicType: {show: true, type: ['line', 'bar']},    
  100.                             //restore，還原，復位原始圖表    
  101.                             restore: {show: true},    
  102.                             //saveAsImage，儲存圖片（IE8-不支援）,圖片型別預設為'png'    
  103.                             saveAsImage: {show: true}    
  104.                         }    
  105.                     },    
  106.                     //是否啟用拖拽重計算特性，預設關閉(即值為false)    
  107.                     calculable: true,    
  108.                     //直角座標系中橫軸陣列，陣列中每一項代表一條橫軸座標軸，僅有一條時可省略數值    
  109.                     //橫軸通常為類目型，但條形圖時則橫軸為數值型，散點圖時則橫縱均為數值型    
  110.                     xAxis: [    
  111.                         {    
  112.                             //顯示策略，可選為：true（顯示） | false（隱藏），預設值為true    
  113.                             show: true,    
  114.                             //座標軸型別，橫軸預設為類目型'category'    
  115.                             type: 'category',    
  116.                             //類目型座標軸文字標籤陣列，指定label內容。 陣列項通常為文字，'\n'指定換行    
  117.                             data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']    
  118.                         }    
  119.                     ],    
  120.                     //直角座標系中縱軸陣列，陣列中每一項代表一條縱軸座標軸，僅有一條時可省略數值    
  121.                     //縱軸通常為數值型，但條形圖時則縱軸為類目型    
  122.                     yAxis: [    
  123.                         {    
  124.                             //顯示策略，可選為：true（顯示） | false（隱藏），預設值為true    
  125.                             show: true,    
  126.                             //座標軸型別，縱軸預設為數值型'value'    
  127.                             type: 'value',    
  128.                             //分隔區域，預設不顯示    
  129.                             splitArea: {show: true}    
  130.                         }    
  131.                     ],    
  132.                         
  133.                     //sereis的資料: 用於設定圖表資料之用。series是一個物件巢狀的結構；物件內包含物件    
  134.                     series: [    
  135.                         {    
  136.                             //系列名稱，如果啟用legend，該值將被legend.data索引相關    
  137.                             name: '蒸發量',    
  138.                             //圖表型別，必要引數！如為空或不支援型別，則該系列資料不被顯示。    
  139.                             type: 'bar',    
  140.                             //系列中的資料內容陣列，折線圖以及柱狀圖時陣列長度等於所使用類目軸文字標籤陣列axis.data的長度，並且他們間是一一對應的。陣列項通常為數值    
  141.                             data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],    
  142.                             //系列中的資料標註內容    
  143.                         &n

相關推薦

echarts的 各種引數

[html]  view plain  copy   轉載：http://blog.csdn.net/zou128865/article/detai

echarts各種字體顏色修改

orien ica tex eat lin 海水 條形圖 查詢 saveas 這篇文章主要講述Echarts設置字體和線條的顏色相關操作筆記，希望文章對你有所幫助，主要是自己的在線筆記吧。我在前面先放各種修改前後圖片顏色的對照，後面再詳細介紹代碼。這樣更方便閱讀及讀者知道，

Netty之ChannelOption的各種引數之EpollChannelOption.SO_REUSEPORT

socket選項 SO_REUSEPORT  轉   miffa 釋出於 2015/03/24 17:21   字數 3383   閱讀 6076  

檢視jvm中的各種引數以及預設值

1 標準引數 標準引數（-），所有的JVM實現都必須實現這些引數的功能，而且向後相容；  通過命令 java即可檢視  如下 where options include: -d32 use a 32-bit data model if

C#呼叫C++編寫的DLL函式各種引數傳遞問題

[System.Security.SuppressUnmanagedCodeSecurity] // We won't use this maliciously   [DllImport("User32.dll", CharSet=CharSet.Auto)]   public static extern

Python函式的各種引數(含星號引數)

Python函式的各種引數(含星號引數) Python中函式的引數有4種形式，分別是： 位置或關鍵字引數(Positional-or-keyword parameter) 僅位置的引數(Positional-only parameter) 任意數量的位置引數(var-positional p

Android 螢幕各種引數的介紹和學習

文章目錄 一、概念 1.1 螢幕大小 1.2 螢幕解析度 1.3 螢幕畫素密度 1.4 實際密度和系統密度 1.5 dp 二、從系統中獲取相關引數和轉換 2.

flowplayer網頁視訊播放器事例詳解--包含各種引數說明（自譯） flowplayer網頁視訊播放器事例詳解--包含各種引數說明（自譯）

flowplayer網頁視訊播放器事例詳解--包含各種引數說明（自譯） <html xmlns= "http://www.w3.org/1999/xhtm

python3 中方法各種引數和返回值

# -*- coding:utf-8 -*- # Author: Evan Mi # 函式 def func1(): print('in the func1') return 0 # 過程 def func2(): print('in th

Standard Shader各種引數的意義

 我們來分析一下Standard Shader的各種引數的意義 Albedo： 這就是物體表面的基本顏色，在物理模型中相當於物體表面某處各子表面的散射顏色。 （max diff）漫反射 Metallic ： 這相當於物理模型中的F(0)，即物體表面和視線一致的面的對

spark 的各種引數配置

  2018年01月03日 11:19:46 hankl1990 閱讀數：1784 https://www.jianshu.com/p/9b243c0a7410       1 spark on yarn常用屬

一個完整的BDC程式，僅供參考！（包括各種引數的配置）

BDC的引數我們都比較熟悉了：可能有一個opt我們用得比較少，而且經常有問題的時候我們還需要F1去檢視是否有辦法可以解決。（例如由於commit work導致沒有返回message的） LOOP AT IT_BDC.     PERFORM bdc_dynpro U

echarts各種事件

圖例互動事件： 1） legendselectchanged : 切換圖例選中狀態後的事件 (注：圖例元件使用者切換圖例開關會觸發該事件,不管你有沒有選擇，點選了就觸發) 2）legendselected：例元件用legendSelect 圖例選中後的事件，即點選顯示

Java虛擬機器-JVM各種引數配置大全詳細

 usr/local/jdk/bin/java -Dresin.home=/usr/local/resin -server -Xms1800M -Xmx1800M -Xmn300M -Xss512K -XX:PermSize=300M -XX:MaxPermSize=3

hibernate中hibernate.cfg.xml連線資料庫的各種引數

# Hibernate, Relational Persistence for Idiomatic Java # License: GNU Lesser General Public License (LGPL), version 2.1 or later. # See th

spring-autowire、集合等各種引數注入

<bean id="example" class="com.xueyoucto.xueyou.Example"> <property name="age" value="12"/> <property name="name" value="xx"/

【Python 學習筆記】各種引數

動態語言好難啊。記一下重點。 【可變引數】可變引數使用 *p 來定義，這時候 p 是一個 tuple。傳入的時候可以直接傳入 f(1,2,3) 也可以使用 f(*tuple/list) 傳入一個可

怎樣獲取jqGrid的各種引數? jqGrid重新整理當前列表頁程式碼

$('#your_grid').getGridParam('page'); // current page ,希望對你有用 /** *重新整理,jqGrid重新整理當前列表頁程式碼 */ function refresh(url) { var page = $

JVM(6)--JVM各種引數及調優

GC有兩種型別：Scavenge GC 和Full GC 1、Scavenge GC 一般情況下，當新物件生成，並且在Eden申請空間失敗時，就會觸發Scavenge GC，堆的Eden區域進行GC，清除非存活物件，並且把尚且存活的物件移動到Surv

如何檢視jvm中的各種引數以及預設值

1 標準引數 標準引數（-），所有的JVM實現都必須實現這些引數的功能，而且向後相容； 通過命令 java即可檢視 如下 where options include: -d32 use a 32-bit data model