Echarts案例-柱状图
一：先在官网下载
https://www.echartsjs.com/zh/download.html
然后再建立工程，导入这两个包：
写代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<!-- 这里是加载刚下好的echarts.min.js，注意路径 -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option = {
title : {
text: '某地区蒸发量和降水量',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['蒸发量','降水量']
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint : {
data : [
{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart.on('click', function (params) {
window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});
</script>
</body>
</html>
Echarts案例-柱状图的更多相关文章
- Echarts调整图表上下左右的间距，Echarts调整柱状图左右的间距
Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...
- Echarts堆积柱状图排序问题
Echarts堆积柱状图排序是按照堆积柱状图的柱子高度进行从大到小(或者从小到大)进行排序,方便查阅各坐标情况.以下是我自己研发的方法,有不对的地方敬请谅解,随时欢迎指教. 排序后效果如下图: (1) ...
- ECharts案例教程1
原文:http://blog.csdn.net/whqet/article/details/42703973 简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,是百度的 ...
- Thinkphp+ECharts生成柱状图
1.首先进ECharts官网下载echarts.js 点击下载,结合TP5讲解,主要代码在js里面,更多请到ECharts官网 2.引进echarts.js <!DOCTYPE html> ...
- echarts彩虹柱状图 每个bar显示不同颜色， 标题在不同位置 ，工具中有可以直接保存为图片下载，平均线的添加
可以参考: https://echarts.baidu.com/echarts2/doc/example.html https://echarts.baidu.com/echarts2/doc/doc ...
- echarts分组柱状图的前后台处理 带平均线显示
原生的echarts使用: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&g ...
- ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决
1. 我们在日常的开发中使用Echarts时,不像在学习的过程中是自己在option中的配置项填写图表需要的参数,而是通过ajax请求后台,获取数据后,使用javascript来动态的修改数据,但是有 ...
- echarts使用——柱状图
开发中,做报表统计的时候,很容易用到echarts实现折线图.饼状图.柱状图的绘制,使用echarts插件很简单,官网有教程实例,但主要是这些图需要的数据格式的转换. 我的柱状图实现效果: 第一部分 ...
- echarts 堆叠柱状图 ＋ 渐变柱状图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- c# winfrom 子窗体分屏显示
参考博客:https://blog.csdn.net/kailan818/article/details/8517126 实现代码: private void button1_Click(object ...
- SIFT算法研究
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://underthehood.blog.51cto.com/2531780/65835 ...
- linux安装tmux分屏插件
linuxtmux分屏 一.安装tmux 二.基本使用 三.鼠标操作 一.安装tmux yum install -y tmux TMUX2版本以下 二.基本使用 使用tmux一般使用命令和快捷键来操作 ...
- luogu题解 P2886 【牛继电器Cow Relays】-经过K边最短路&矩阵
题目链接: https://www.luogu.org/problemnew/show/P2886 Update 6.16 最近看了下<算法导论>,惊奇地发现在在介绍\(APSP\) \( ...
- 校验用户名是否存在(ajax+jackson)
只是简单的仿某度注册的用户名输入离焦后检验 目录结构 没有涉及到数据库 html <!DOCTYPE html> <html lang="en"> < ...
- 基于vue的购物车清单
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel= ...
- 正则限制input负数输入
//直接在input标签内加入下面两个事件处理程序即可 onkeyup="this.value=this.value.replace(/\D|^0/g,'')" onafterpa ...
- CRM和C4C里的组织架构 - Organizational Structure
CRM(WebClient UI) CRM(SAP GUI,事务码PPOMA_CRM) C4C 以列表方式显示: 以图形方式显示: UI模型: /SAP_BYD_APPLICATION_UI/mom/ ...
- Sqlmap对dvwa进行sql注入测试
前提准备条件: 1.下载安装dvwa,下载链接地址:http://www.dvwa.co.uk/.2.需要安装python运行环境.3.下载sqlmap包并将其解压. 一.查看所有的数据库;(其中db ...
- mac使用sourcetree跳过注册
转自https://blog.csdn.net/qq_32890891/article/details/89216954 打开sourcetree 关闭sourcetree 命令终端输入default ...