Echarts直方图

这里主要对这个官网案例进行讲解：

https://echarts.apache.org/examples/en/editor.html?c=bar-histogram

echarts.min.js文件下载

ecStat.min.js文件下载

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"/><title>bar histogram</title>
</head>
<script src="js/echarts.min.js"></script>
<script src="js/ecStat.min.js"></script>
<body>
<div id="histogram" style="width: 1400px;height:800px;"></div>
</body><script>var histogramChart = echarts.init(document.getElementById('histogram'));// 任意数据集var girth = [8.3, 8.6, 8.8, 10.5, 10.7, 10.8, 11.0, 11.0, 11.1, 11.2, 11.3, 11.4, 11.4, 11.7, 12.0, 12.9, 12.9, 13.3, 13.7, 13.8, 14.0, 14.2, 14.5, 16.0, 16.3, 17.3, 17.5, 17.9, 18.0, 18.0, 20.6];// See https://github.com/ecomfe/echarts-statvar bins = ecStat.histogram(girth);// 柱子间间隔的刻度var interval;var min = Infinity;var max = -Infinity;var data = echarts.util.map(bins.data, function (item, index) {// 左刻度var x0 = bins.bins[index].x0;// 右刻度var x1 = bins.bins[index].x1;interval = x1 - x0;// 获得数据集中最值min = Math.min(min, x0);max = Math.max(max, x1);// item[0]代表刻度的中间值，item[1]代表出现的次数return [x0, x1, item[1]];});// 自定义渲染效果function renderItem(params, api) {// 这个根据自己的需求适当调节var yValue = api.value(2);var start = api.coord([api.value(0), yValue]);var size = api.size([api.value(1) - api.value(0), yValue]);var style = api.style();return {// 矩形及配置type: 'rect',shape: {x: start[0] + 1,y: start[1],width: size[0] - 2,height: size[1]},style: style};}option = {title: {text: 'Girths of Black Cherry Trees',subtext: 'By ecStat.histogram',sublink: 'https://github.com/ecomfe/echarts-stat',left: 'center',top: 10},color: ['rgb(25, 183, 207)'],grid: {top: 80,containLabel: true},xAxis: [{type: 'value',min: min,max: max,interval: interval}],yAxis: [{type: 'value',}],series: [{name: 'height',type: 'custom',renderItem: renderItem,label: {show: true,position: 'insideTop'},encode: {// 表示将data中的data[0]和data[1]映射到x轴x: [0, 1],// 表示将data中的data[2]映射到y轴y: 2,// 表示将data中的data[2]映射到tooltiptooltip: 2,// 表示将data中的data[2]映射到labellabel: 2},data: data}]};histogramChart.setOption(option)
</script>
</html>

附上一张最后的效果图：

Echarts直方图相关推荐

SSM框架中实现地图查询及ECharts直方图功能
最近一个项目[SSM框架搭建后台]中需要在地图中显示检测点以及以直方图的形式展示mysql数据库中的数据. 下面是一个简单Demo. 效果如下: 后面会将代码整理放在github. jsp文件如下 ...
echarts 直方图加正态_用Excel2007制作直方图和正态分布曲线图
本例中原始数据: 51.7,50.6,57.9,56.9,56.7,56.7,55.3,56.1,53.7,54.5,56.9,51.9,52.1,55.1,54.9,54.7,55.3,55.3,5 ...
HTML5_Core.十大新特性
HTML5_CORE 1 增强型表单 1.1 新的input type 1.2 新元素element 1.3 新属性attr 2 视频音频 2.1 视频video 2.2 音频audio 3 Canv ...
可视化例子(12)——ECharts堆叠直方图
堆叠直方图主要是要 series.stack 属性一样. 全部代码如下 <!DOCTYPE html> <html style="height: 100%"> ...
canvas+echarts.js实现彩色图像的RGB直方图显示
(源代码见最底下) 实现效果导入一张图片后,展示该图像所包含的RGB三通道色值分布,并可动态调整区间数来展示直方图. 基本思路由于JS不能直接读取图像像素,故借助HTML5的canvas标签读取图 ...
[Echarts可视化] 二.php和ajax连接数据库实现动态数据可视化
前一篇文章 "[Echarts可视化] 一.入门篇之简单绘制中国地图和贵州地区" 主要是通过Echarts可视化介绍入门知识.中国地图和贵州地区各省份的数据分析,其中贵州地图才是它 ...
数据可视化（推荐Tableau、 PowerBI 、FineBI、Echarts、ggplot、PYTHON、R）---数据分析领域的万金油技能
首先,这是一篇扩大知识面的文章,适合收藏起来,在地铁,公交,厕所,睡前,吃饭时看....(耶,恶趣味) 其次,本文不放图,节省大家的阅读时间(但还是很有必要看的,它教会你如何做图的主人!). 我们常用 ...
echarts学习笔记1
可视化面板介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出. [外链图片转存失败,源站可 ...
[Python从零到壹] 五十四.图像增强及运算篇之局部直方图均衡化和自动色彩均衡化处理
首先,祝大家教师节和中秋节快乐! 欢迎大家来到"Python从零到壹",在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界.所有文 ...
视频教程-Echarts+Asp.Net+Sql Server报表开发视频教程-.NET
Echarts+Asp.Net+Sql Server报表开发视频教程 8年一线开发经验,2年培训经验.擅长asp.net C# java 安卓 nodejs h5 css3 js 串口通讯等技术.录制 ...

Echarts直方图

Echarts直方图相关推荐

最新文章

热门文章