<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="barMain" style="height:400px"></div>
<div id="lineMain" 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',
　　　　　　　　'echarts/chart/line'
　　　　　　],
　　　　　　drawEcharts
);

function drawEcharts(ec){
　　drawBar(ec);
　　drawLine(ec);
}
function drawBar(ec){
　　var myBarChart = ec.init(document.getElementById('barMain'));
　　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]
　　　　}
　　]
};
myBarChart.setOption(option,true); //当setOption第二个参数为true时，会阻止数据合并
}

function drawLine(ec){
　　var myLineChart = ec.init(document.getElementById('lineMain'));
　　var option2 = {
　　　　title : {
　　　　text: '未来一周气温变化',
　　　　subtext: '纯属虚构'
　　},
　　tooltip : {
　　　　trigger: 'axis'
　　},
　　legend: {
　　　　data:['最高气温','最低气温']
　　},
　　toolbox: {
　　　　show : true,
　　　　feature : {
　　　　　　mark : {show: true},
　　　　　　dataView : {show: true, readOnly: false},
　　　　　　magicType : {show: true, type: ['line', 'bar']},
　　　　　　restore : {show: true},
　　　　　　saveAsImage : {show: true}
　　　　}
　　},
　　calculable : true,
　　xAxis : [
　　　　{
　　　　　　type : 'category',
　　　　　　boundaryGap : false,
　　　　　　data : ['周一','周二','周三','周四','周五','周六','周日']
　　　　}
　　],
　　yAxis : [
　　　　{
　　　　　　type : 'value',
　　　　　　axisLabel : {
　　　　　　　　formatter: '{value} °C'
　　　　　　}
　　　　}
　　],
　　series : [
　　　　{
　　　　　　name:'最高气温',
　　　　　　type:'line',
　　　　　　data:[11, 11, 15, 13, 12, 13, 10],
　　　　　　markPoint : {
　　　　　　　　data : [
　　　　　　　　　　{type : 'max', name: '最大值'},
　　　　　　　　　　{type : 'min', name: '最小值'}
　　　　　　　　]
　　　　　　},
　　　　　　markLine : {
　　　　　　　　data : [
　　　　　　　　　　{type : 'average', name: '平均值'}
　　　　　　　　]
　　　　　　}
　　　　},
　　　　{
　　　　　　name:'最低气温',
　　　　　　type:'line',
　　　　　　data:[1, -2, 2, 5, 3, 2, 0],
　　　　　　markPoint : {
　　　　　　　　data : [
　　　　　　　　　　{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
　　　　　　　　]
　　　　　　},
　　　　　　markLine : {
　　　　　　　　data : [
　　　　　　　　　　{type : 'average', name : '平均值'}
　　　　　　　　]
　　　　　　}
　　　　}
　　]
};
myLineChart.setOption(option2,true);
}
</script>
</body>

补充：给图表绑定事件（以上面柱状图为例，绑定click事件）

　/* 给柱状图绑定click事件 */
　　var ecConfig = require('echarts/config');
　　function eConsole(param) {
　　　　alert(param.value); 　　 // 弹出当前柱子的数值
　　}
　　myBarChart.on(ecConfig.EVENT.CLICK, eConsole);

这段代码加在 myBarChart.setOption(option,true); //当setOption第二个参数为true时，会阻止数据合并，这行代码上面。

-----------------------------------------------------------------------------------------------------------------------------------------------

如下：

　　

　

ECharts 在同一个页面添加多个图表 并 给图表绑定事件的更多相关文章

  1. 系统管理模块_岗位管理_改进_使用ModelDroven方案_套用美工写好的页面效果_添加功能与修改功能使用同一个页面

    改进_使用ModelDroven方案 @Controller @Scope("prototype") public class RoleAction extends ActionS ...

  2. jQuery对 动态添加 的元素 绑定事件（on()的用法）

    从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...

  3. jQuery 为动态添加的元素绑定事件

    在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...

  4. jQuery动态添加li标签并添加属性和绑定事件

    代码如下: <%@page import="java.util.ArrayList"%> <%@ page language="java" c ...

  5. echarts一个页面动态加载两张不同图表数据

    参考 http://www.stepday.com/topic/?877 http://blog.csdn.net/for_china2012/article/details/45167161 // ...

  6. 在同一个页面使用多个不同的jQuery版本，让它们并存而不冲突

    - jQuery自诞生以来,版本越来越多,而且jQuery官网的新版本还在不断的更新和发布中,现已经达到了1.6.4版本,但是我们在以前的项目中就已经使用了旧版本的jQuery,比如已经出现的:1.3 ...

  7. vue引入echarts、找不到的图表引入方法、图表中的点击事件

    1.在vue-cli项目中添加webpack配置,本文引入的最新版本.在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1 开始由官方 EFE 维 ...

  8. vue通过ID（参数）修改URL复用同一个页面（组件）不重新加载的问题

    项目中经常会用到同一个页面,结构是相同的,我只是在vue-router中通过添加参数的方式来区分状态,参数可以在页面跳转时带上params,或者query,但是有一个问题,即使我们修改了参数,URL也 ...

  9. 如何在MVC_WebAPI项目中的APIController帮助页面添加Web测试工具测试

    本文转载自:http://www.cnblogs.com/pmars/p/3673811.html 先看效果图: 以下是原文: 如何在帮助页面添加测试工具 上一篇我在ASP.NET里面添加了一个Hel ...

随机推荐

  1. Maven问题总结：could not resolve archetype xxxxxxx from any of the configured repositories

    错误提示 Eclipse中通过Archetype创建Maven项目时报错:Could not resolve archetype xxxxxxx from any of the configured ...

  2. 利用反射得到android存储路径

    获得android手机的存储路径: public String getPrimaryStoragePath(){ try{ StorageManager sm = (StorageManager) c ...

  3. Sphinx+MySQL5.1x+SphinxSE+mmseg

    一.不停止mysql的情况下安装SphinxSE 1.确定mysql版本,下载对应源码包 此处下载5.1.69的mysql源码包 #wget ftp://ftp.ntu.edu.tw/pub/MySQ ...

  4. win2003 老的ASP程序报错 Microsoft OLE DB Provider for Orac(0x80004005)

    ASP连接ORACLE报错,记得环境刚配置完成的时候一切正常,今天莫名其妙的报错了 报错位置78行: 这是一个很老的系统,代码没人去东,只是从老的机器迁移到新的服务器中,想想应该是环境的问题 网上搜索 ...

  5. Delphi的哈希表（一）

    哈希表是通过哈希值来访问的,通过一定的内存浪费获取检索速度,在检索项时是不需要逐一检索.在编程中有一定的好处. unit Unit1; interface uses Windows, Messages ...

  6. 蓝牙4.0（包含BLE）简介

    1. BLE   (低功耗蓝牙)简介 国际蓝牙联盟( BT-SIG,TI  是 企业成员之一)通过的一个标准蓝牙无线协议. 主要的新特性是在蓝牙标准版本上添加了4.0 蓝牙规范 (2010 年6 月 ...

  7. nginx博客系统（内含nginx图片缩略图处理代码，不错）

    一直以来都在Qzone.CSDN等上面写博客,偶尔有些想法就在Paas平台上搭建服务,新浪和曾经的google上都用过其appengine.可是在别人的平台上写东西,总归有些不方便,有受制于人的感觉. ...

  8. Strom简介，以及安装，和官方案例测试

    一:简介 1.strom的两种形式 2.strom的特性 3.使用场景 4.集群架构 5.集群架构进程 6.组件 Nimbus 7.从节点Supervisor 8.组件worker 9.组件Execu ...

  9. Qt设置系统时间（使用SetSystemTime API函数）

    大家都知道Qt中有QDateTime等有关时间与日期的类,类中包含很多成员函数,可以很方便的实现有关时间与日期的操作,比如:想要获得系统当前的时间与日期,可以调用currentDateTime();  ...

  10. php-- Linux图形界面与字符界面切换

    转自:http://blog.163.com/wang_ly2442/blog/static/9494340720128355054551/ 1. 启动时进入字符界面,后来想切换到图形界面:使用sta ...