ECharts主頁: http://echarts.baidu.com/index.html
ECharts-2.1.8下載地址: http://echarts.baidu.com/build/echarts-2.1.8.zip
ECharts官方實例: http://echarts.baidu.com/doc/example.html
ECharts官方API文檔: http://echarts.baidu.com/doc/doc.html
1、項目結構
js文件夾: 下載了ECharts之後,解壓縮,如解壓後的根目錄是echarts-2.1.8,則到echarts-2.1.8\doc\example\www路徑下,把裏面的js文件夾直接複製粘貼到項目的 WebRoot根目錄下即可
echarts.jsp: 在WebRoot根目錄下新建echarts.jsp
echarts.jsp
- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
- <%
- String path = request.getContextPath();
- String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
- %>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <base href="<%=basePath%>">
- <title>ECharts實例</title>
- </head>
- <body>
- <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
- <!--Step:1 爲ECharts準備一個具備大小(寬高)的Dom-->
- <div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
- <!--Step:2 Import echarts.js-->
- <!--Step:2 引入echarts.js-->
- <script src="js/echarts.js"></script>
- <script type="text/javascript">
- // Step:3 conifg ECharts's path, link to echarts.js from current page.
- // Step:3 爲模塊加載器配置echarts的路徑,從當前頁面鏈接到echarts.js,定義所需圖表路徑
- require.config({
- paths: {
- echarts: './js'
- }
- });
- // Step:4 require echarts and use it in the callback.
- // Step:4 動態加載echarts然後在回調函數中開始使用,注意保持按需加載結構定義圖表路徑
- require(
- [
- //這裏的'echarts'相當於'./js'
- 'echarts',
- 'echarts/chart/map'
- ],
- //創建ECharts圖表方法
- function (ec) {
- // --- 地圖 ---
- //基於準備好的dom,初始化echart圖表
- var myChart = ec.init(document.getElementById('mainMap'));
- //定義圖表option
- var option = {
- //標題,每個圖表最多僅有一個標題控件,每個標題控件可設主副標題
- title: {
- //主標題文本,'\n'指定換行
- text: 'iphone銷量',
- //副標題文本,'\n'指定換行
- subtext: '純屬虛構',
- //水平安放位置,默認爲左側,可選爲:'center' | 'left' | 'right' | {number}(x座標,單位px)
- x: 'center',
- //垂直安放位置,默認爲全圖頂端,可選爲:'top' | 'bottom' | 'center' | {number}(y座標,單位px)
- y: 'top'
- },
- //圖例,每個圖表最多僅有一個圖例
- tooltip : {
- //觸發類型,默認('item')數據觸發,可選爲:'item' | 'axis'
- trigger: 'item'
- },
- //圖例,每個圖表最多僅有一個圖例
- legend: {
- //佈局方式,默認爲水平佈局(即horizontal),可選爲:'horizontal' | 'vertical'
- orient: 'vertical',
- //水平安放位置,默認爲全圖居中,可選爲:'center' | 'left' | 'right' | {number}(x座標,單位px)
- x: 'left',
- //垂直安放位置,默認爲全圖頂端,可選爲:'top' | 'bottom' | 'center' | {number}(y座標,單位px)
- y: 'top',
- //legend的data: 用於設置圖例,data內的字符串數組需要與sereis數組內每一個series的name值對應
- data:['iphone3','iphone4','iphone5']
- },
- //值域選擇,每個圖表最多僅有一個值域控件
- dataRange: {
- //佈局方式,默認爲垂直佈局('vertical'),可選爲:'horizontal' | 'vertical'
- orient: 'vertical',
- //指定的最小值,eg: 0,默認無(null),必須參數
- min: 0,
- //指定的最大值,eg: 100,默認無(null),必須參數
- max: 2500,
- //水平安放位置,默認爲全圖左對齊('left'),可選爲:'center' | 'left' | 'right' | {number}(x座標,單位px)
- x: 'left',
- //垂直安放位置,默認爲全圖底部('bottom'),可選爲:'top' | 'bottom' | 'center' | {number}(y座標,單位px)
- y: 'bottom',
- //值域文字顯示,默認爲數值文本
- text: ['高','低'],
- //是否啓用值域漫遊,默認爲關閉(false),啓用後無視splitNumber,值域顯示爲線性漸變
- calculable: true
- },
- //工具箱,每個圖表最多僅有一個工具箱
- toolbox: {
- //顯示策略,可選爲:true(顯示) | false(隱藏),默認值爲false
- show: true,
- //佈局方式,默認爲水平佈局('horizontal'),可選爲:'horizontal' | 'vertical'
- orient: 'vertical',
- //水平安放位置,默認爲全圖右對齊('right'),可選爲:'center' | 'left' | 'right' | {number}(x座標,單位px)
- x: 'right',
- //垂直安放位置,默認爲全圖頂端,可選爲:'top' | 'bottom' | 'center' | {number}(y座標,單位px)
- y: 'center',
- //啓用功能,目前支持feature,工具箱自定義功能回調處理
- feature: {
- //輔助線標誌
- mark: {show: true},
- //數據視圖,打開數據視圖,可設置更多屬性,readOnly 默認數據視圖爲只讀(即值爲true),可指定readOnly爲false打開編輯功能
- dataView: {show: true, readOnly: false},
- //restore,還原,復位原始圖表
- restore: {show: true},
- //saveAsImage,保存圖片(IE8-不支持),圖片類型默認爲'png'
- saveAsImage: {show: true}
- }
- },
- //縮放漫遊組件,僅對地圖有效
- roamController: {
- //顯示策略,默認爲顯示(true),可選爲:true(顯示) | false(隱藏)。
- show: true,
- //水平安放位置,默認爲左側('letf'),可選爲:'center' | 'left' | 'right' | {number}(x座標,單位px)
- x: 'right',
- //垂直安放位置,默認爲全圖頂端,可選爲:'top' | 'bottom' | 'center' | {number}(y座標,單位px)
- y: 'top',
- //必須,默認無(null),指定漫遊組件可控地圖類型,如:{ china: true }
- mapTypeControl: {
- //指定地圖類型
- 'china': true
- }
- },
- //series(地圖),驅動圖表生成的數據內容數組,數組中每一項爲一個系列的選項及數據
- series : [
- {
- //系列名稱,如果啓用legend,該值將被legend.data索引相關
- name: 'iphone3',
- //圖表類型,必要參數!如爲空或不支持類型,則該系列數據不被顯示
- type: 'map',
- //地圖類型,支持world,china及全國34個省市自治區。省市自治區的mapType直接使用簡體中文:如'廣東'
- mapType: 'china',
- //是否開啓滾輪縮放和拖拽漫遊,默認爲false(關閉),其他有效輸入爲true(開啓),'scale'(僅開啓滾輪縮放),'move'(僅開啓拖拽漫遊)
- roam: 'scale',
- //圖形樣式,可設置圖表內圖形的默認樣式和強調樣式(懸浮時樣式)
- itemStyle:{
- //正常時的樣式
- normal:{
- //邊框線寬,單位px
- borderWidth: 2,
- //邊框顏色
- borderColor: 'lightgreen',
- //標籤,餅圖默認顯示在外部,離餅圖距離由labelLine.length決定,地圖標籤不可指定位置
- label: {show:true}
- },
- //鼠標經過時的樣式
- emphasis: {
- //邊框線寬,單位px
- borderWidth:2,
- //邊框顏色
- borderColor:'#fff',
- //鼠標經過時區域的顏色
- color: '#32cd32',
- //標籤
- label: {
- show: true,
- //文本樣式
- textStyle: {
- //文本字體顏色
- color: '#fff'
- }
- }
- }
- },
- //當圖表類型爲地圖時,需要說明每部分數據對應的省份,可設置選中狀態,如 :{name: '北京',value: 1234,selected: true},
- data:[
- {name: '北京',value: Math.round(Math.random()*1000)},
- {name: '天津',value: Math.round(Math.random()*1000)},
- {name: '上海',value: Math.round(Math.random()*1000)},
- {name: '重慶',value: Math.round(Math.random()*1000)},
- {name: '河北',value: Math.round(Math.random()*1000)},
- {name: '河南',value: Math.round(Math.random()*1000)},
- {name: '雲南',value: Math.round(Math.random()*1000)},
- {name: '遼寧',value: Math.round(Math.random()*1000)},
- {name: '黑龍江',value: Math.round(Math.random()*1000)},
- {name: '湖南',value: Math.round(Math.random()*1000)},
- {name: '安徽',value: Math.round(Math.random()*1000)},
- {name: '山東',value: Math.round(Math.random()*1000)},
- {name: '新疆',value: Math.round(Math.random()*1000)},
- {name: '江蘇',value: Math.round(Math.random()*1000)},
- {name: '浙江',value: Math.round(Math.random()*1000)},
- {name: '江西',value: Math.round(Math.random()*1000)},
- {name: '湖北',value: Math.round(Math.random()*1000)},
- {name: '廣西',value: Math.round(Math.random()*1000)},
- {name: '甘肅',value: Math.round(Math.random()*1000)},
- {name: '山西',value: Math.round(Math.random()*1000)},
- {name: '內蒙古',value: Math.round(Math.random()*1000)},
- {name: '陝西',value: Math.round(Math.random()*1000)},
- {name: '吉林',value: Math.round(Math.random()*1000)},
- {name: '福建',value: Math.round(Math.random()*1000)},
- {name: '貴州',value: Math.round(Math.random()*1000)},
- {name: '廣東',value: Math.round(Math.random()*1000)},
- {name: '青海',value: Math.round(Math.random()*1000)},
- {name: '西藏',value: Math.round(Math.random()*1000)},
- {name: '四川',value: Math.round(Math.random()*1000)},
- {name: '寧夏',value: Math.round(Math.random()*1000)},
- {name: '海南',value: Math.round(Math.random()*1000)},
- {name: '臺灣',value: Math.round(Math.random()*1000)},
- {name: '香港',value: Math.round(Math.random()*1000)},
- {name: '澳門',value: Math.round(Math.random()*1000)}
- ],
- },
- {
- //系列名稱,如果啓用legend,該值將被legend.data索引相關
- name: 'iphone4',
- //圖表類型,必要參數!如爲空或不支持類型,則該系列數據不被顯示
- type: 'map',
- //地圖類型,支持world,china及全國34個省市自治區。省市自治區的mapType直接使用簡體中文:如'廣東'
- mapType: 'china',
- //是否開啓滾輪縮放和拖拽漫遊,默認爲false(關閉),其他有效輸入爲true(開啓),'scale'(僅開啓滾輪縮放),'move'(僅開啓拖拽漫遊)
- roam: 'scale',
- //圖形樣式,可設置圖表內圖形的默認樣式和強調樣式(懸浮時樣式)
- itemStyle:{
- //正常時的樣式
- normal:{
- //邊框線寬,單位px
- borderWidth: 2,
- //邊框顏色
- borderColor: 'lightgreen',
- //標籤,餅圖默認顯示在外部,離餅圖距離由labelLine.length決定,地圖標籤不可指定位置
- label: {show:true}
- },
- //鼠標經過時的樣式
- emphasis: {
- //邊框線寬,單位px
- borderWidth:2,
- //邊框顏色
- borderColor:'#fff',
- //鼠標經過時區域的顏色
- color: '#32cd32',
- //標籤
- label: {
- show: true,
- //文本樣式
- textStyle: {
- //文本字體顏色
- color: '#fff'
- }
- }
- }
- },
- data:[
- {name: '北京',value: Math.round(Math.random()*1000)},
- {name: '天津',value: Math.round(Math.random()*1000)},
- {name: '上海',value: Math.round(Math.random()*1000)},
- {name: '重慶',value: Math.round(Math.random()*1000)},
- {name: '河北',value: Math.round(Math.random()*1000)},
- {name: '安徽',value: Math.round(Math.random()*1000)},
- {name: '新疆',value: Math.round(Math.random()*1000)},
- {name: '浙江',value: Math.round(Math.random()*1000)},
- {name: '江西',value: Math.round(Math.random()*1000)},
- {name: '山西',value: Math.round(Math.random()*1000)},
- {name: '內蒙古',value: Math.round(Math.random()*1000)},
- {name: '吉林',value: Math.round(Math.random()*1000)},
- {name: '福建',value: Math.round(Math.random()*1000)},
- {name: '廣東',value: Math.round(Math.random()*1000)},
- {name: '西藏',value: Math.round(Math.random()*1000)},
- {name: '四川',value: Math.round(Math.random()*1000)},
- {name: '寧夏',value: Math.round(Math.random()*1000)},
- {name: '香港',value: Math.round(Math.random()*1000)},
- {name: '澳門',value: Math.round(Math.random()*1000)}
- ]
- },
- {
- //系列名稱,如果啓用legend,該值將被legend.data索引相關
- name: 'iphone5',
- //圖表類型,必要參數!如爲空或不支持類型,則該系列數據不被顯示
- type: 'map',
- //地圖類型,支持world,china及全國34個省市自治區。省市自治區的mapType直接使用簡體中文:如'廣東'
- mapType: 'china',
- //是否開啓滾輪縮放和拖拽漫遊,默認爲false(關閉),其他有效輸入爲true(開啓),'scale'(僅開啓滾輪縮放),'move'(僅開啓拖拽漫遊)
- roam: 'scale',
- //圖形樣式,可設置圖表內圖形的默認樣式和強調樣式(懸浮時樣式)
- itemStyle:{
- //正常時的樣式
- normal:{
- //邊框線寬,單位px
- borderWidth: 2,
- //邊框顏色
- borderColor: 'lightgreen',
- //標籤,餅圖默認顯示在外部,離餅圖距離由labelLine.length決定,地圖標籤不可指定位置
- label: {show:true}
- },
- //鼠標經過時的樣式
- emphasis: {
- //邊框線寬,單位px
- borderWidth:2,
- //邊框顏色
- borderColor:'#fff',
- //鼠標經過時區域的顏色
- color: '#32cd32',
- //標籤
- label: {
- show: true,
- //文本樣式
- textStyle: {
- //文本字體顏色
- color: '#fff'
- }
- }
- }
- },
- data:[
- {name: '北京',value: Math.round(Math.random()*1000)},
- {name: '天津',value: Math.round(Math.random()*1000)},
- {name: '上海',value: Math.round(Math.random()*1000)},
- {name: '廣東',value: Math.round(Math.random()*1000)},
- {name: '臺灣',value: Math.round(Math.random()*1000)},
- {name: '香港',value: Math.round(Math.random()*1000)},
- {name: '澳門',value: Math.round(Math.random()*1000)}
- ]
- }
- ]
- };
- //爲echarts對象加載數據
- myChart.setOption(option);
- }
- );
- </script>
- </body>
- </html>
更多的圖表樣式設置,可以查看ECharts的官方API文檔
本文轉載於-------->>http://blog.csdn.net/wangcunhuazi/article/details/41621911