Echarts箱線圖
阿新 • • 發佈：2019-01-04
<!DOCTYPE HTML> <html> <head> <style type="text/css"> #main{ height: 500px; border: 1px red solid; width: 100%; } </style> <script type="text/javascript" src="E:/IdeaWorkSpace/MyLib/js/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="E:/IdeaWorkSpace/MyLib/js/echarts.min.js"></script> <script type="text/javascript" src="E:/IdeaWorkSpace/MyLib/js/dataTool.js"></script> <script type="text/javascript"> $(function() { debugger // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); var data = echarts.dataTool.prepareBoxplotData([ [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960], [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800], [880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840], [890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780], [890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870] ]); var testData = [[-4450.50,25041.00,31060.00,38768.00,59358.50],[-268704.00,321546.00,399121.00,715046.00,1305296.00],[514960.00,514960.00,514960.00,514960.00,514960.00]]; debugger var a = data.boxData console.log(a) option = { title: [{ text: '專案: 鉀', left: 'center', textStyle: { fontSize: 20, color: 'green', }, }, { text: '批號', //borderColor: '#999', //borderWidth: 1, textStyle: { fontSize: 14 }, left: 'center', top: '94%' }, { text: 'upper: Q3 + 1.5 * IRQ \nlower: Q1 - 1.5 * IRQ', borderColor: '#999', borderWidth: 1, textStyle: { fontSize: 14 }, left: '10%', top: '90%' } ], tooltip: { trigger: 'item', //觸發型別,資料項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。 axisPointer: { //指示器型別。 type: 'shadow' } }, grid: { //直角座標系網格。 //show: true,//default: false left: '10%', right: '10%', bottom: '15%', //borderWidth: 1, //borderColor: '#000', }, xAxis: { //X軸 type: 'category', //'category' 類目軸，適用於離散的類目資料，為該型別時必須通過 data 設定類目資料。 //data: data.axisData, data: ['週一', '週二', '週三', '週四', '週五'], boundaryGap: true, //類目軸中 boundaryGap 可以配置為 true 和 false。預設為 true，這時候刻度只是作為分隔線，標籤和資料點都會在兩個刻度之間的帶(band)中間。 nameGap: 30, //座標軸名稱與軸線之間的距離。 splitArea: { //座標軸在 grid 區域中的分隔區域，預設不顯示。 //show: true, //是否顯示分隔區域 //interval: 'auto', //座標軸分隔區域的顯示間隔，在類目軸中有效 }, axisLabel: { //座標軸刻度標籤的相關設定。 //formatter: 'expr {value}', // 使用字串模板，模板變數為刻度預設標籤 {value} show: true, //是否顯示刻度標籤。 //interval: 'auto', //座標軸刻度標籤的顯示間隔，在類目軸中有效。 color: 'black', }, splitLine: { //座標軸在 grid 區域中的分隔線。 show: true, //是否顯示分隔線。預設數值軸顯示，類目軸不顯示。 lineStyle: { //分隔線樣式 type: 'dashed', //分隔線線的型別。 }, }, axisLine: { //座標軸軸線相關設定。 show: true, //是否顯示座標軸軸線。 //onZero:false,//X 軸或者 Y 軸的軸線是否在另一個軸的 0 刻度上，只有在另一個軸為數值軸且包含 0 刻度時有效。 //symbol:'arrow', //軸線兩邊的箭頭, 預設不顯示箭頭，即 'none' lineStyle: { //軸線樣式 width: 2, color: 'green', //opacity: 1, //圖形透明度。支援從 0 到 1 的數字，為 0 時不繪製該圖形。 }, }, axisTick: { //座標軸刻度相關設定。 show: true, //是否顯示座標軸刻度。 //alignWithLabel: true,//類目軸中在 boundaryGap 為 true 的時候有效，可以保證刻度線和標籤對齊,default: false } }, yAxis: { //y軸 type: 'value', splitArea: { //座標軸在 grid 區域中的分隔區域，預設不顯示。 //show: true }, axisLabel: { //座標軸刻度標籤的相關設定。 //formatter: 'expr {value}', // 使用字串模板，模板變數為刻度預設標籤 {value} show: true, //是否顯示刻度標籤。 //interval: 'auto', //座標軸刻度標籤的顯示間隔，在類目軸中有效。 color: 'black', }, splitLine: { show: true, lineStyle: { type: 'dashed' }, }, axisLine: { show: true, //是否顯示座標軸軸線。 //onZero:false,//X 軸或者 Y 軸的軸線是否在另一個軸的 0 刻度上，只有在另一個軸為數值軸且包含 0 刻度時有效。 //symbol:'arrow', //軸線兩邊的箭頭 lineStyle: { width: 2, color: 'green', }, }, }, series: [ { name: 'boxplot',//箱形圖 type: 'boxplot', //legendHoverLink: true, //是否啟用圖例 hover 時的聯動高亮。 //hoverAnimation: false, //是否開啟 hover 在 box 上的動畫效果。 itemStyle: { //盒須圖樣式。 //color: '#fff', //boxplot圖形的顏色。 預設從全域性調色盤 option.color 獲取顏色 borderColor: 'blue', //boxplot圖形的描邊顏色。支援的顏色格式同 color，不支援回撥函式。 }, data: testData, tooltip: { //注意：series.tooltip 僅在 tooltip.trigger 為 'item' 時有效。 formatter: function(param) { /* 第一個引數 param 是 formatter 需要的資料集。 格式如下： { //元件型別 componentType: 'series', // 系列型別 seriesType: string, // 系列在傳入的 option.series 中的 index seriesIndex: number, // 系列名稱 seriesName: string, // 資料名，類目名 name: string, // 資料在傳入的 data 陣列中的 index dataIndex: number, // 處理過的資料項 data: Object | Array, // 處理過的資料項 value: number | Array, // 資料圖形的顏色 color: string, // 餅圖的百分比 percent: number, } */ return [ '類目名 ' + param.name + ': ', 'upper: ' + param.data[5], 'Q3: ' + param.data[4], 'median: ' + param.data[3], 'Q1: ' + param.data[2], 'lower: ' + param.data[1] ].join('<br/>') } } }, { name: '異常值',//異常值 type: 'scatter',//分散 data: data.outliers } ] }; //myChart.showLoading(); //資料載入完之前先顯示一段簡單的loading動畫 // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); }); </script> </head> <body> <div id="main"> </div> </body> </html>
dataTool.js內容如下
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("echarts")):"function"==typeof define&&define.amd?define(["echarts"],t):"object"==typeof exports?exports.dataTool=t(require("echarts")):(e.echarts=e.echarts||{},e.echarts.dataTool=t(e.echarts))}(this,function(e){return function(e){function t(o){if(r[o])return r[o].exports;var n=r[o]={exports:{},id:o,loaded:!1};return e[o].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){var o;o=function(e){var t=r(1);return t.dataTool={version:"1.0.0",gexf:r(5),prepareBoxplotData:r(6)},t.dataTool}.call(t,r,t,e),!(void 0!==o&&(e.exports=o))},function(t,r){t.exports=e},,,,function(e,t,r){var o;o=function(e){"use strict";function t(e){var t;if("string"==typeof e){var r=new DOMParser;t=r.parseFromString(e,"text/xml")}else t=e;if(!t||t.getElementsByTagName("parsererror").length)return null;var i=l(t,"gexf");if(!i)return null;for(var u=l(i,"graph"),s=o(l(u,"attributes")),c={},f=0;f<s.length;f++)c[s[f].id]=s[f];return{nodes:n(l(u,"nodes"),c),links:a(l(u,"edges"))}}function o(e){return e?s.map(u(e,"attribute"),function(e){return{id:i(e,"id"),title:i(e,"title"),type:i(e,"type")}}):[]}function n(e,t){return e?s.map(u(e,"node"),function(e){var r=i(e,"id"),o=i(e,"label"),n={id:r,name:o,itemStyle:{normal:{}}},a=l(e,"viz:size"),s=l(e,"viz:position"),c=l(e,"viz:color"),f=l(e,"attvalues");if(a&&(n.symbolSize=parseFloat(i(a,"value"))),s&&(n.x=parseFloat(i(s,"x")),n.y=parseFloat(i(s,"y"))),c&&(n.itemStyle.normal.color="rgb("+[0|i(c,"r"),0|i(c,"g"),0|i(c,"b")].join(",")+")"),f){var p=u(f,"attvalue");n.attributes={};for(var v=0;v<p.length;v++){var d=p[v],g=i(d,"for"),h=i(d,"value"),b=t[g];if(b){switch(b.type){case"integer":case"long":h=parseInt(h,10);break;case"float":case"double":h=parseFloat(h);break;case"boolean":h="true"==h.toLowerCase()}n.attributes[g]=h}}}return n}):[]}function a(e){return e?s.map(u(e,"edge"),function(e){var t=i(e,"id"),r=i(e,"label"),o=i(e,"source"),n=i(e,"target"),a={id:t,name:r,source:o,target:n,lineStyle:{normal:{}}},u=a.lineStyle.normal,s=l(e,"viz:thickness"),c=l(e,"viz:color");return s&&(u.width=parseFloat(s.getAttribute("value"))),c&&(u.color="rgb("+[0|i(c,"r"),0|i(c,"g"),0|i(c,"b")].join(",")+")"),a}):[]}function i(e,t){return e.getAttribute(t)}function l(e,t){for(var r=e.firstChild;r;){if(1==r.nodeType&&r.nodeName.toLowerCase()==t.toLowerCase())return r;r=r.nextSibling}return null}function u(e,t){for(var r=e.firstChild,o=[];r;)r.nodeName.toLowerCase()==t.toLowerCase()&&o.push(r),r=r.nextSibling;return o}var s=r(1).util;return{parse:t}}.call(t,r,t,e),!(void 0!==o&&(e.exports=o))},function(e,t,r){var o;o=function(e){var t=r(7),o=r(1).number;return function(e,r){r=r||[];for(var n=[],a=[],i=[],l=r.boundIQR,u=0;u<e.length;u++){i.push(u+"");var s=o.asc(e[u].slice()),c=t(s,.25),f=t(s,.5),p=t(s,.75),v=p-c,d="none"===l?s[0]:c-(null==l?1.5:l)*v,g="none"===l?s[s.length-1]:p+(null==l?1.5:l)*v;n.push([d,c,f,p,g]);for(var h=0;h<s.length;h++){var b=s[h];if(b<d||b>g){var x=[u,b];"vertical"===r.layout&&x.reverse(),a.push(x)}}}return{boxData:n,outliers:a,axisData:i}}}.call(t,r,t,e),!(void 0!==o&&(e.exports=o))},function(e,t,r){var o;o=function(e){return function(e,t){var r=(e.length-1)*t+1,o=Math.floor(r),n=+e[o-1],a=r-o;return a?n+a*(e[o]-n):n}}.call(t,r,t,e),!(void 0!==o&&(e.exports=o))}])});