echarts -01 入门
1.效果图
2. code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript"> require.config({ // // 路径配置
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) { // 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['销量'] // 销量是黄颜色柱条， 不同的字显示不同的颜色！！！
},
xAxis : [ //x轴的 标记
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value' // y轴的数值是根据series数组中的data数组的最大值来定的
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 60, 10, 10, 20]
}
]
}; myChart.setOption(option); // 为echarts对象加载数据
}
);
</script>
</head>
<body>
<div id="main" style="height: 400px"></div>
</body>
</html>
echarts -01 入门的更多相关文章
- Python学习--01入门
Python学习--01入门 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.和PHP一样,它是后端开发语言. 如果有C语言.PHP语言.JAVA语言等其中一种语言的基础,学习Py ...
- [译]Vulkan教程(01)入门
[译]Vulkan教程(01)入门 接下来我将翻译(https://vulkan-tutorial.com)上的Vulkan教程.这可能是我学习Vulkan的最好方式,但不是最理想的方式. 我会用“d ...
- Echarts和Highcharts学习笔记01——入门了解
Echarts是国内百度团队开发的(开源),基于Canvas,适合数据量较大的情况: Highcharts是国外的(商用需授权),基于SVG,方便自己定制,但能使用的图表类型有限: Echarts ...
- ***ECharts图表入门和最佳实践
ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...
- ECharts简单入门
图1和图2是手机上显示的效果, 图3是电脑浏览器显示的效果. 如何使用ECharts? 1.下载echarts.js 2.引入echarts.js <script type="text ...
- ECharts快速入门
一.简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Saf ...
- ECharts简单入门demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Echarts轻松入门，内附踩坑秘籍
首先介绍一下我们的主角ECharts ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fir ...
- Echarts快速入门---------v客学院技术分享
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...
随机推荐
- 【wikioi】1282 约瑟夫问题
题目链接:http://www.wikioi.com/problem/1282/ 算法:线段树(名次树) 说明在代码里有了,直接上代码. #include <cstdio> using n ...
- USACO 5.4 Telecowmunication(最大流+枚举)
面对最小割之类的题目,完全木想法... 枚举+最大流..复杂度很大了...居然很快的就过了.. /* ID: cuizhe LANG: C++ TASK: telecow */ #include &l ...
- COJ559 回文
试题描述 给定字符串,求它的回文子序列个数.回文子序列反转字符顺序后仍然与原序列相同.例如字符串aba中,回文子序列为"a", "a", "aa&qu ...
- linux源码组织
linux源代码在https://www.kernel.org/就可以下.现在的稳定版本是3.16.3. 因为简历上有个项目是内核有关的,为了准备一下面试,还是要重温一下内核才行.最基本的,哪些文件在 ...
- Android 通用流行框架大全
1. 缓存 DiskLruCache Java实现基于LRU的磁盘缓存 2.图片加载 Android Universal Image Loader 一个强大的加载,缓存,展示图片的库 Picas ...
- node系列：琐碎备忘
cmd 全局与本地路径 查看:默认 查看本地路径:npm config get cache,默认和nodejs安装目录同一目录 查看全局路径:npm config get prefix,默认c盘app ...
- Mininet实验 基于Mininet实现BGP路径挟持攻击实验
参考:基于Mininet实现BGP路径挟持攻击实验 实验目的: 掌握如何mininet内模拟AS. 掌握BGP路径挟持的原理和分析过程. 实验原理: 互联网是由相互连接的自治系统AS组成的,通过一个通 ...
- BKDRhash实现
参考了一些有关于哈希算法的博客,里面都有提到BKDR哈希算法,在博客:各种字符串Hash函数中有对各种hash算法进行测试,测试关于哈希冲突,以及散列的质量,得到的结果可以参考以上博文. BKDRha ...
- Nginx 笔记与总结（12）Nginx URL Rewrite 实例（ecshop）
访问项目地址:http://192.168.254.100/ecshop 某个商品的 URL:http://192.168.254.100/ecshop/goods.php?id=3 现在需要实现把以 ...
- UITableview xib里面 cell 按钮的回调
// MoreBtnCell.m#import <UIKit/UIKit.h> @interface MoreBtnCell : UITableViewCell @property (w ...