Echarts制作泊松分布图，并加临界线

随着项目的深入，利用Echarts制作的图表的需求逐渐增多。现记录一下，Echarts制作泊松分布图的过程。
1.直接上效果图:

2.泊松分布：

https://blog.csdn.net/ccnt_2012/article/details/81114920

3.Echarts关键代码：

    const option = {title: {text: 'xxx结果',textAlign: 'left',show: true,textStyle: {color: '#FFFFFF',fontSize: '20',},left: '20%',top: '6%',}, toolbox: {feature: {dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar'] },restore: { show: true },saveAsImage: { show: true },},},yAxis: [{type: 'value',// 显示分割线splitLine: {show: true,lineStyle: {color: 'rgba(255,255,255,0.50)',type: 'solid',},},// 隐藏坐标轴轴线axisLine: {show: true,},axisLabel: {interval: 0,color: '#FFFFFF',fontSize: '10%',},// 隐藏刻度线axisTick: {show: true,},name: 'xxx',nameTextStyle: {color: '#FFFFFF',fontSize: '12',align: 'left',},},{type: 'value',min: 0,max: 0.25,interval: 0.025,axisLabel: {formatter: '{value}',color: '#FFFFFF',fontSize: '10%',},}],xAxis: {name: 'xxx',nameTextStyle: {color: '#FFFFFF',fontSize: '12',align: 'left',},type: 'category',splitLine: {show: false,},axisLabel: {// show: false,interval: 0,color: '#FFFFFF',fontSize: '9',},// 隐藏刻度线axisTick: {show: false,},data: ['1°', '2°', '3°', '4°', '5°', '6°', '7°', '8°', '9°', '10°', '11°', '12°', '13°', '14°', '15°', '16°', '17°'],//x轴数组值},series: [{data: props.y,//y轴数组值，type: 'bar',itemStyle: {color: 'rgba(108, 200, 205, 1)',},barWidth: ' 25%',markLine : {symbol:'none',/*symbol:"none",               //去掉警戒线最后面的箭头label:{position:"end"   ,       //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束 },*/data : [{silent:false,             //鼠标悬停事件  true没有，false有lineStyle:{               //警戒线的样式  ，虚实  颜色type:'solid',color:'#CC3333',},label:{position:'end',color:'#CCFF66',fontSize: '14px',formatter:'显著性α=0.01;临界点=13°',},xAxis:'13°',         // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值},],},},{type: 'line',yAxisIndex: 1,itemStyle: {color: '#FFFFFF',},data: props.y,  //y轴数组值，},],　grid: {top: 100,bottom: 0,left: '5%',containLabel: true,height: '60%',width: '90%',},tooltip: {show: true,},} as EChartsOptionechart.setOption(option)

Echarts制作泊松分布图，并加临界线相关推荐

利用Echarts制作地图（一）
Echarts作为一个前端可视化工具,支持地图图表的展示.从本篇开始,将用三篇文章说明如何利用echats制作自定义区域的单图例.多图例及动态加载地图所需数据. Echarts支持 js 格式与 g ...
使用Echarts制作散点图(Excel导入数据方式)
2019独角兽企业重金招聘Python工程师标准>>> Echarts相当于一款JS插件,可以制作出绚丽多彩的图表,其支持制作的图表类型和可以使用的样式都非常丰富.本文以Echart ...
Echarts制作态势图、热点图、轨迹图，使用百度底图，地图下钻
记录最近使用echarts制作地图的过程及部分代码: 其中在网络上借鉴了不少优秀的源码,在此感谢他们的开源精神. 先看效果: (一)态势图.热点图.轨迹图及全屏功能全屏效果: (二)改普通地图为百度 ...
使用百度echarts制作可视化大屏
先看一下效果图(部分) 我们现在就来完成这个第一个环形进度条. 1.下载百度echarts和jquery,添加到你的页面中: <script language="javascript& ...
使用百度echarts制作可视化大屏——最终效果和动态数据刷新
最终效果如下图: 接下来就是数据动态刷新了,这个没什么好说的,就是一个$.post的事,传递一个json给自定义的refresh函数就行了. $.post(url,null,function(d){ ...
echarts制作饼状图如何设置不同类别之间有一定间隔？
解决echarts饼状图不同类之间有一定间隔用echarts制作饼状图时,为了有利于区分不同类别,一般通过设置不同的颜色代表不同的类别即可,但为了进一步体现不同类别之间的区分,可通过设置不同类别之间 ...
R语言----制作数据分布图（直方图+概率密度曲线）
R语言--制作group1和group2的分布图并输出tiff格式300dpi保存制作分布图我选择的是制作直方图+概率密度曲线~ library(ggplot2) data<-read.csv ...
在jsp中使用ECharts制作图表
ECharts插件的下载地址http://echarts.baidu.com/download.html 先来看看我们要达到的效果!后面直接上代码,如下图: 下面直接贴上代码我们这里写的都是些死的数 ...
怎么制作区域分布图，怎么做网点分布图
制作区域分布图,这样的分布图该怎么做?现在越来越多的公司想做智能化转型,希望通过数据分析和数据可视化效果来挖掘公司内部数据更多的价值,辅助领导们做运营决策.数据可视化的展示方式有很多种,包含各种图表. ...
vb wps 链接单元格_使用VB快速制作WPS的COM加载项
使用VB快速制作WPS的COM加载项 2018-09-14 1.新建工程,选择ActiveX Dll. 2.工程.引用.选择Kingsoft Add-In Designer.Kingsoft Offi ...

Echarts制作泊松分布图，并加临界线

Echarts制作泊松分布图，并加临界线相关推荐

最新文章

热门文章