<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

    <script src="echarts.js"></script>

</head>

<body>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

     <div id="main" style="min-width: 600px;min-height:400px;"></div>

     <script type="text/javascript">

        var myChart;

  myChart = echarts.init(document.getElementById('main'));

  var legendDate="";

var series="";

var ser="";

var legend="";

var option={};

 $.ajax({

      type: "post",

      async: false, //同步执行

      url: "",

      dataType: "json", //返回数据形式为json

      success: function (result) {

      },

      error: function (errorMsg) {

             legendDate = ["2014","2015","2016"];

             series =  [ { "name":"2014", "type":"bar", "data":[51, 2, 43],"len":"中国"} ,{ "name":"2015", "type":"bar", "data":[55, 36, 4] ,"len":"美国"},{ "name":"2016", "type":"bar", "data":[5, 20, 40],"len":"英国"}];

             ser = [ { "name":"2014", "type":"bar", "data":[51, 2, 43]} ,{ "name":"2015", "type":"bar", "data":[55, 36, 4]},{ "name":"2016", "type":"bar", "data":[5, 20, 40]}];

             legend = ["中国","美国","德国"];

             optionSeries();

             for(i=0;series.length>i;i++){

             option.series[i]=series[i];

             }

      }

  });

 function optionSeries(){

  option = {

    title: {

        text: '性能数据采集入库效率趋势图'

    },

    tooltip: {

        trigger: 'axis',

        axisPointer: {

            type: 'shadow'

        }

    },

    legend: {

        data: legendDate

    },

    grid: {

        left: '3%',

        right: '4%',

        bottom: '3%',

        containLabel: true

    },

    xAxis: {

        type: 'value',

        boundaryGap: [0, 0.01]

    },

    yAxis: {

        type: 'category',

        data: legend

    },

    series: [ ]

};

 }

 //通过Ajax获取数据

  myChart.setOption(option);

  window.onresize = myChart.resize;

    </script>

</body>

</html>

Echarts实例的更多相关文章

  1. html+js+css+接口交互+echarts实例一枚

    1. 解决了echarts的展现 2. 解决了echarts全屏幕展现(width:100%;height:100%;) 3. 解决了向接口取数据问题 <!DOCTYPE html> &l ...

  2. echarts 实例demo 详细讲解

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     & ...

  3. 第一个简单的Echarts实例

    该示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像: 安装 npm install -g cnpm --registr ...

  4. echarts 通过dom获取echarts实例，批量监听reset

    重点在于 echarts.getInstanceByDom 这个 API 我的js: // 懒加载优化:滚动节流策略 var __SCROLLTIMER__ = null // 重新设置 echart ...

  5. ECharts实例开发学习笔记二——时间轴

    记录一下ECharts时间轴的使用,首先是照着官方的示例做一遍,在这里不要忘了引入timelineOption.js,后面介绍如何动态创建时间轴的记录数,即根据需求可伸缩显示有多少天或者年月等轴标记数 ...

  6. c#图标、显示图表、图形、json echarts实例 数据封装【c#】

    page: <%@ Control Language="C#" AutoEventWireup="true" CodeFile="Viewxxx ...

  7. ECharts访问后台，JSON格式返回数据实例

    完成图 一.页面代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pa ...

  8. Echarts中太阳图（Sunburst）的实例

    Echarts中太阳图(Sunburst)的实例 目前在项目中要实现一个Echars中的太阳图,但是Echars中的太阳图的数据格式是一个树形结构,如下代码格式如下: var mapData = [ ...

  9. Django+Echarts画图实例

    所有演示均基于Django2.0 阅读此篇文章你可以: 了解Django中aggregate和annotate函数的使用方法 获取一个Django+Echarts绘制柱状图的完整示例 需求说明 一张会 ...

随机推荐

  1. bzoj 2957 楼房重建 分块

    楼房重建 Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/problem.php?id=29 ...

  2. luoguoj 1598 垂直柱状图 模拟

    P1598 垂直柱状图 Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://www.luogu.org/problem/show?pid=1598 ...

  3. mysql sql优化及注意事项

    sql优化分析 通过slow_log等方式可以捕获慢查询sql,然后就是减少其对io和cpu的使用(不合理的索引.不必要的数据访问和排序)当我们面对具体的sql时,首先查看其执行计划A.看其是否使用索 ...

  4. FLV视频在IIS6.0下不能播放 处理的方法

    FLV视频在IIS6.0下不能播放 Flash视频由于其较高的压缩率和优越的下载速度,前景普遍看好,同时也为Flash课件增色不少.然而,在FLV视频播放中,却有两个头痛的问题    一.FLV视频在 ...

  5. PYPY_GC

    Author:Jin Date: 2014-7-8 http://doc.pypy.org/en/latest/windows.html http://www.pypy.org/download.ht ...

  6. XY8782S00 BL-W8782 BL-R8782MS1 SDIO接口 高性能、低功耗、体积小 wifi无线模块

    1.产品简介 BL-8782是一款高性能.低功耗.体积小SDIO接口无线模组,符合IEEE802.11N标准,并向下兼容IEEE802.11B/G标准,支持IEEE 802.11i安全协议,以及IEE ...

  7. Android SDK Manager 代理服务器设置

    http://blog.csdn.net/star_splendid/article/details/6939063 自己机子更新的话,速度1KB/s 实在是等不及了~找方法吧 http://www. ...

  8. [SQL基础]入门

    目录 什么是SQL? SQL能做什么? RDBMS SQL常见数据类型 SQL语法 什么是SQL? 结构化查询语言(Structured Query Language)简称SQL. 结构化查询语言是一 ...

  9. ArcGIS Engine中空间参照(地理坐标)相关方法总结转

    ArcGIS Engine中空间参照(地理坐标)相关方法总结 来自:http://blog.csdn.net/u011170962/article/details/38776101 1.创建空间参考 ...

  10. 提交svn的时候,提示丢失了预定增加的xxxx

    百度之,发现都是linux或者命令行下的解决方法, 经测试,右键svn目录 选择tortoisesvn 选择svn还原, 即可解决问题