100字范文 > 【可视化】盒须图散点图柱状图折线图饼图

【可视化】盒须图散点图柱状图折线图饼图

时间：2024-07-02 04:23:03

相关推荐

【可视化】盒须图散点图柱状图折线图饼图

文章目录

盒须图绘制方法相关术语dataTool 下载精简程序散点图柱状图折线图饼图

盒须图

用作显示一组数据分散情况资料的统计图，用于反映原始数据分布的特征

绘制方法

箱线图的绘制方法是：先找出一组数据的上边缘、下边缘、中位数和两个四分位数；然后，连接两个四分位数画出箱体；再将上边缘和下边缘与箱体相连接，中位数在箱体中间。

dataTool 下载

链接：/s/1Wzd0fxbNLXShrwa7f0w3Dw

提取码：yjes

精简程序

<!DOCTYPE html><html><head><meta charset="utf-8"><title>盒须图</title><script src="../js/echarts.js"></script><script src="../js/dataTool.js"></script></head><body><div id="scatter" style="width: 600px;height: 400px;"></div></body><script>/* 盒须图简介：用作显示一组数据分散情况资料的统计图箱线图的绘制方法是：先找出一组数据的上边缘、下边缘、中位数和两个四分位数；然后，连接两个四分位数画出箱体；再将上边缘和下边缘与箱体相连接，中位数在箱体中间。盒须图的几个相关术语简介：*//* 这个是找到盒须图用echart.init(dom,"主题")初始化*/var scatter = echarts.init(document.querySelector("#scatter"),'light');/* 这里是要处理的数据 ,使用到了 dataTool 工具包*/var data = echarts.dataTool.prepareBoxplotData([[850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930,750,650, 760, 810, 1000, 1000, 960, 960],[850, 740, 900, 1070, 930, 850, 950, 980, 850, 740, 900, 1070, 930, 850, 950, 980,40],[110,120,140,160,180,200,220,240,800]]);/* 表格的设置 */var option = {/* 表格标题 */title: [{text: '盒须图精简'}],tooltip: {trigger: 'item',axisPointer: {type: 'shadow'}},/* x轴的属性 */xAxis: {data: data.axisData,axisLabel: {/* 字符串格式化 */formatter: 'expr {value}'}},yAxis: {},/* 这里会放置一些重要的参数，要重点背 */series: [/* 正常数据 */{name: 'boxplot',type: 'boxplot',data: data.boxData},/* 异常的数据处理 */{name: 'outlier',type: 'scatter',data: data.outliers}]};/* 设置操作，把数据灌输到图标中，这步是必须的!!!! */scatter.setOption(option);</script></html>

散点图

<!DOCTYPE html><html><head><meta charset="utf-8"><title>ECharts</title><script src="../js/echarts.js"></script></head><body><div id="main" style="width: 600px;height:400px;"></div></body><script>// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title:{text:"散点图"},xAxis: {},yAxis: {},series: [{symbolSize: 20,data: [[10.0, 8.04],[8.0, 6.95],[13.0, 7.58],[9.0, 8.81],[11.0, 8.33],[14.0, 9.96],[6.0, 7.24],[4.0, 4.26],[12.0, 10.84],[7.0, 4.82],[5.0, 5.68]],type: 'scatter'}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></html>

柱状图

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="../js/echarts.js"></script></head><body><div id="bar" style="width: 600px;height: 400px;"></div></body><script>var bar = echarts.init(document.querySelector("#bar"));var option = {title:{text:"bar"},xAxis:{data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis:{},series:[{data:[5,20,40,60,50,50],type:"bar"}]}bar.setOption(option);</script></html>

折线图

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>折线图</title><script src="../js/echarts.js"></script></head><body><div id="line" style="width: 600px;height:400px;"></div></body><script>var line = echarts.init(document.getElementById('line'));var option = {xAxis: {data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line'}]};// 使用刚指定的配置项和数据显示图表。line.setOption(option);</script></html>

饼图

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>饼状图</title><script src="../js/echarts.js"></script></head><body><div id="pie" style="width: 600px;height:400px;"></div></body><script>var pie = echarts.init(document.getElementById('pie'));var option = {series: [{data: [{value:820, name:"first"},{value:40, name:"second"},{value:300, name:"third"},{value:850, name:"forth"}],type: 'pie'}]};pie.setOption(option);</script></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。