【前端圖表】echarts實現散點圖x軸時間軸

阿新 • • 發佈：2019-02-11

// 基於準備好的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);

【前端圖表】echarts實現散點圖x軸時間軸

【前端圖表】echarts實現散點圖x軸時間軸

【前端筆試】JavaScript實現字串全排列

實戰SSM_O2O商鋪_40【前端展示】首頁輪播圖和一級商鋪View層的實現

【前端筆記】jquery實現的動畫小遊戲

【資料結構】中實現一個位圖

Echarts特效散點圖全解

python3使用matplotlib繪製散點圖,並標註圖例,軸

【前端統計圖】echarts多條折線圖和橫柱狀圖實現

利用echarts highcharts 實現自定義地圖關系圖效果側邊3D柱形圖餅圖散點圖

echarts圖表tooltip浮動框顯示單位——散點圖

【eCharts】eCharts實現中國地圖熱力地圖分佈

【112】用python畫散點圖和直線圖的小例子

【matplotlib】散點圖（scatter）氣泡圖

【前端動畫】實現動畫的6種方式

【數字的視覺化：python畫圖之散點圖sactter函式詳解】

【Pandas + Matplotlib】初體驗：讀取資料檔案 + 繪製資料散點圖

【重點突破】—— Echarts圖表的介紹和使用

matplotlib【6】--散點圖

【python 散點圖】美觀畫時間序列散點圖

【前端筆記】使用jquery實現簡單的投票功能

【前端圖表】echarts實現散點圖x軸時間軸

相關推薦