2四、echarts作報表
一、今天就來說一講echarts的使用javascript
使用步驟html
（1）首先須要下載包echarts.js，而後引入該包,java
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.js"></script>//echarts不須要依賴jquery
</header>
(2) 首先來一個散點圖來作列子吧，具體的樣式就是以下所示的樣子jquery
下邊看一看具體的配置代碼來着json
//第一步調用echarts初始化函數,傳入dom對象產生echarts的instance <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'));
//第二步構造數據，這裏採用echarts網站上的方式，直接copy構造500個隨機數 var data1 = [];//數據區域縮放組件 var data2 = []; var data3 = []; var random = function (max) { return (Math.random() * max).toFixed(3); }; for (var i = 0; i < 500; i++) { data1.push([random(15), random(10), random(1)]); data2.push([random(10), random(10), random(1)]); data3.push([random(15), random(10), random(1)]); };
//第三步就是使用echarts的option進行參數的配置，因爲接到的任務是精通echarts。因此這裏就對參數的配置寫的比較囉嗦，你們見諒呀！哈哈哈哈 option = { animation: false,//是否開啓動畫，默認是開啓的，true是開啓的,false是關閉的 legend: { data: [ { name:'scatter2', icon:'circle',//強制設置圖形長方形 textStyle: { color:'red' }//設置文本爲紅色 }, { name:'scatter', icon:'rectangular',//強制設置圖形爲長方形 textStyle: { color:'red' }//設置文本爲紅色 }, { name:'scatter3', icon:'rectangular',//強制設置圖形爲長方形 textStyle: { color:'red' }//設置文本爲紅色 } ], zlevel:5,//設置Canvas分層 zlevel值不一樣會被放在不一樣的動畫效果中,傳說中z值小的圖形會被z值大的圖形覆蓋 z:3,//z的級別比zlevel低，傳說中z值小的會被z值大的覆蓋，但不會從新建立Canvas left:'center',//圖例組件離容器左側的距離。能夠是像 '20%' 這樣相對於容器高寬的百分比，也能夠是 'left', 'center', 'right'。 //若是 left 的值爲'left', 'center', 'right'，組件會根據相應的位置自動對齊。 top:'top', //rigth:'', //bottom:'' width:'auto',//設置圖例組件的寬度，默認值爲auto,好像只可以使用px orient:'horizontal',//設置圖例組件的朝向默認是horizontal水平佈局，'vertical'垂直佈局 align:'auto',//'left' 'right'設置圖例標記和文本的對齊，默認是auto //默認自動，根據組件的位置和 orient 決定，當組件的 left 值爲 'right' 以及縱向佈局（orient 爲 //'vertical'）的時候爲右對齊，及爲 'right'。 padding:[20,20,20,20],//設置圖例內邊距 默認爲上下左右都是5，接受數組分別設定 itemGap:20,//圖例每項之間的間隔，橫向佈局時爲水平間隔，縱向佈局時爲縱向間隔。默認爲10 itemWidth:30,//圖例標記的圖形寬度，默認爲25 itemHeight:20,//圖例標記的圖形高度，默認爲14 //formatter:'Legend {name}'//圖例文本的內容格式器，支持字符串模板和回調函數兩種形式。 formatter:function(name){ return 'Legend '+name; }, //selectedMode:false,//圖例的選擇模式，默認爲開啓，也能夠設置成single或者multiple //selectedMode:'single'//圖例的選擇模式，默認爲開啓，也能夠設置成single或者multiple selectedMode:'multiple',//圖例的選擇模式，默認爲開啓，也能夠設置成single或者multiple inactiveColor:'#ccc',//圖例關閉時的顏色，默認是'#ccc' selected:{ 'scatter2':true,//設置圖例的選中狀態 'scatter':false, 'scatter3':false }, tooltip: {//圖例的tooltip 配置，默認不顯示,能夠在文件較多的時候開啓tooltip對文字進行剪切 show: true }, //backgroundColor:'rgb(128, 128, 128)',//圖例的背景顏色，默認爲透明的 //borderColor:'rgb(10, 150, 200)',//圖例的邊框顏色 //borderWidth:2,//圖列的邊框線寬，默認爲1 shadowBlur:30,//圖例陰影的模糊大小 shadowColor:'rgb(128, 128, 56)'//陰影的顏色 }, tooltip: { }, grid:{ show:true,//是否顯示直角座標系的網格,true顯示，false不顯示 left:100,//grid組件離容器左側的距離 containLabel:false,//grid 區域是否包含座標軸的刻度標籤，在沒法肯定座標軸標籤的寬度，容器有比較小沒法預留較多空間的時候，能夠設爲 true 防止標籤溢出容器。 }, xAxis: { type: 'value', min: 'dataMin', name:'xAxis',//x軸的名稱 nameLocation:'end',//x軸名稱的顯示位置'middle'，'end' nameRotate:30,//座標軸名字旋轉角度值 max: 'dataMax', gridIndex:0,//x軸所在的grid的索引，默認位於第一個grid //offset:10,//x軸相對默認位置的偏移，在一個grid中含有多個grid的時候有意義 type:'value',//數值軸適用於連續型數據 //'category'類目軸 適用於離散的類目數據，爲該類型時必須經過 data 設置類目數據。 //'time' //時間軸，適用於連續的時序數據，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不一樣，例如會根據跨度的範圍來決定使用月，星期，日仍是小時範圍的刻度。 //'log' 對數軸。適用於對數數據。 position:'top',//x軸位於grid的上方仍是下方，默認爲bottom在下方 inverse:false,//是否反向座標 boundaryGap:['20%','20%'],//座標軸兩邊留白策略，類目軸和非類目軸的設置和表現不同。 //類目軸中 boundaryGap 能夠配置爲 true 和 false。默認爲 true，這時候刻度只是做爲分隔線，標籤和數據點都會在兩個刻度之間的帶(band)中間。 //非類目軸，包括時間，數值，對數軸，boundaryGap是一個兩個值的數組，分別表示數據最小值和最大值的延伸範圍，能夠直接設置數值或者相對的百分比，在設置 min 和 max 後無效 splitLine: { show: true } }, yAxis: { type: 'value', min: 'dataMin', max: 'dataMax', splitLine: { show: true } }, dataZoom: [ { type: 'slider', show: true, xAxisIndex: [0], start: 1, end: 35 }, { type: 'slider', show: true, yAxisIndex: [0], left: '93%', start: 29, end: 36 }, { type: 'inside', xAxisIndex: [0], start: 1, end: 35 }, { type: 'inside', yAxisIndex: [0], start: 29, end: 36 } ], visualMap: { //type: 'continuous',//類型爲連續型。 min: 0,//指定 visualMapContinuous 組件的容許的最小值。'min' 必須用戶指定。[visualMap.min, visualMax.max] 造成了視覺映射的『定義域』。 max: 1000000,//指定 visualMapContinuous 組件的容許的最大值。'max' 必須用戶指定。[visualMap.min, visualMax.max] 造成了視覺映射的『定義域』。 //setOption 改變 min、max 時 range 的自適應 text:['High','Low'],//兩端的文本['High', 'Low'] range:[0, 800000],//指定手柄對應數值的位置 calculable:true,//表示是否設置了拖拽用的手柄，若是爲false則拖拽結束時，才更新視圖。若是爲ture則拖拽手柄過程當中實時更新圖表視圖。 realtime: false,//表示拖拽時是否實時更新 inverse:false,//是否翻轉組件 precision:2,//展式的小數點精度 itemWidth:30,//長條的寬度，默認爲20 itemHeight:200,//長條的高度，默認是140 align:'left',//組件中手柄和文字的擺放位置'auto' (orient 爲 horizontal 時有效) 'left' 'right' （rient 爲 vertical 時有效。）'top' 'bottom' textGap:20,//兩端文字與主體之間的距離 show:true,//是否顯示數據映射組件 dimension:0,//指定用數據的『哪一個維度』，映射到視覺元素上。『數據』即 series.data。 能夠把 series.data 理解成一個二維數組， seriesIndex:0,//指定去哪一個系列的數據 hoverLink:true,//打開 hoverLink 功能時，鼠標懸浮到 visualMap 組件上時，鼠標位置對應的數值 在 圖表中對應的圖形元素，會高亮。 //反之，鼠標懸浮到圖表中的圖形元素上時，在 visualMap 組件的相應位置會有三角提示其所對應的數值。 //inRange: {//能定義目標系列（參見 visualMap-continuous.seriesIndex）視覺形式，也同時定義了 visualMap-continuous 自己的視覺樣式。 //視覺通道 //inRange 中，能夠有任意幾個的『視覺通道』定義（如 color、symbolSize 等）。這些視覺通道，會被同時採用。 //通常來講，建議使用 透明度（opacity） ，而非 顏色透明度（colorAlpha） （他們細微的差別在於，前者能也同時控制圖元中的附屬物（如 label）的透明度，然後者只能控制圖元自己顏色的透明度）。 //視覺映射的方式：支持兩種方式：線性映射、查表映射。 //線性映射 表示 series.data 中的每個值（dataValue）會通過線性映射計算，從 [visualMap.min, visualMap.max] 映射到設定的 [visual value 1, visual value 2] 區間中的某一個視覺的值（下稱 visual value）。 //查表映射 表示 series.data 中的全部值（dataValue）是可枚舉的，會根據給定的映射表查表獲得映射結果。 /*color: ['#121122', 'rgba(3,4,5,0.4)', 'red'], symbolSize: [30, 100]//圖元的大小。*/ // 表示 目標系列 的視覺樣式。 //}, /*target: { inRange: { symbol: 圖元的圖形類別。 symbolSize: 圖元的大小。 color: 圖元的顏色。 colorAlpha: 圖元的顏色的透明度。 opacity: 圖元以及其附屬物（如文字標籤）的透明度。 colorLightness: 顏色的明暗度，參見 HSL。 colorSaturation: 顏色的飽和度，參見 HSL。 colorHue: 顏色的色調，參見 HSL。 color: ['#121122', 'rgba(3,4,5,0.4)', 'red'], symbolSize: [60, 200] } },*/ // 表示 visualMap-continuous 自己的視覺樣式。 /*controller: {visualMap 組件中，控制器 的 inRange outOfRange 設置。若是沒有這個 controller 設置，控制器 會使用外層的 inRange outOfRange 設置；若是有這個 controller 設置，則會採用這個設置。適用於一些控制器視覺效果須要特殊定製或調整的場景。 inRange: { symbolSize: [30, 100], symbol:['circle', 'rect', 'diamond'], color: ['#121122', 'rgba(3,4,5,0.4)', 'red'] } },*/ type:'piecewise',//表示分段型視覺映射組件（visualMapPiecewise） splitNumber:10,//對於連續型數據，自動切分紅幾段默認是5段 pieces: [//每一段的範圍，以及每一段的文字，以及每一段的特別的樣式 {min: 1500}, // 不指定 max，表示 max 爲無限大（Infinity）。 {min: 900, max: 1500}, {min: 310, max: 1000}, {min: 200, max: 300}, {min: 10, max: 200, label: '10 到 200（自定義label）'}, {value: 123, label: '123（自定義特殊顏色）', color: 'grey'}, // 表示 value 等於 123 的狀況。 {max: 5} // 不指定 min，表示 min 爲無限大（-Infinity）。 ], min:2,//指定 visualMapPiecewise 組件的最小值。 max:5,//指定 visualMapPiecewise 組件的最大值。 selectedMode:'multiple',//(多選)(單選) inverse:false,//是否反轉 precision:2,//數據展現的小數精度 itemWidth:20,//圖形的寬度，即每一個小塊的寬度。 itemHeight:20,//圖形的高度，即每一個小塊的高度 text:['High', 'Low'],//兩端的文本 align:'auto',// 自動決定。'left' 圖形在左文字在右。'right' 圖形在右文字在左。 textGap:20,//兩端文字主體之間的距離 itemGap:10,//每兩個圖元之間的間隔距離，單位爲px。 itemSymbol:'circle',//圖形的形狀 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' show:true,//是否顯示組件 dimension:0,//指定用數據的『哪一個維度』，映射到視覺元素上。 seriesIndex:0,//指定取哪一個系列的數據，即哪一個系列的 series.data。 hoverLink:true,//打開 hoverLink 功能時，鼠標懸浮到 visualMap 組件上時，鼠標位置對應的數值 在 圖表中對應的圖形元素，會高亮。 //inRange://參考visualMapContinuous //outOfRange://參考visualMapContinuous*/ /*categories: [//用於表示離散型數據（或能夠稱爲類別型數據、枚舉型數據）的全集。 'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin' ],*/ /*inRange: { // visual value 能夠配成 Object： color: { 'Warden': 'red', 'Demon Hunter': 'black', '': 'green' // 空字串，表示除了'Warden'、'Demon Hunter'外，都對應到 'green'。 }, // visual value 也能夠只配一個單值，表示全部都映射到一個值，如： color: 'green', // visual value 也能夠配成數組，這個數組須和 categories 數組等長， // 每一個數組項和 categories 數組項一一對應： color: ['red', 'black', 'green', 'yellow', 'white'] },*/ /*outOfRange:{//定義 在選中範圍外 的視覺元素。 color: ['#121122', 'rgba(3,4,5,0.4)', 'red'], symbolSize: [30, 100] }, olor: ['orangered','yellow','lightskyblue']*/ }, series: [ { name: 'scatter', type: 'scatter', itemStyle: { normal: { opacity: 0.8 } }, symbolSize: function (val) { return val[2] * 40; }, data: data1 }, { name: 'scatter2', type: 'scatter', itemStyle: { normal: { opacity: 0.8 } }, symbolSize: function (val) { return val[2] * 40; }, data: data2 }, { name: 'scatter3', type: 'scatter',//散點圖 itemStyle: { normal: { opacity: 0.8, } }, symbolSize: function (val) { return val[2] * 40; }, data: data3 } ] };
二、下邊來一箇中國地圖，不知道爲何數據沒有加上去數組
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.js"></script>
<script src="china.js"></script>
</header>
<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.showLoading();//提供簡單的加載動畫
/*$.get('data.json').done(function (data) {//echarts動態加載數據
myChart.setOption({
title: {
text: '異步數據加載示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
});*/
/*var data1 = [];//數據區域縮放組件
var data2 = [];
var data3 = [];
var random = function (max) {
return (Math.random() * max).toFixed(3);
};
for (var i = 0; i < 500; i++) {
data1.push([random(15), random(10), random(1)]);
data2.push([random(10), random(10), random(1)]);
data3.push([random(15), random(10), random(1)]);
}
option = {
animation: false,//是否開啓動畫，默認是開啓的，true是開啓的,false是關閉的
legend: {
data: [
{
name:'scatter2',
icon:'circle',//強制設置圖形圓形
textStyle:
{
color:'red'
}//設置文本爲紅色
},
{
name:'scatter',
icon:'rectangular',//強制設置圖形爲長方形
textStyle:
{
color:'red'
}//設置文本爲紅色
},
{
name:'scatter3',
icon:'rectangular',//強制設置圖形爲長方形
textStyle:
{
color:'red'
}//設置文本爲紅色
}
],
zlevel:5,//設置Canvas分層 zlevel值不一樣會被放在不一樣的動畫效果中,傳說中z值小的圖形會被z值大的圖形覆蓋
z:3,//z的級別比zlevel低，傳說中z值小的會被z值大的覆蓋，但不會從新建立Canvas
left:'center',//圖例組件離容器左側的距離。能夠是像 '20%' 這樣相對於容器高寬的百分比，也能夠是 'left', 'center', 'right'。
//若是 left 的值爲'left', 'center', 'right'，組件會根據相應的位置自動對齊。
top:'top',
//rigth:'',
//bottom:''
width:'auto',//設置圖例組件的寬度，默認值爲auto,好像只可以使用px
orient:'horizontal',//設置圖例組件的朝向默認是horizontal水平佈局，'vertical'垂直佈局
align:'auto',//'left' 'right'設置圖例標記和文本的對齊，默認是auto
//默認自動，根據組件的位置和 orient 決定，當組件的 left 值爲 'right' 以及縱向佈局（orient 爲 //'vertical'）的時候爲右對齊，及爲 'right'。
padding:[20,20,20,20],//設置圖例內邊距 默認爲上下左右都是5，接受數組分別設定
itemGap:20,//圖例每項之間的間隔，橫向佈局時爲水平間隔，縱向佈局時爲縱向間隔。默認爲10
itemWidth:30,//圖例標記的圖形寬度，默認爲25
itemHeight:20,//圖例標記的圖形高度，默認爲14
//formatter:'Legend {name}'//圖例文本的內容格式器，支持字符串模板和回調函數兩種形式。
formatter:function(name){
return 'Legend '+name;
},
//selectedMode:false,//圖例的選擇模式，默認爲開啓，也能夠設置成single或者multiple
//selectedMode:'single'//圖例的選擇模式，默認爲開啓，也能夠設置成single或者multiple
selectedMode:'multiple',//圖例的選擇模式，默認爲開啓，也能夠設置成single或者multiple
inactiveColor:'#ccc',//圖例關閉時的顏色，默認是'#ccc'
selected:{
'scatter2':true,//設置圖例的選中狀態
'scatter':false,
'scatter3':false
},
tooltip: {//圖例的tooltip 配置，默認不顯示,能夠在文件較多的時候開啓tooltip對文字進行剪切
show: true
},
//backgroundColor:'rgb(128, 128, 128)',//圖例的背景顏色，默認爲透明的
//borderColor:'rgb(10, 150, 200)',//圖例的邊框顏色
//borderWidth:2,//圖列的邊框線寬，默認爲1
shadowBlur:30,//圖例陰影的模糊大小
shadowColor:'rgb(128, 128, 56)'//陰影的顏色
},
tooltip: {
},
grid:{
show:true,//是否顯示直角座標系的網格,true顯示，false不顯示
left:100,//grid組件離容器左側的距離
containLabel:false,//grid 區域是否包含座標軸的刻度標籤，在沒法肯定座標軸標籤的寬度，容器有比較小沒法預留較多空間的時候，能夠設爲 true 防止標籤溢出容器。
},
xAxis: {//x座標軸
min: 'dataMin',//座標軸刻度最小值，在類目軸中無效。
//能夠設置成特殊值 'dataMin'，此時取數據在該軸上的最小值做爲最小刻度。
//不設置時會自動計算最小值保證座標軸刻度的均勻分佈。
name:'xAxis',//x軸的名稱
nameLocation:'end',//x軸名稱的顯示位置'middle'，'end'
nameRotate:30,//座標軸名字旋轉角度值
max: 'dataMax',
gridIndex:0,//x軸所在的grid的索引，默認位於第一個grid
//offset:10,//x軸相對默認位置的偏移，在一個grid中含有多個grid的時候有意義
type:'value',//數值軸適用於連續型數據
//'category'類目軸 適用於離散的類目數據，爲該類型時必須經過 data 設置類目數據。
//'time' //時間軸，適用於連續的時序數據，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不一樣，例如會根據跨度的範圍來決定使用月，星期，日仍是小時範圍的刻度。
//'log' 對數軸。適用於對數數據。
position:'bottom',//x軸位於grid的上方仍是下方，默認爲bottom在下方
inverse:false,//是否反向座標
boundaryGap:['20%','20%'],//座標軸兩邊留白策略，類目軸和非類目軸的設置和表現不同。
//類目軸中 boundaryGap 能夠配置爲 true 和 false。默認爲 true，這時候刻度只是做爲分隔線，標籤和數據點都會在兩個刻度之間的帶(band)中間。
//非類目軸，包括時間，數值，對數軸，boundaryGap是一個兩個值的數組，分別表示數據最小值和最大值的延伸範圍，能夠直接設置數值或者相對的百分比，在設置 min 和 max 後無效
scale:false,//只在數值軸中（type: 'value'）有效,是不是脫離 0 值比例。設置成 true 後坐標刻度不會強制包含零刻度。在雙數值軸的散點圖中比較有用。
//splitNumber:10,//默認爲5，座標軸的分割段數，須要注意的是這個分割段數只是個預估值，最後實際顯示的段數會在這個基礎上根據分割後坐標軸刻度顯示的易讀程度做調整。
minInterval:1,//minInterval自動計算的座標軸最小間隔大小。例如能夠設置成1保證座標軸分割刻度顯示成整數。
interval:0.5,//強制設置座標軸分割的間隔
//silent:true,//座標軸是否靜態沒法交互
triggerEvent:true,//座標軸的標籤是否響應和觸發鼠標事件，默認不響應。
/*事件參數以下：
{
// 組件類型，xAxis, yAxis, radiusAxis, angleAxis
// 對應組件類型都會有一個屬性表示組件的 index，例如 xAxis 就是 xAxisIndex
componentType: string,
// 未格式化過的刻度值, 點擊刻度標籤有效
value: '',
// 座標軸名稱, 點擊座標軸名稱有效
name: ''
}
*/
/*axisLine:{//座標軸線
show:true,//是否顯示座標軸線
onZero:true,//X 軸或者 Y 軸的軸線是否在另外一個軸的 0 刻度上，只有在另外一個軸爲數值軸且包含 0 刻度時有效。
// 線性漸變，前四個參數分別是 x0, y0, x2, y2, 範圍從 0 - 1，至關於在圖形包圍盒中的百分比，若是最後一個參數傳 `true`，則該四個值是絕對的像素位置
lineStyle:{
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{//座標軸線的顏色
offset: 0, color: 'red' // 0% 處的顏色
}, {
offset: 1, color: 'blue' // 100% 處的顏色
}], false),
// 徑向漸變，前三個參數分別是圓心 x, y 和半徑，取值同線性漸變
//color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 紋理填充
//color: new echarts.graphic.Pattern(
//imageDom, // 支持爲 HTMLImageElement, HTMLCanvasElement，不支持路徑字符串
//'repeat' // 是否平鋪, 能夠是 repeat-x, repeat-y, no-repeat
//)
width:1,//座標線的線寬
type:'dashed',//座標軸線的類型'dashed','solid','dotted'
shadowColor: 'rgba(0, 0, 0, 0.5)',//圖形影音的模糊顏色
shadowBlur:10,//圖像陰影的模糊大小
opacity:0.5//圖形的透明度，爲0的時候不繪製該圖形
}
},
axisTick:{//座標軸刻度線的相關設置
show:true,//是否顯示刻度線
alignWithLabel:true,//類目軸中在 boundaryGap 爲 true 的時候有效，能夠保證刻度線和標籤對齊。
interval:1,//座標軸刻度的顯示間隔，在類目軸中有效。默認同 axisLabel.interval 同樣。
//默認會採用標籤不重疊的策略間隔顯示標籤。
//能夠設置成 0 強制顯示全部標籤。
//若是設置爲 1，表示『隔一個標籤顯示一個標籤』，若是值爲 2，表示隔兩個標籤顯示一個標籤，以此類推。
inside:true,//座標軸刻度是否朝內，默認朝外。
length:5,//座標軸刻度的長度
lineStyle:{
width:1,//座標軸刻度線的寬度
type:'dashed',
color:'blue'
}
},
axisLabel:{//標籤上文字的設置
show:true,//是否顯示刻度標籤
interval:10,//刻度標籤間的間距
inside:false,//刻度標籤是否朝內，默認朝外
//rotate:10,//刻度標籤的旋轉角度
margin:5,//刻度標籤與軸線之間的距離
formatter:'{value} kg',//刻度標籤的內容格式
textStyle:{
//color:'green',
fontStyle:'normal',//標籤上文字字體的風格'oblique'，'normal'是否加粗
fontWeight:'lighter',//標籤上文字字體的粗細100 | 200 | 300 | 400，'bold'，'bolder'，'lighter'
//fontFamily:'GB-2312',//文字的字體
fontSize:14
/*color: function (val) {
return val >= 0 ? 'green' : 'red';
}
}
},
splitLine:{//座標軸在grid區域中的分隔線
show:'true',//是否顯示分隔線
interval:1,//分隔線的顯示間隔，在類目軸中有效。默認同 axisLabel.interval 同樣。
//默認會採用標籤不重疊的策略間隔顯示標籤。
//能夠設置成 0 強制顯示全部標籤。
lineStyle: {
// 使用深淺的間隔色
color: '#aaa',
width:1,//設置間隔線的線寬
type:'dashed'//設置間隔線的類型'solid'，'dotted'
}
},
splitArea:{//座標軸在grid區域中的分隔區域，默認狀況下是不顯示的
interval:1,//設置顯示間隔，在類目軸中有效。默認同 axisLabel.interval 同樣。
//默認會採用標籤不重疊的策略間隔顯示標籤。
show:true,//是否分隔區域
areaStyle:{//分隔區的樣式設計
color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
//分隔區域顏色。分隔區域會按數組中顏色的順序依次循環設置顏色。默認是一個深淺的間隔色。
}
}*/
/*data:[{//類目數據，在類目軸（type: 'category'）中有效。
value: '週一',//單個類目的名稱
// 突出週一
textStyle: {//類目標籤的文字樣式
fontSize: 20,
color: 'red',//文字的顏色。
align:'left',//文字的對齊方式，默認自動'center','right'
baseline:'top',//文字基線的對齊方式'middle'默認自動'bottom'
fontStyle:'normal',//文字的字體風格'italic','oblique'
fontWeight:'normal'//文字的粗細'bold'，'bolder'，'lighter'
//fontFamily:'',//文字的字體系列
fontSize:14//文字的字體大小
}
},{
value: '週二',
// 突出週二
textStyle: {
fontSize: 20,
color: 'red'
}
},{
value: '週三',
// 突出週三
textStyle: {
fontSize: 20,
color: 'red'
}
}
]
},*/
/*yAxis: {//y座標軸
type: 'value',
min: 'dataMin',
max: 'dataMax',
splitLine: {
show: true
}
},*/
/*polar:{//極座標軸
zlevel:5,//Canvas分層
z:3,//全部圖形的z值，z值小的會被z值大的覆蓋
center:['50%','50%'],//極座標的中心,默認是50%,50%
radius:[]//極座標的半徑，第一項是內半徑，第二項是外半徑
},
radiusAxis:{//極座標的半徑軸所在的極座標系的索引，默認是在第一個座標系中
polarIndex:0,
type:'value',//極座標數據的類型'category'，'time'，'log'
name:'rou',//座標軸的名稱
nameLocation:'start',//座標軸顯示的位置'middle''end'
nameTextStyle:{//座標軸名稱的文字樣式。
color:'bule',
fontStyle:'normal',//'italic''oblique'
fontWeight:'normal',//'bold''bolder''lighter'
fontFamily:'gb-2312',//文字字體
fontSize:14//文字大小
},
nameGap:20,//座標軸名稱與軸線之間的距離。
nameRotate:30,//座標軸名字旋轉角度值
inverse:true,//是否反向座標軸
boundaryGap:20,//座標軸兩邊留白策略
剩下屬性參考xAxis
},*/
/*angleAxis:{//極座標軸的角度軸
startAngle:90,//刻度的角度，默認爲 90 度，即圓心的正上方。0 度爲圓心的正右方。
clockwise:true,//刻度的增加是否按順時針，默認爲true
type:'value',//座標軸的類型'category'，'time' ，'log'
//其他的屬性參考xAxis
},*/
/*radar:{//雷達圖的座標組件，只能使用在雷達圖中
zlevel:3,
z:12,
center:['50%','50%'],//組件的座標
radius:'80%',//組件的半徑，相對於容器高寬中較小的一項的一半。
//其他的屬性參考xAxis
indicator: [//雷達圖的指示器，用來指定雷達圖中的多個變量（維度）
{
name: '銷售（sales）',//指示器的名稱
max: 6500,//指示器的最大值
min:0,//指示器的最小值
},
{ name: '管理（Administration）', max: 16000},
{ name: '信息技術（Information Techology）', max: 30000},
{ name: '客服（Customer Support）', max: 38000},
{ name: '研發（Development）', max: 52000},
{ name: '市場（Marketing）', max: 25000}
]
},*/
/*dataZoom: [//區域縮放組件
{
type: 'slider',
show: true,//是否顯示 組件。若是設置爲 false，不會顯示，可是數據過濾的功能還存在。
//backgroundColor:'rgba(20,89,150,0.25)',//組件的背景顏色
dataBackground:{//數據陰影的樣式
lineStyle:{//陰影的線條樣式
color:'blue',
width:1,//線寬
type:'solid',//'dashed','dotted'
},
areaStyle:{//陰影的填充樣式
color: 'red',
opacity:1
}
},
//fillerColor:'yellow',//選中範圍的填充顏色
borderColor:'gray',
//handleIcon:'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8',//手柄icon的形狀
//默認爲M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z
handleSize:'80%',//控制手柄的寬度默認是100%
handleStyle:{//手柄的配置樣式
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
},
labelPrecision:2,//顯示label的小數點位數
labelFormatter:function (value) {//格式化顯示器
return '最終的值爲' + value; // 返回最終的label內容。
},
showDetail:true,//拖拽時顯示詳細信息
showDataShadow:'false',//是否在拖動的時候顯示數據陰影
realtime:true,//在拖動的時候是否實時更新系列的數據
xAxisIndex: [0],
filterMode:'filter',//'empty'
start: 1,
end: 35
},
{
type: 'slider',
show: true,
yAxisIndex: [0],
left: '93%',
start: 29,
end: 36
},
{
type: 'inside',//所謂『內置』，即內置在座標系中。平移：在座標系中滑動拖拽進行數據區域平移。
xAxisIndex: [0],//組件控制的 x軸,若是有多個圖則表示這個 dataZoom 組件控制 第一個 xAxis
filterMode:'filter',//當前數據窗口外的數據，被 過濾掉。即會影響其餘軸的數據範圍。
//'empty'當前數據窗口外的數據，被 設置爲空。即不會影響其餘軸的數據範圍。
start: 1,//數據窗口範圍的起始百分比。範圍是：0 ~ 100。表示 0% ~ 100%。
end: 35,//數據窗口範圍的結束百分比。範圍是：0 ~ 100。
//startValue:20,//數據窗口範圍的起始數值。若是設置了 dataZoom-inside.start 則 startValue 失效。
//orient:'horizontal',//'vertical'佈局方式是橫仍是豎。不只是佈局方式，對於直角座標系而言，也決定了，缺省狀況控制橫向數軸仍是縱向數軸。
zoomLock:true, //若是設置爲 true 則鎖定選擇區域的大小，也就是說，只能平移，不能縮放。
throttle:110//設置觸發視圖刷新的頻率。單位爲毫秒（ms）。
},
{
type: 'inside',
yAxisIndex: [0],
start: 29,
end: 36
}
],
series: [
{
name: 'scatter',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data1
},
{
name: 'scatter2',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data2
},
{
name: 'scatter3',
type: 'scatter',//散點圖
itemStyle: {
normal: {
opacity: 0.8,
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data3
}
]
};*/
//dataZoom 組件是對 數軸（axis） 進行『數據窗口縮放』『數據窗口平移』操做。
//能夠經過 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 來指定 dataZoom 控制哪一個或哪些數軸。
//dataZoom[i]-inside內置型數據區域縮放組件
//設置 dataZoom-inside 組件控制的 x軸（即xAxis，是直角座標系中的概念，參見 grid）。
// 不指定時，當 dataZoom-inside.orient 爲 'horizontal'時，默認控制和 dataZoom 平行的第一個 xAxis。可是不建議使用默認值，建議顯式指定。
// 若是是 number 表示控制一個軸，若是是 Array 表示控制多個軸。
/*option: {
xAxis: [
{...}, // 第一個 xAxis
{...}, // 第二個 xAxis
{...}, // 第三個 xAxis
{...} // 第四個 xAxis
],
dataZoom: [
{ // 第一個 dataZoom 組件
xAxisIndex: [0, 2] // 表示這個 dataZoom 組件控制 第一個 和 第三個 xAxis
},
{ // 第二個 dataZoom 組件
xAxisIndex: 3 // 表示這個 dataZoom 組件控制 第四個 xAxis
}
]
}
option: {
yAxis: [
{...}, // 第一個 yAxis
{...}, // 第二個 yAxis
{...}, // 第三個 yAxis
{...} // 第四個 yAxis
],
dataZoom: [
{ // 第一個 dataZoom 組件
yAxisIndex: [0, 2] // 表示這個 dataZoom 組件控制 第一個 和 第三個 yAxis
,
{ // 第二個 dataZoom 組件
yAxisIndex: 3 // 表示這個 dataZoom 組件控制 第四個 yAxis
}
]
}
*/
// 指定圖表的配置項和數據
/*var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',//柱狀圖
data: [5, 20, 36, 10, 10, 20]
}]
};*/
//繪製餅圖
/*var option={
backgroundColor: '#2c343c',//設置全局的背景顏色
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},//設置全局的文本顏色
label: {//設置顯示標籤的背景顏色
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
}
},
labelLine: {//設置顯示標籤線的背景顏色
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
series : [{
name: '訪問來源',
type: 'pie',//餅狀圖
radius: '55%',
roseType: 'angle',//設置成南丁格爾圖,
visualMap: {//將數值的大小映射到餅圖的明暗度上
// 不顯示 visualMap 組件，只用於明暗度的映射
show: false,
// 映射的最小值爲 80
min: 80,
// 映射的最大值爲 600
max: 600,
inRange: {
// 明暗度的範圍是 0 到 1
colorLightness: [0, 1]
}
},
itemStyle: {
normal: { //設置陰影的大小，顏色，水平偏移，垂直偏移
// 設置扇形的顏色
//color: '#c23531',
// 陰影的大小
shadowBlur: 200,
// 陰影水平方向上的偏移
shadowOffsetX: 0,
// 陰影垂直方向上的偏移
shadowOffsetY: 0,
// 陰影顏色
shadowColor: 'rgba(0, 90,60, 180.5)'
},
emphasis: { //在鼠標移入時進行背景顯示
shadowBlur: 200,
shadowColor: 'rgba(50, 60, 30, 0.5)'
}
},
data:[
{value:400, name:'搜索引擎',
itemStyle: {
normal: {
color: 'c23531'//分別設置扇形區域的顏色
}
}
},
{value:335, name:'直接訪問',
itemStyle:{
normal: {
color: 'c23435'
}
}
},
{value:310, name:'郵件營銷',
itemStyle:{
normal: {
color: 'c23529'
}
}
},
{value:274, name:'聯盟廣告',
itemStyle:{
normal: {
color: 'c23528'
}
}
},
{value:235, name:'視頻廣告',
itemStyle:{
normal: {
color: 'c23527'
}
}
}
]
}]
};*/
//visualMap視覺映射
option = {
title : {
text: 'World Population (2010)',
subtext: 'from United Nations, Total population, both sexes combined, as of 1 July (thousands)',
sublink : 'http://esa.un.org/wpp/Excel-Data/population.htm',
left: 'center',
top: 'top'
},
tooltip : {
trigger: 'item',
formatter : function (params) {
var value = (params.value + '').split('.');
value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,')
+ '.' + value[1];
return params.seriesName + '<br/>' + params.name + ' : ' + value;
}
},
toolbox: {
show : true,
orient : 'vertical',
left: 'right',
top: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
visualMap: {
//type: 'continuous',//類型爲連續型。
min: 0,//指定 visualMapContinuous 組件的容許的最小值。'min' 必須用戶指定。[visualMap.min, visualMax.max] 造成了視覺映射的『定義域』。
max: 100,//指定 visualMapContinuous 組件的容許的最大值。'max' 必須用戶指定。[visualMap.min, visualMax.max] 造成了視覺映射的『定義域』。
//setOption 改變 min、max 時 range 的自適應
text:['High','Low'],//兩端的文本['High', 'Low']
range:[0, 100],//指定手柄對應數值的位置
calculable:true,//表示是否設置了拖拽用的手柄，若是爲false則拖拽結束時，才更新視圖。若是爲ture則拖拽手柄過程當中實時更新圖表視圖。
realtime: false,//表示拖拽時是否實時更新
inverse:false,//是否翻轉組件
precision:2,//展式的小數點精度
itemWidth:30,//長條的寬度，默認爲20
itemHeight:200,//長條的高度，默認是140
align:'left',//組件中手柄和文字的擺放位置'auto' (orient 爲 horizontal 時有效) 'left' 'right' （rient 爲 vertical 時有效。）'top' 'bottom'
textGap:20,//兩端文字與主體之間的距離
show:true,//是否顯示數據映射組件
dimension:1,//指定用數據的『哪一個維度』，映射到視覺元素上。『數據』即 series.data。 能夠把 series.data 理解成一個二維數組，
seriesIndex:1,//指定去哪一個系列的數據
hoverLink:true,//打開 hoverLink 功能時，鼠標懸浮到 visualMap 組件上時，鼠標位置對應的數值 在 圖表中對應的圖形元素，會高亮。
//反之，鼠標懸浮到圖表中的圖形元素上時，在 visualMap 組件的相應位置會有三角提示其所對應的數值。
//inRange: {//能定義目標系列（參見 visualMap-continuous.seriesIndex）視覺形式，也同時定義了 visualMap-continuous 自己的視覺樣式。
//視覺通道
//inRange 中，能夠有任意幾個的『視覺通道』定義（如 color、symbolSize 等）。這些視覺通道，會被同時採用。
//通常來講，建議使用 透明度（opacity） ，而非 顏色透明度（colorAlpha） （他們細微的差別在於，前者能也同時控制圖元中的附屬物（如 label）的透明度，然後者只能控制圖元自己顏色的透明度）。
//視覺映射的方式：支持兩種方式：線性映射、查表映射。
//線性映射 表示 series.data 中的每個值（dataValue）會通過線性映射計算，從 [visualMap.min, visualMap.max] 映射到設定的 [visual value 1, visual value 2] 區間中的某一個視覺的值（下稱 visual value）。
//查表映射 表示 series.data 中的全部值（dataValue）是可枚舉的，會根據給定的映射表查表獲得映射結果。
/*color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]//圖元的大小。*/
// 表示 目標系列 的視覺樣式。
//},
/*target: {
inRange: {/**
symbol: 圖元的圖形類別。
symbolSize: 圖元的大小。
color: 圖元的顏色。
colorAlpha: 圖元的顏色的透明度。
opacity: 圖元以及其附屬物（如文字標籤）的透明度。
colorLightness: 顏色的明暗度，參見 HSL。
colorSaturation: 顏色的飽和度，參見 HSL。
colorHue: 顏色的色調，參見 HSL。
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
}
},
// 表示 visualMap-continuous 自己的視覺樣式。
controller: {
inRange: {
symbolSize: [30, 100],
symbol:['circle', 'rect', 'diamond'],
color: ['#121122', 'rgba(3,4,5,0.4)', 'red']
}
},*/
type:'piecewise',//表示分段型視覺映射組件（visualMapPiecewise）
categories: [
'china GDP', 'higher GDP in China'
],
inRange: {
// visual value 能夠配成 Object：
color: {
'china GDP': 'red',
'higher GDP in China': 'black',
'': 'green' // 空字串，表示除了'Warden'、'Demon Hunter'外，都對應到 'green'。
}/*,
// visual value 也能夠只配一個單值，表示全部都映射到一個值，如：
color: 'green',
// visual value 也能夠配成數組，這個數組須和 categories 數組等長，
// 每一個數組項和 categories 數組項一一對應：
color: ['red', 'black']*/
},
color: ['orangered','yellow']
},
series : [
{
name: 'china GDP',
type: 'map',
mapType: 'china',
//roam: true,
itemStyle:{
emphasis:{label:{show:true}}
},
data:[
{name: "咸陽", value: 43},
{name: "銅川", value: 44}
]
},{
name: 'higher GDP in China',
type: 'map',
mapType: 'china',
//roam: true,
itemStyle:{
emphasis:{label:{show:true}}
},
data:[
{name: "東營", value: 62},
{name: "牡丹江", value: 63},
{name: "遵義", value: 63},
{name: "紹興", value: 63},
{name: "揚州", value: 64},
{name: "常州", value: 64},
{name: "濰坊", value: 65}
]
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
相關文章
- 1. eCharts製作數據報表
- 2. 潤乾報表製作echarts地圖
- 3. ECharts製作報表模板--.NET
- 4. 24、echarts做報表
- 5. Echarts集裝報表
- 6. javaweb做Echarts報表
- 7. ECharts報表的使用
- 8. echarts 數據統計報表
- 9. Echarts的圖表製作
- 10. 圖形報表echarts的使用2--柱狀圖
- 更多相關文章...
- • ionic 列表操作 - ionic 教程
- • Thymeleaf擴展2(Say Hello) - Thymeleaf 教程
- • RxJava操作符（四）Combining
- • RxJava操作符（十）自定義操作符
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. eCharts製作數據報表
- 2. 潤乾報表製作echarts地圖
- 3. ECharts製作報表模板--.NET
- 4. 24、echarts做報表
- 5. Echarts集裝報表
- 6. javaweb做Echarts報表
- 7. ECharts報表的使用
- 8. echarts 數據統計報表
- 9. Echarts的圖表製作
- 10. 圖形報表echarts的使用2--柱狀圖