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三者结合起来 ...
随机推荐
- opencv-学习笔记(5)形态学转变
opencv-学习笔记(4)形态学转变 本章讲了几种形态学操作 腐蚀erode 膨胀dilate 开运算MORPH_OPEN 闭运算MORPH_CLOSE 形态学梯度MORPH_GRADIENT 礼帽 ...
- Python3 异常与断言
1.异常 当出现错误时,程序就会发生异常 num1=input('Please input a num1: ') num2=input('Please input a num2: ') print(f ...
- Alpha 冲刺报告(3/10)
Alpha 冲刺报告 队名:洛基小队 峻雄(组长) 已完成:开始编写角色的移动脚本 明日计划:继续学习并进行脚本编写 剩余任务:物品背包交互代码 困难:如何把各个模块的脚本整合起来 --------- ...
- str.substring(beginIndex,endIndex)-008
// 将字符串str前n位放在后面,返回新的字符串 public String headToTail(String str,int n){ if(n==0){ System.out.println(s ...
- Java多线程中的join方法
新建一个Thread,代码如下: package com.thread.test; public class MyThread extends Thread { private String name ...
- VC学习笔记：对话框
VC学习笔记:对话框 SkySeraph NOV.11st 2009 HQU Email-zgzhaobo@gmail.com QQ-452728574 Latest Modified Date:O ...
- touchSwipe 上下左右滑动，二指缩放 效果不好。
$(function(){ var _showImgW; var _showImgH; var _showImgMT; var _showImgML; $("#imgDiv").s ...
- WASM
WASM WebAssembly https://webassembly.org/ https://github.com/appcypher/awesome-wasm-langs https://me ...
- [剑指Offer] 53.表示数值的字符串
题目描述 请实现一个函数用来判断字符串是否表示数值(包括整数和小数).例如,字符串"+100","5e2","-123","3.1 ...
- VisualVM使用方法
VisualVM 简介 VisualVM 是一个工具,它提供了一个可视界面,用于查看 Java 虚拟机 (Java Virtual Machine, JVM) 上运行的基于 Java 技术的应用程序( ...