echarts 使用demo
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<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 : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
}; // 为echarts对象加载数据
myChart.setOption(option);
}
);
</script> </body>
echarts 使用demo的更多相关文章
- AngularJS引入Echarts的Demo
最近要用到图表展示,想了想,还是首选Echarts,HighCharts和D3.js备用吧, 而项目中也用到了AngularJS,所以需要把Echarts引入到AngularJs中一起使用, 试了试, ...
- 通过echarts的demo
通过最近两天对echarts的了解,下面用echarts.js写了一个小效果: 效果的demo为: <!DOCTYPE html> <html lang="en" ...
- echarts柱状图Demo
echarts链接:http://gallery.echartsjs.com/editor.html?c=xB1Sfo5JbX 代码: var xData = ['a', 'b', 'c', 'd', ...
- Vue+webpack+echarts+jQuery=demo
需要的插件: "dependencies": { "bootstrap": "^3.3.7", "echarts": & ...
- echarts 实例demo 详细讲解
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> & ...
- 完整版ajax+百度echarts实现统计图表demo并随着窗口大小改变而自适应
1.前言 百度Echarts会常用到我们的项目中做统计,api很详细,demo也非常之多,我们常用的是应有尽有了,做一些小项目的时候,百度echarts的demo已足够用了.今天呢.主要是跟小白讲一下 ...
- 百度地图、ECharts整合HT for Web网络拓扑图应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
- ECharts+百度地图网络拓扑应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
- ECharts+BaiduMap+HT for Web网络拓扑图应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
随机推荐
- 自测之Lesson13：共享内存
题目:创建一个64K的共享内存. 实现代码: #include <stdio.h> #include <sys/ipc.h> #include <sys/shm.h> ...
- 自测之Lesson7：设备文件操作
题目:请编写一个输入密码(不回显)的程序,要求通过设置终端来完成. 完成代码: #include <stdio.h> #include <unistd.h> #include ...
- Objective-C 反射机制
该文章属于<简书 — 刘小壮>原创,特此感谢:<简书 — 刘小壮> http://www.jianshu.com/p/5bbde2480680 了解反射机制 Objective ...
- netbeans调试配置
apache端口8050,xdebug端口9000 1.把项目放到apache的htdocs下(一定要放在htdocs上,要么调试的时候xdebug会一直卡在“等待连接中”) 2.把php_xdebu ...
- binlog2sql数据恢复
牛叉的工具有好几个,包括MyFlash.binlog2Sql.mysqlbinlog_flashback,还有一些收费的等等,各有优劣,具体使用可自行百度 1.安装binlog2sql shell&g ...
- centos7编译安装redis遇坑
编译redis时:make cc Command not found 原因分析:没有安装gcc,执行: yum install gcc 编译redis时:error: jemalloc/jemallo ...
- [剑指Offer] 51.构建乘积数组
题目描述 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]*...*A[n-1].不 ...
- 第70天：jQuery基本选择器（一）
一.jQuery基本选择器 jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发 jQuery能做的javascipt都能做到,而javascri ...
- CS6的安装与破解
大家在Mac下肯定也少不了对图片进行修改,那也就少不了Photoshop这款软件. 今天在这里分享下苹果下的Adobe PhotoshopCS6,这个软件大家应该都很熟悉,主要功能什么我就不多做介绍了 ...
- BZOJ 1806 矿工配餐(DP)
很水的DP. 因为每一个餐车的加入只需要知道当前矿洞的前两个餐车种类就行了.而餐车一共就三种. 所以令dp[i][Sa][Sb]表示前i辆餐车送餐完毕后第一个矿洞的前两个餐车种类为Sa,第二个矿洞的前 ...