話不多說，老規矩，先上圖，實現echarts實現散點圖，x軸數據為時間年月日。
實現代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>五分鍾上手之散點圖</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div style="height: 500px;width: 1000px;" id="Scatter"></div>
<script type="text/javascript"> $(document).ready(function() { var MyScatter = echarts.init(document.getElementById('Scatter')); var data = [ ['2012-03-01', 1, "翻身" ], [ '2013-06-01', 0.5, "沒翻身" ], [ '2017-03-02', 0.5, "翻身" ] ]; var textStyle = { color: '#333', fontStyle: 'normal', fontWeight: 'normal', fontFamily: '微軟雅黑', fontSize: 14, }; option = { xAxis: { type: 'time', name: '時間軸', }, yAxis: { type: 'value', name: '次數值', max: 1, min: 0, }, series: [{ name: '', data: data, type: 'scatter', symbolSize: 40 }] }; MyScatter.setOption(option); }); </script>
</body>
</html>
echarts學習過程中，也會遇到很多坑，要不斷的進行試驗和鑽研，才會發現其中的奧妙，下午去了echarts官網看了一遍參數文檔，收獲頗豐。另外，附上一副散點圖所有參數的詳解。
<!-- 1、首先需要下載包echarts.js，然后引入該包 -->
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<!--引入 ECharts 文件-->
<script src="echarts.js"></script>
</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')); //第二步構造數據 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)]); }; //3、配置option項 //第三步就是使用echarts的option進行參數的配置 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 防止標簽溢出容器。 }, //X軸 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 } }, //Y軸 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 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 } ] }; // 使用剛指定的配置項和數據顯示圖表 myChart.setOption(option); </script>
</body>
</html>
原文作者：祈澈姑娘技術博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，愛編程，愛運營，愛折騰。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。關注「編程微刊」公眾號 ，在微信后台回復「領取資源」，獲取IT資源300G干貨大全。公眾號回復“1”，拉你進程序員技術討論群