<!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. HDU 4619 Warm up 2 最大独立集

    Warm up 2 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=4619 Description Some 1×2 dominoes are pla ...

  2. SpringMVC 3.1.1版本下的单元测试WEB-INF路径问题

    假设Spring配置文件为applicationContext.xml 一.Spring配置文件在类路径下面 在Spring的java应用程序中,一般我们的Spring的配置文件都是放在放在类路径下面 ...

  3. 试了一把Intel的核显转码的威力

    今天小试了一把Intel Cpu的核显转码的威力,确实非常快,使用的工具是MediaCoder,能达到10x的速度,效果非常明显,并且CPU占用非常低.为了比较,实用x264纯转同一个文件的,软编码能 ...

  4. Eclipse配置Struts2问题：ClassNotFoundException: org...dispatcher.ng.filter.StrutsPrepareAndExecuteFilter

    我的解决方案 一开始,我是依照某本教材,配置了User Libraries(名为struts-2.2.3, 可供多个项目多次使用), 然后直接把struts-2.2.3引入过来(这个包不会真正的放在项 ...

  5. 经典笛卡尔积SQL

    经典笛卡尔积SQL: 下面的SQL会造成笛卡尔积: insert into tydic.temp_0731 select a.user_id,a.province_code,b.attr_code f ...

  6. Java隐藏手机号中间四位，隐藏身份证中间数字

    原文:https://blog.csdn.net/yuanquanl/article/details/53519577 public static void main(String[] args) { ...

  7. 固定的价格就意味着背叛——《practices of an agile developper》

    “对这个项目,我们必须要有固定的报价.虽然我们还不清楚项目的具体情况,但仍要有一个报价.到星期一,我需要整个团队的评估,并且我们必须要在年末交付整个项目.” Venkat & Andy 提出了 ...

  8. gpu和cpu区别

    GPU的功耗远远超过CPUCache, local memory: CPU > GPU Threads(线程数): GPU > CPURegisters: GPU > CPU 多寄存 ...

  9. ASP.NET 5 Beta5 对TagHelper带来的变化

    最近做的TagHelper项目要从原来的ASP.NET 5 Beta 4升级到Beta 5,特地整理了升级后的变化: 新增ImageTagHelper <img asp-file-version ...

  10. IE系列不支持圆角等CSS3属性的解决方案

    IE系列浏览器不支持CSS的圆角(border-radius)等CSS3属性是一个众所周知的问题,而FF.Chrome原生的浏览器支持是的优雅的圆角感觉较好,如何解决这个问题呢? 一种比较传统的方案是 ...