Echarts数据可视化 第4章 Echarts可视化图 4.9 箱线图
Echarts数据可视化
文章目录
- Echarts数据可视化
- 第4章 Echarts可视化图
- 4.9 箱线图
Echarts数据可视化：入门、实战与进阶
第4章 Echarts可视化图
4.9 箱线图
箱线图是一种表示连续性数据分布情况的可视化图。
箱线图的echarts.dataTool.prepareBoxplotData() 方法能预处理箱线图的各种数据，例如各种四分位数、上下限、异常值等，所以在绘制箱线图时调用其处理完的参数值即可。
举个栗子：
DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>箱线图title><script src="../js/echarts.js">script>
head>
<body>
<div id="main" style="width: 600px;height:400px;">div>
<script type="text/javascript">// 基于准备好的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]]);option = {title: [{text: '箱线图',left: 'center',},{text: 'upper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR',borderColor: '#999',//文字框边界颜色borderWidth: 1,//文字框边界宽度textStyle: {fontSize: 12//该部分文字大小},left: '10%',//该部分文字到左部的百分比位置top: '90%'//该部分文字到顶部的百分比位置}],tooltip: {trigger: 'item',axisPointer: {type: 'shadow'//鼠标悬停在箱上会显示阴影}},grid: {left: '10%',//可视化网格距离左部百分比位置right: '10%',//可视化网格距离右部百分比位置bottom: '15%'//可视化网格距离底部百分比位置},xAxis: {type: 'category',data: data.axisData,//使用data处理后的axisData数据axisLabel: {formatter: '实验 {value}'//x轴名称模板}},yAxis: {type: 'value',name: '',splitArea: {show: true//y轴网格间阴影区分显示}},series: [{type: 'boxplot',data: data.boxData,//使用data的处理后的boxData数据tooltip: {//以下是设置tooltip的显示数据和显示格式formatter: function (param) {return ['实验 ' + param.name + ': ','上限: ' + param.data[5],'上四分位数: ' + param.data[4],'中位数: ' + param.data[3],'下四分位数: ' + param.data[2],'下限: ' + param.data[1]].join('
');}}},{name: 'outlier',type: 'scatter',//使用散点图显示异常值data: data.outliers//异常值数据}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
script>
body>
html>
按照老师的写法，渲染的时候报错了
这个函数没找到
在官方的可视化工具中也出现了编译错误的问题【这里笔者给出一种解决办法】
DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>箱线图title><script src="../js/echarts.js">script><script src="../dist/extension/dataTool.js">script>
head>
<body>
<div id="main" style="width: 600px;height:400px;">div>
<script src="../js/require.js">script>
<script type="text/javascript">// 基于准备好的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]]);option = {title: [{text: '箱线图',left: 'center',},{text: 'upper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR',borderColor: '#999',//文字框边界颜色borderWidth: 1,//文字框边界宽度textStyle: {fontSize: 12//该部分文字大小},left: '10%',//该部分文字到左部的百分比位置top: '90%'//该部分文字到顶部的百分比位置}],tooltip: {trigger: 'item',axisPointer: {type: 'shadow'//鼠标悬停在箱上会显示阴影}},grid: {left: '10%',//可视化网格距离左部百分比位置right: '10%',//可视化网格距离右部百分比位置bottom: '15%'//可视化网格距离底部百分比位置},xAxis: {type: 'category',data: data.axisData,//使用data处理后的axisData数据axisLabel: {formatter: '实验 {value}'//x轴名称模板}},yAxis: {type: 'value',name: '',splitArea: {show: true//y轴网格间阴影区分显示}},series: [{type: 'boxplot',data: data.boxData,//使用data的处理后的boxData数据tooltip: {//以下是设置tooltip的显示数据和显示格式formatter: function (param) {return ['实验 ' + param.name + ': ','上限: ' + param.data[5],'上四分位数: ' + param.data[4],'中位数: ' + param.data[3],'下四分位数: ' + param.data[2],'下限: ' + param.data[1]].join('
');}}},{name: 'outlier',type: 'scatter',//使用散点图显示异常值data: data.outliers//异常值数据}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
script>
body>
html>
在官方的源码中，有一个extension文件夹
我们需要做的就是把这个引入我们项目中
OK， 现在的绘制结果
这样就可以了。
看看这段代码，在绘制箱线图之前，先对数据进行了处理得到 data，然后分别绘制箱线图和异常值的散点图这两部分。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！