1、今天就來講一講echarts的使用
使用步驟
（1）首先需要下載包echarts.js，然后引入該包,
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.js"></script>//echarts不需要依賴jquery
</header>
(2) 首先來一個散點圖來做列子吧，具體的樣式就是如下所示的樣子
下邊看一看具體的配置代碼來着
//第一步調用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 } ] };
2、下邊來一個中國地圖，不知道為什么數據沒有加上去
<!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>