ecahrts箱線圖假正態分佈圖
阿新 • • 發佈：2019-01-10
<!DOCTYPE HTML> <html> <head> <style type="text/css"> #main{ height: 500px; border: 1px red solid; width: 100%; } #main1{ 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() { // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); var testData = [[-4450.50,25041.00,31060.00,38768.00,59358.50]]; option = { title: [{ text: '專案: 鉀', left: 'center', textStyle: { fontSize: 20, color: 'green', }, }, { 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: ['idx1'], 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/>') } } } ] }; //myChart.showLoading(); //資料載入完之前先顯示一段簡單的loading動畫 // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); var myChart = echarts.init(document.getElementById('main1')); //實際操作中 用的是 u 2u 3u 點 並將線轉成平滑曲線 y值為定值 var yArr = [0,15,0]; var xArr = [0,5,10]; var option = { tooltip: { trigger: 'axis' }, grid: { //直角座標系網格。 //show: true,//default: false left: '15%', right: '15%', bottom: '23%', //borderWidth: 1, //borderColor: '#000', }, xAxis: { name:'量', type: 'category', boundaryGap: false, data: xArr }, yAxis: { name:'值', type: 'value', axisLabel: { formatter: '{value}' } }, series: [ { name:'值', smooth:true, type:'line', color:'#4682B4', data: yArr, } ] }; myChart.setOption(option); }); </script> </head> <body> <div id="main"> </div> <div id="main1"></div> </body> </html>
