Echarts箱线图
<!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))}])});