echart画图

最新推荐文章于 2021-09-28 10:43:12 发布
最新推荐文章于 2021-09-28 10:43:12 发布
阅读量758 收藏 1
点赞数
分类专栏： web前端 文章标签： javascript 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yyt593891927/article/details/107298926
版权

echart常用于web画图，官网上面有很多例子，具体查看：https://echarts.apache.org/examples/zh/index.html。今天介绍我在项目中用到的图–正太分布图。

一、定义画图数据模型

  • xAxis里面定义了一个category类型的横坐标
  • yAxis里面定义了两个value类型的纵坐标
  • series里面定义了一个bar类型（柱状图）数据，一个line类型（正太分布曲线）数据
option = {
    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: [{
        type: 'value',
		splitNumber: 10,
		max: max,
		min: 0,
		splitLine:{
			show:false
		}
    },{
        type: 'value',
		splitNumber: 10,
		max: maxLine,
		min: 0,
		splitLine:{
			show:false
		}
    }],
    series: [{
        data: [],
        type: 'bar',
		barCategoryGap:1,
		yAxisIndex: 0,
		itemStyle: {
                   normal: {
                       label: {
                           show: true,		//开启显示
                           position: 'top',	//在上方显示
                           textStyle: {	    //数值样式
                               color: 'black',
                               fontSize: 16
                           }
                       }
                   }
               }
    },{
        data: [],
        type: 'line',
		smooth:true,
		yAxisIndex: 1
    }]
};

二、定义正太分布计算函数getNormalData
参数说明：

  • data：画图的横坐标，浮点数数组
  • upper：画图数据的上限，浮点数
  • lower：画图数据的下限，浮点数
  • count：截距，表示分成多个给柱子，值越大，正太曲线越平滑
var xArr = [];
var yArr = [];
var yArrLine = [];
var mean = 0;
var stdev = 0; 
var max = 0.0;
var maxLine = 0.0;
var low = 0;
var up = 0;
function getNormalData(data, upper, lower, count) {
	var inter = (upper-lower)/(count-1);
	console.log('inter=', inter);
	var tmpxArr = [];
	for (var i=0; i<count; i++) {
		if (i == count-1) {
			tmpxArr.push(upper);
		} else {
			tmpxArr.push(lower+i*inter);
		}
	}
	console.log('tmpxArr=', tmpxArr);
	var sum = 0.0;
	for (var i=0; i<data.length; i++) {
		sum += parseFloat(data[i]); 
	}
	mean = sum/data.length;
	
	var sumSqrt = 0.0;
	for (var i=0; i<data.length; i++) {
		sumSqrt += Math.pow(parseFloat(data[i])-mean, 2);    
	}
	stdev = Math.sqrt(sumSqrt/(data.length-1));
	
	low = mean - 3 * stdev;
	up = mean + 3 * stdev;
	
	for(var i=0; i<tmpxArr.length; i++){
		if (tmpxArr[i] >= low && tmpxArr[i] <= up) {
			xArr.push(tmpxArr[i]);
			yArr.push(0);
		}
	}
	
	for (var i=0; i<data.length; i++) {
		for (var j=0; j<xArr.length; j++) {
			if (j == 0) {
				if (data[i] <= xArr[j]) {
					yArr[j] = yArr[j] + 1;
				}
			} else {
				if (xArr[j-1] <= data[i] && data[i] < xArr[j]) {
					yArr[j] = yArr[j] + 1;
				}
			}
		}		
	}
	
	for(var j=0; j<xArr.length; j++){
 		var res = fun(xArr[j],mean,stdev).toFixed(2);
 		yArrLine.push(res);		
 	}
	
	max = yArr[0];
	maxLine = yArrLine[0];
	for(var i=0; i<yArr.length; i++){
		if (max < yArr[i]) {
			max = yArr[i];
		}
		
		if (maxLine < yArrLine[i]) {
			maxLine = yArrLine[i];
		}
	}
}

function fun (x,u,a){
	return  (1 / Math.sqrt(2 * Math.PI) * a) * Math.exp( -1 * ((x-u) * (x-u)) / (2 * a * a));
}

三、构造画图数据

var spk_1_upper = 35.4;
var spk_1_lower = 0;
var W1_data = ["22.91","23.52","24.55","25.08","28.23","23.57","24.87","25.06","26.67","25.72","26.56","26.15","26.78","24.94","29.32","24.81","28.73","26.98","26.26","28.19","26.29","26.16","28.39","26.50","24.40","24.52","25.74","27.99","28.82","24.67","24.56","23.77","25.13","27.97","25.93","30.18","25.93","24.43","26.63","25.76","26.93","24.24","26.99","24.41","25.35","26.42","29.95","27.27","25.94","24.65","25.35","23.92","25.99","25.07","25.27","26.87","27.42","24.87","26.44","26.15","23.70","27.61","28.06","26.14","24.76","24.88","24.97","25.80","26.55","26.79","25.46","26.47","28.05","25.15","26.15","26.04","22.88","29.06","27.48","24.46","26.32","24.96","26.14","26.97","24.09","25.38","25.63","24.97","28.11","25.55","25.57","25.38","24.76","26.71","25.29","25.53","24.25","24.16","27.02","27.40","22.63","29.40","26.81","25.25","24.82","26.92","25.69","24.48","24.29","24.48","26.50","24.92","29.48","26.04","25.82","24.75","28.34","25.61","24.37","26.99","26.74","23.54","24.04","22.08","24.14","27.72","26.10","26.55","25.62","27.17","26.38","25.81","25.62","24.67","26.30","25.05","26.21","24.08","24.27","23.73","27.28","26.49","26.00","27.80","27.80","25.93","24.40","27.82","26.19","26.27","26.69","25.45","22.73","26.16","32.10","25.89","24.66","25.76","25.85","27.10","26.11","28.26","26.01","26.01","24.89","26.34","23.16","25.74","26.91","27.19","25.85","27.76","26.64","26.33","26.27","25.95","24.70","27.70","26.43","25.45","24.52","27.77","23.01","26.76","25.85","26.90","25.81","26.43","26.25","27.87","27.79","25.79","24.59","24.43","23.29","24.53","25.41","28.51","26.51","25.93"];

四、定义画图页面和函数

<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
       		if (option && typeof option === "object") {
				option['xAxis']['data'] = xArr;
				option['series'][0]['data'] = yArr;
				option['series'][1]['data'] = yArrLine;
			    myChart.setOption(option, true);
			}
       </script>
   </body>
</html>

效果图如下：
在这里插入图片描述
五、完整代码如下：

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
	   
var spk_1_upper = 35.4;
var spk_1_lower = 0;
var W1_data = ["22.91","23.52","24.55","25.08","28.23","23.57","24.87","25.06","26.67","25.72","26.56","26.15","26.78","24.94","29.32","24.81","28.73","26.98","26.26","28.19","26.29","26.16","28.39","26.50","24.40","24.52","25.74","27.99","28.82","24.67","24.56","23.77","25.13","27.97","25.93","30.18","25.93","24.43","26.63","25.76","26.93","24.24","26.99","24.41","25.35","26.42","29.95","27.27","25.94","24.65","25.35","23.92","25.99","25.07","25.27","26.87","27.42","24.87","26.44","26.15","23.70","27.61","28.06","26.14","24.76","24.88","24.97","25.80","26.55","26.79","25.46","26.47","28.05","25.15","26.15","26.04","22.88","29.06","27.48","24.46","26.32","24.96","26.14","26.97","24.09","25.38","25.63","24.97","28.11","25.55","25.57","25.38","24.76","26.71","25.29","25.53","24.25","24.16","27.02","27.40","22.63","29.40","26.81","25.25","24.82","26.92","25.69","24.48","24.29","24.48","26.50","24.92","29.48","26.04","25.82","24.75","28.34","25.61","24.37","26.99","26.74","23.54","24.04","22.08","24.14","27.72","26.10","26.55","25.62","27.17","26.38","25.81","25.62","24.67","26.30","25.05","26.21","24.08","24.27","23.73","27.28","26.49","26.00","27.80","27.80","25.93","24.40","27.82","26.19","26.27","26.69","25.45","22.73","26.16","32.10","25.89","24.66","25.76","25.85","27.10","26.11","28.26","26.01","26.01","24.89","26.34","23.16","25.74","26.91","27.19","25.85","27.76","26.64","26.33","26.27","25.95","24.70","27.70","26.43","25.45","24.52","27.77","23.01","26.76","25.85","26.90","25.81","26.43","26.25","27.87","27.79","25.79","24.59","24.43","23.29","24.53","25.41","28.51","26.51","25.93"];

var xArr = [];
var yArr = [];
var yArrLine = [];
var mean = 0;
var stdev = 0; 
var max = 0.0;
var maxLine = 0.0;
var low = 0;
var up = 0;
function getNormalData(data, upper, lower, count) {
	var inter = (upper-lower)/(count-1);
	console.log('inter=', inter);
	var tmpxArr = [];
	for (var i=0; i<count; i++) {
		if (i == count-1) {
			tmpxArr.push(upper);
		} else {
			tmpxArr.push(lower+i*inter);
		}
	}
	console.log('tmpxArr=', tmpxArr);
	var sum = 0.0;
	for (var i=0; i<data.length; i++) {
		sum += parseFloat(data[i]); 
	}
	mean = sum/data.length;
	
	var sumSqrt = 0.0;
	for (var i=0; i<data.length; i++) {
		sumSqrt += Math.pow(parseFloat(data[i])-mean, 2);    
	}
	stdev = Math.sqrt(sumSqrt/(data.length-1));
	
	low = mean - 3 * stdev;
	up = mean + 3 * stdev;
	
	for(var i=0; i<tmpxArr.length; i++){
		if (tmpxArr[i] >= low && tmpxArr[i] <= up) {
			xArr.push(tmpxArr[i]);
			yArr.push(0);
		}
	}
	
	for (var i=0; i<data.length; i++) {
		for (var j=0; j<xArr.length; j++) {
			if (j == 0) {
				if (data[i] <= xArr[j]) {
					yArr[j] = yArr[j] + 1;
				}
			} else {
				if (xArr[j-1] <= data[i] && data[i] < xArr[j]) {
					yArr[j] = yArr[j] + 1;
				}
			}
		}		
	}
	
	for(var j=0; j<xArr.length; j++){
 		var res = fun(xArr[j],mean,stdev).toFixed(2);
 		yArrLine.push(res);		
 	}
	
	max = yArr[0];
	maxLine = yArrLine[0];
	for(var i=0; i<yArr.length; i++){
		if (max < yArr[i]) {
			max = yArr[i];
		}
		
		if (maxLine < yArrLine[i]) {
			maxLine = yArrLine[i];
		}
	}
}

function fun (x,u,a){
	return  (1 / Math.sqrt(2 * Math.PI) * a) * Math.exp( -1 * ((x-u) * (x-u)) / (2 * a * a));
}

getNormalData(W1_data, spk_1_upper, spk_1_lower, 100);

console.log('low=', low);
console.log('up=', up);
console.log('max=', max);
console.log('maxLine=', maxLine);
console.log('mean=', mean);
console.log('stdev=', stdev);
console.log('xArr=', xArr);
console.log('yArr=', yArr);
console.log('yArrLine=', yArrLine);

var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: [{
        type: 'value',
		splitNumber: 10,
		max: max,
		min: 0,
		splitLine:{
			show:false
		}
    },{
        type: 'value',
		splitNumber: 10,
		max: maxLine,
		min: 0,
		splitLine:{
			show:false
		}
    }],
    series: [{
        data: [],
        type: 'bar',
		barCategoryGap:1,
		yAxisIndex: 0,
		itemStyle: {
                   normal: {
                       label: {
                           show: true,		//开启显示
                           position: 'top',	//在上方显示
                           textStyle: {	    //数值样式
                               color: 'black',
                               fontSize: 16
                           }
                       }
                   }
               }
    },{
        data: [],
        type: 'line',
		smooth:true,
		yAxisIndex: 1
    }]
};
;
if (option && typeof option === "object") {
	option['xAxis']['data'] = xArr;
	option['series'][0]['data'] = yArr;
	option['series'][1]['data'] = yArrLine;
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>
丁爸
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Echart画图
11-17
通过Echart实现画柱状图，是个很好理解的Demo,很容易入手
Echarts 画图（适用于新手）
秋水顽石
06-30 4372
引言 写论文的时候想要画一个好看的知识图谱，接触了echarts，在此记录一下从安装到使用的过程。 安装 可以参见菜鸟教程上的安装过程Echarts的三种安装方法，在此我使用的是第一种安装方法，就是下载一个.js文件，放在你的指定目录下，后期再编写.html文件的时候，导入js的路径，就是你的存放路径。使用浏览器打开对应的html文件，就可以看到效果了。 命令行生成：snapshot graph.html pdf 需要注意的问题：版本匹配 ...
echarts画图
john_ashley的博客
02-28 970
”明月如霜，好风如水，清景无限 “ 想画出最炫酷的图，用matplotlib还是很难的，不是无法完成，而是过于繁琐。之前也尝试过plotly画图，也是属于交互性的图，即可以保存成本地的html。先看一下echarts模板吧。 具体的网址： https://echarts.apache.org/examples/zh/index.html#chart-type-pie 壹 首先是，爬一点演示数据。 其实看到这个实时票房，你应该知道是动态加载的。不过咱们还是试一试，主要是我文远好久没玩selenium了。
echarts绘图
mapbar_front的博客
11-04 6101
1、echarts的基本使用 第一步、初始化一个具有宽高的盒子。<div id='box'></div>第二步、引入echarts的js文件<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts.js"></script>第三步、进行js初始化配置
百度画图插件echart
04-03
All rights reserved. Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met: ...
百度画图echarts
01-06
百度画图插件echart 及 简单实例
Delphi-unigui-echart.rar
06-19
delphi调用echart的示例代码，服务发布之后，浏览器页面输入127.0.0.1/8077，可以看到效果，数据默认取自根目录的文本，简单学习一下吧
echart相关文档即api
12-22
主要echart的api应用，比如，实现一些用js画图，如饼图，柱状图，散点图，K线图等，都可以使用，非常方便，希望能给您带来帮助，望收藏！
绘图（echart）
qq_43281189的博客
02-27 205
1. 绘制条形图 from pyecharts import Bar x_movies_name = ["猩球崛起", "敦刻尔克", "蜘蛛侠", "战狼2"] y_16 = [15746, 312, 4497, 319] y_15 = [12357, 156, 2045, 168] y_14 = [2358, 399, 2358, 362] bar = Bar(title="某年内地电影票...
qt 使用Echart 绘图
10-25
qt echart 绘图 webview 解决qt4绘图问题
百度js工具-ECharts画图
08-30
引入该js文件，根据百度echarts-api文档说明，可以在web端开发各种类型的图表显示
echart图形绘制
qq_25687271的博客
08-09 4736
1.绘制折线图 let myDom = document.querySelector(dom);//要放的元素 let myChart = echarts.init(myDom, 'light');//使用的主题 let option = { tooltip: { trigger: 'axis' }, legend: { data: ['人...
echarts中图表适配
Cheryl的加工厂
12-24 595
(function () { // 1. 实例化对象 var myChart = echarts.init(document.querySelector(".bar .chart")); // 2. 指定配置项和数据 var option = { color: ["#2f89cf"], tooltip: { trigger: "axis", axisPointer: {
echart 图绘制--基础使用
Rao的博客
03-24 697
文章目录学习echart 简单绘制图像如何使用echart如何查阅文档文档内容解析1. 文档重要组成部分2. 图例选择3. 坐标系设置4. 主图与组件5. 组件参数如何借阅别人的思想 学习echart 简单绘制图像 本文旨在讲述如何基础使用echart并系统性理解echart的文档参数 仔细阅读本文，能够从渔的方式学习echart图的绘制 如何使用echart 引入echart js 文件import * as echarts from 'echarts'; 初始化echart 并绑定在DOM树中
使用echarts绘图
weixin_50199986的博客
01-11 339
import pandas as pd import numpy as np from pyecharts import options as opts from pyecharts.charts import Bar from pyecharts.charts import Pie from pyecharts.charts import Geo from pyecharts.globals import GeoType from pyecharts.charts import Map from pye
Echarts图表绘制，小白看了不迷路
weixin_55739922的博客
09-28 489
快速上手中学习如何绘制一个简单的图标？ Echarts插件就是一个很好的选择，ECharts 是一个使用 JavaScript 实现的免费商用的开源可视化库，内容包含行业内各种图示图标，可满足各种需求。在使用前我们可以到官网下载echarts.min.js或echarts.js 并用 2．基于准备好的DOM容器，开始通过echarts.init方法 初始化一个echarts实例配置项 var mychar =echarts.init(document.getElementbyId("main")); 3.
echart中自定义绘图
aliven1的博客
07-01 1860
echart画图代码
最新发布
08-03
Echarts是一款开源的数据可视化库，用于通过代码生成各类图表，下面是一个简单的Echarts画图代码示例： 首先，我们需要在HTML文件中引入Echarts库的脚本文件： ``` <!-- 在head标签内引入Echarts库的脚本文件 --> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

丁爸

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值