【前端统计图】echarts实现简单柱状图项目地址下载:
时间:2022-05-30
本文章向大家介绍【前端统计图】echarts实现简单柱状图项目地址下载:,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
图片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>五分钟上手之柱状图</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["1","2","3","4","5"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: ["1","2","3","4","5"]
}]
});
</script>
</body>
</html>
加上json数据之后,动态生成 的统计图
图片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>五分钟上手之柱状图</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
// 异步加载数据
$.get('data.json').done(function (data) {
// 填入数据
myChart.setOption({ xAxis: { data: data.categories }, series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.data
}]
});});
</script>
</body>
</html>
data.json数据
{
"categories": [
"苹果",
"橘子",
"荔枝",
"桃子",
"栗子",
"梨子",
"柿子"
],
"data": [
500,
280,
386,
190,
107,
207,
452
]
}
项目地址下载:
ajax数据交互例子:
// 柱状图
var x_data;// x轴数据
var y_data;// y轴数据
var zChart = echarts.init(document.getElementById("main1"));// 柱形图模板
function zFun(x_data, y_data) {
zChart.setOption({
color : [ '#3398DB' ],
tooltip : {
trigger : 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend : {
data : [ '心率值' ]
},
grid : {
left : '3%',
right : '20%',
bottom : '20%',
containLabel : true
},
xAxis : [ {
type : 'category',
data : x_data,
} ],
yAxis:[ { //纵轴标尺固定
type: 'value',
scale: true,
name: '心率值',
max: 140,
min: 0,
splitNumber:20,
boundaryGap: [0.2, 0.2]
} ],
series : [ {
name : '心率',
type : 'bar',
barWidth : '30%',
data : y_data
} ]
}, true);
}
- 分布式监控系统Zabbix-3.0.3-完整安装记录(6)-微信报警部署
- Android 命名规范 (提高代码可以读性)
- Msdn 杂志 asp.net ajax 文章汇集
- 分布式监控系统Zabbix-3.0.3-完整安装记录-新报微信报警(企业微信)
- 测试网站页面网速的一个简单Python脚本
- 框架页面尽可以这么用(后置代码中控制框架)
- 微信小程序「学科排名」发布了
- Nginx 负载均衡的Cache缓存批量清理的操作记录
- DotNet软件开发框架
- Nginx通过https方式反向代理的简单实现
- 再论IBatisNet + Castle进行项目的开发
- 利用xml轻松读取web.config中的用户自定义节
- 分布式监控系统Zabbix-3.0.3-完整安装记录(3)-监控nginx,php,memcache,Low-level discovery磁盘IO
- python报错问题解决:'ascii' codec can't encode character
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- hadoop伪分布式之配置日志聚集
- Kettle构建Hadoop ETL实践(二):安装与配置
- WKWebView加载沙盒HTML
- 【python-leetcode480-双堆】滑动窗口的中位数
- 虚拟机--python环境配置
- 利用装饰器计算函数运行的时间
- 【猫狗数据集】谷歌colab之使用pytorch读取自己数据集(猫狗数据集)
- python wraps的作用
- paddlepaddle中文词法分析LAC
- python *args,**kwargs参数
- (一)django创建
- PaddleHub提供的ERNIE进行文本分类
- (二)django--带APP的网站
- Spring Boot 自定義 HttpMessageConverter 解決 String 類型返回JSON對象問題
- spring之为级联集合属性进行赋值