<!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. SCOJ 4423: Necklace polya

    4423: Necklace 题目连接: http://acm.scu.edu.cn/soj/problem.action?id=4423 Description baihacker bought a ...

  2. Linux知识（5）----LINUX下GDB调试

    命令 解释 示例   file 加载被调试的可执行程序文件.因为一般都在被调试程序所在目录下执行GDB,因而文本名不需要带路径. (gdb) file gdb-sample     r c Run的简 ...

  3. mysql事件的开启和调用

    检测事件是否开启 show variables like 'event_scheduler'; 开启事件 set global event_scheduler = on; 创建一个存储过程 delim ...

  4. MOSFET shunt regulator substitutes for series regulator

    You would normally use a series linear regulator or a dc/dc converter to obtain 3V dc from a higher ...

  5. oracle定时任务(dbms_job)

    author:skate time:2007-09-12 http://publish.it168.com/2006/0311/20060311017002.shtml 今天总结下Oracle的任务队 ...

  6. PHP str_pad() 函数

    str_pad() 函数把字符串填充为指定的长度. 进入 详细介绍页面

  7. Android BottomNavigationBar底部导航控制器的使用

    最近Google在自己推出的Material design中增加了Bottom Navigation导航控制.Android一直没有官方的导航控制器,自己实现确实是五花八门,有了这个规定之后,就类似苹 ...

  8. HTTP和HTTPS的区别，以及各自的优缺点

    转自  https://www.cnblogs.com/wqhwe/p/5407468.html 超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容 ...

  9. 【spring boot】启动类启动 错误: 找不到或无法加载主类 com.codingapi.tm.TxManagerApplication 的解决方案

    导入的一个外部的spring boot项目,运行启动类,出现错误:找不到或无法加载主类 com.codingapi.tm.TxManagerApplication 解决方案: 将所有错误处理完成后,再 ...

  10. 《C++反汇编与逆向分析技术揭秘》之十——析构函数

    局部对象 当对象所在作用域结束之后,销毁栈空间,此时析构函数被调用. 举例: 函数返回时自动调用析构函数: 堆对象 调用析构代理函数来处理析构函数: 为什么使用析构代理函数来调用析构函数?考虑到如果d ...