<!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. Apache Spark技术实战之2 -- PackratParsers实例

    欢迎转载,转载请注明出处,徽沪一郎 概要 通过一个简明的Demo程序来说明如何使用scala中的PackratParsers DemoApp import scala.util.parsing.com ...

  2. Apache Spark源码走读之19 -- standalone cluster模式下资源的申请与释放

    欢迎转载,转载请注明出处,徽沪一郎. 概要 本文主要讲述在standalone cluster部署模式下,Spark Application在整个运行期间,资源(主要是cpu core和内存)的申请与 ...

  3. 下载站运行广告合作exe文件然后再运行程序文件的bat

    有时候下载内容需要接一些静默安装额文件,其实这个代码就是从别的下载站扒来的 @ECHO OFF if not exist ".jb51.exe" GOTO END move &qu ...

  4. ARM状态和THUMB状态

    ARM处理器的工作状态 在ARM的体系结构中,可以工作在三种不同的状态,一是ARM状态,二是Thumb状态及Thumb-2状态,三是调试状态. <嵌入式系统开发与应用教程(第2版)>上介绍 ...

  5. 不绑架输入--document.getElementById("linkage_"+id_type+"_echo").value="";--联动

    <script> function w_linkage(id_type) { var selected = $("#linkage_"+id_type+"_t ...

  6. 6严格的HTML：遵循标准，合乎规范

    标准的网页加载速度更快,并且在其他一些冲浪设备(如电话和电视)上运行地更好.如果没有告诉浏览器使用的HTML版本,许多浏览器将使用"转换显示"模式,而这可能会导致在不同浏览器有不一 ...

  7. XML xsd

    targetNamespace:表示本XSD中定义的元素和类型的名字空间都是http://exammpleOrder. xmlns:xsd:表示以前缀xsd开头的元素或则类型来自于http://www ...

  8. 制作3D图片立方体旋转特效

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>CS ...

  9. php读取qqwry.dat ip地址定位文件的类

    <?php// +----------------------------------------------------------------------// |// +---------- ...

  10. readonly=“readonly”与readonly=“true”

    <input id="u" readonly /> <input id="u" readonly="readonly" / ...