<!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. python开发_difflib字符串比较

    在python的difflib中 HtmlDiff:比较后以html方法展示 我们比较的是字符串: 'hello world!' 和 'hElLO Wor2d!' 具体代码: from difflib ...

  2. css背景图片模糊

    index.html <image class="bg" src="/images/bg.png"></image> index.css ...

  3. 微信小程序背景音频播放分享功能

    如果正常背景音频播放的话,只能跳转到自己对应的微信小程序,无法分享朋友圈,我们需要设置分享朋友圈,需要调用一个API 音频背景播放 注意:背景播放在锁屏后播放只支持IOS端,安卓端虽然可以播放,但是锁 ...

  4. iOS开发之int,NSInteger,NSUInteger,NSNumber的使用

    1.首先先了解下NSNumber类型: 苹果官方文档地址:https://developer.apple.com/library/ios/documentation/Cocoa/Reference/F ...

  5. .Net 加密 哈希

    一.DES加解密 DES一共就有4个参数参与运作:明文.密文.密钥.向量.其中这4者的关系可以理解为: 密文=明文+密钥+向量: 明文=密文-密钥-向量: 为什么要向量这个参数呢?因为如果有一篇文章, ...

  6. .NET：异常处理的两条“黄金定律”，求批！

    背景 架构之处必须考虑:如何处理异常?如何定义自己的异常体系?本文为了强化这个概念而写. 异常处理的两条“黄金定律” 自己抄袭的两条规律: 异常不能穿过“边界类”. 异常不能在没有恢复的情况下“吞掉” ...

  7. 利用tca时间聚簇分析方法分析fmri数据

    一.利用ica进行fmri数据分解时,在得到相互独立的成分后,这些成分的后续处理,其实是有很多文章可以做的.比如,对这些成分进行排序和选择.如果能够提出某种方法,能够自动地制造特征,并将这些特征与分解 ...

  8. 简单的后台管理系统vue-cli3.0+element-ui

    前段时间在研究一个分发系统,发现vue-cli+element-ui好像是挺不错的,然后自己根据那个分发系统尝试搭建了一下 1.首先安装vue和vue-cli // 全局安装vue npm insta ...

  9. Integer IntegerCache源码

    先看一段测试结果: /*public static void main(String[] args) { Integer a = 128, b = 128; Integer c = 127, d = ...

  10. LaTeX绘图宏包 Pgfplots package

    Pgfplots package The pgfplots package is a powerful tool, based on tikz, dedicated to create scienti ...