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三者结合起来 ...
随机推荐
- java.net.ProtocolException: Server redirected too many times
网页爬虫时,原来正常的代码,可能是因为网站做了cookie校验处理,报异常:java.net.ProtocolException: Server redirected too many times 表 ...
- HADOOP docker(四):安装hive
1.hive简介2.安装hive2.1 环境准备2.1.1 下载安装包2.1.2 设置hive用户的环境变量2.1.3 hive服务端配置文件2.1.4 hive客户端配置文件2.1.4 分发hive ...
- POJ 1741 Tree（树的分治）
Description Give a tree with n vertices,each edge has a length(positive integer less than 1001). Def ...
- Bower 显示‘bower ESUDO Cannot be run with sudo’的错误解决方法
使用 sudo 命令后或者当前用户为 root,执行 bower 相关命令会出现错误: 解决办法: 在命令后面加 --allow-root 例: bower init --allow-root bo ...
- Alpha发布——Thunder团队
视频展示 视频链接: 爱奇艺: http://www.iqiyi.com/w_19ruzwru25.html (画质清晰,但可能需多次刷新或重新打开页面,此问题因电脑型号和网络而异) 优酷: ...
- Alpha阶段中间产物——Thunder团队
Part One 版本控制 git地址:https://git.coding.net/lick468/iReader.git Part Two 软件功能说明书 相关链接:http://www.cnbl ...
- bootstrap控件点击之后没有反应的原因
引用的jquery.js文件要放到bootstrap.js的前面 jquery.js文件版本太低. 这些问题可以通过firebug或者谷歌调试器发现. 问题很简单,简单记录下,以免以后遗忘.
- PHPCMSV9 黄页新闻、产品、商机均无法浏览具体信息，显示您没有访问该信息的权限！
原帖地址:http://bbs.phpcms.cn/forum.php?mod=viewthread&tid=294956&highlight=%C3%BB%D3%D0%B7%C3%C ...
- Redis的概述和简单使用（转载）
文章来源:http://jingyan.baidu.com/article/db55b60996d0124ba30a2f92.html Redis是一个基于key-value的高速缓存系统,类似于me ...
- 使用tc来控制网络流量
https://blog.csdn.net/qinyushuang/article/details/46611709 tc实际操控网络的流量 解释网络tc的架构,从架构上分析tc,与netfilter ...