<!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. 62.COUNT（递归算法）--数的划分变式题型

    文件名:count.cpp 输入输出文件:count.in.count.out 时空:64M,2s 我们已经知道这样一个定理:任意一个正整数能够分解成最多4个数字的平方和.现在给你一些数字,要你求出它 ...

  2. 汇编语言学习笔记(十二)-浮点指令----ACM

    http://blog.csdn.net/q_l_s/article/details/54909328

  3. ADS-B显示终端6.0

    改动日志 1  更新背景地图. 增加了全国范围内的飞行限制区.飞行危急区.限制区採用黄色区域表示.危急区採用红色区域表示.全部原始资料均来自民航局发布的航行情报资料汇编. 2为解决显示元素过多,屏幕显 ...

  4. android新组件RecyclerView使用介绍和进阶使用，替用Gallery

    简介: RecyclerView是support-v7包中的新组件,是一个强大的滑动组件,与经典的ListView相比,同样拥有item回收复用的功能,但是直接把viewholder的实现封装起来,用 ...

  5. 未能加载文件或程序集“file:///D:/Program Files (x86)/ArcGIS/DeveloperKit10.0/DotNet/ESRI.ArcGIS.3DAnalyst.dll”或它的某一个依赖项。试图加载格式不正确的程序。 行 129，位置 5。

    能加载文件或程序集“file:///C:/Program Files (x86)/ArcGIS/DeveloperKit10.0/DotNet/ESRI.ArcGIS.ADF.Local.dll”或它 ...

  6. 11.2 为什么要使用 MVC

    以前的大部分应用程序(非Android应用)都是用像ASP.PHP或者CFML这样的过程化(自PHP5.0版本后已全面支持面向对象模型)语言来创建的.它们将像数据库查询语句这样的数据层代码和像HTML ...

  7. jenkins使用slave报编码错误[WARNING] File encoding has not been set, using platform encoding ANSI_X3.4-1968, i.e. build is platform dependent!

    jenkins:master-slave 模式: master编码配置: slave编码配置: 可以看出master 和 slave的配置是一样的,但是当项目在slave上执行的时候,偶尔会报如下错误 ...

  8. 在Ubuntu 13.04下的安装eclipse

    来源:http://www.cnblogs.com/lanxuezaipiao/p/3325628.html 一.eclipse安装过程 首先确保在安装eclipse之前已经安装好Java虚拟机 1. ...

  9. 关于actor-critic，这篇文章写的很好

    这篇文章: https://blog.csdn.net/qq_30615903/article/details/80774384 可以好好温习,包括代码,基本看懂了.

  10. C#获取相对路径[转]

    C#最常使用的相对路径是从当前程序所在路径开始相对寻径,找到要找的路径,即以下两种最简单的方式: 1. 程序根目录.(即exe程序所在路径) //下面两个路径是等价的,都是exe程序所在路径(通常是b ...