echarts(3.0)的基本使用(标签式导入)

function loadRainFallCharts(msg) {
        var obj = {};
        obj.x = [];
        obj.y = [];
        obj.line = [];
        var accumulation = 0;
        $(msg).each(function () {
            obj.x.push(this.datatime);
            obj.y.push(this.avgvalue);
            accumulation += this.avgvalue;
            obj.line.push(accumulation);
        });
        var myChart = echarts.init(document.getElementById(‘inThePast6hours_rainfall‘));

        var option = {
            title: {
                text: ‘实时雨量曲线(过去6小时)‘,
                subtext: ‘‘,
                x: ‘center‘,
                align: ‘right‘
            },
            legend: {
                data: [‘时段降水‘, ‘累积降水‘],
                x: ‘left‘
            },
            tooltip: {
                trigger: ‘axis‘,
                axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                    type: ‘shadow‘        // 默认为直线,可选为:‘line‘ | ‘shadow‘
                }
            },
            grid: {
                left: ‘3%‘,
                right: ‘4%‘,
                bottom: ‘3%‘,
                containLabel: true
            },
            xAxis: [
                {
                    type: ‘category‘,
                    data: obj.x.map(function (str) {
                        return str.replace(‘ ‘, ‘\n‘)
                    }),
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: ‘value‘,
                    name: ‘雨量(mm)‘,
                    nameLocation: ‘start‘,
                    inverse: true
                }
            ],
            series: [
                {
                    name: ‘时段降水‘,
                    type: ‘bar‘,
                    barWidth: ‘60%‘,
                    data: obj.y
                }, {
                    name: ‘累积降水‘,
                    type: ‘line‘,
                    stack: ‘广告‘,
                    data: obj.line
                },
            ]
        };

        myChart.setOption(option);
    }

依赖:http://files.cnblogs.com/files/gaocong/echarts.js

时间: 2024-12-29 11:24:44

echarts(3.0)的基本使用(标签式导入)的相关文章

echarts学习心得1---模块化单文件引入和标签式单文件引入

一.模块化单文件引入 1. 为ECharts准备一个具备大小(宽高)的Dom(当然可以是动态生成的) <div id="main" style="height:400px;"></div> 2. 通过script标签引入echarts主文件 <script src="./js/echarts.js"></script> 3. 为模块加载器配置echarts的路径,从当前页面链接到echarts.js

bootstrap历练实例:标签式的导航菜单

本章将讲解bootstrap提供的用于定义导航元素的一些选项,它使用相同的标签和基类.nav.Bootsrtap也提供了一个用于共享标记和状态的帮助器类.改变修饰的class,可以在不同的样式间进行切换. 表格导航或标签 创建一个标签式的导航菜单 1.以一个带有class.nav类无序列表开始. 2.添加class.nav-tabs类. <!DOCTYPE html><html><head><meta http-equiv="Content-Type&q

Android 创建标签式的版面设置 (笔记)

  利用TabHost创建标签式的版面设置,进行不同标签的切换,显示不同的背景图片.效果如下所示:               1.添加6张图片资源(直接拖入drawable文件夹),分别为gray.png, white.png, gray2.png, white2.png, gray3.png, white3.png代表的是标签默认状态和按下以后的状态.      2.在 drawable文件夹中新建一般的XML文件,picture.xml, picture2.xml, picture3.xm

get(0).tagName获得作用标签

<script type="text/javascript" src="jquery1.4.js"></script><script type="text/javascript">$(function(){    $(".test li,.test dd").click(function(){        alert('本身为大写:' + $(this).get(0).tagName +

[译]JavaFX 2.0+ - UI控件 - 标签

2 标签(Label) 本章主要介绍如何使用标签(Label),该类位于JavaFX API的javafx.scene.control包中,用于显示一个文本元素. 接下来会介绍如何让文本元素自动换行来适应受限空间,添加一个图标,或使用视觉特效. 图2 - 1显示了标签的三种常见用法. 左边的标签是一个带图标的文本,中间的展示了旋转效果,右边的使用了自动换行设置. 图2 - 1 标签示例 这幅图显示了三个标签,他们被放在了同一行. 左边的标签有一个看起来像个放大镜的图标和一个“Search”文本.

iOS开发笔记13:顶部标签式导航栏及下拉分类菜单

当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动和下拉动画显得比较生硬,刚发现quickTime可以直接录制手机视频,推荐一下,很方便) 1.顶部标签式导航栏 (1)实现思路 其实就是在上下两个UIScrollView上做文章,实现联动选择切换的效果. ①顶部标签导航栏topCategoryListScrollView加载显示分类数据,下方con

jqm选项卡开发,底部标签式设计,jqm模仿iPhone手机桌面菜单,jqm实战开发,jqm开发例子Demo

我有一个水货的上司,大家都是知道的.所以我就只能自学了,今天我给大家带来的是jQuery Mobile 模仿iphone 手机桌面的选项卡功能.比如电话,短信,浏览器,音乐的标签菜单.好吧,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jQuery Mobile模仿iphone菜单项</title

python测试开发django-41.crispy-forms设计标签式导航菜单(TabHolder)

前言 xadmin的详情页面主要是用form_layout布局,学会了完全可以不用写html代码,也能做出很好看的页面. xadmin的html页面是用的Bootstrap3框架设计的,layout布局用到的是django-crispy-forms框架,本篇详细讲下django-crispy-forms的官方文档案例 django-crispy-forms 当我们使用xadmin后台的时候,在INSTALLED_APPS里面同时添加了xadmin和crispy_forms这2个app,xadmi

Django模版语言的复用 1. include标签--模版导入 2.inclusion_tag自定义标签--模版导入 3.母版

include标签--模版导入 ''' 前提:项目中,往往会出现多个页面拥有一个或几个相同的页面版块,或是一个页面多个页面版块是相同的 如何运用:可以将多个样式标签的集合进行封装,对外提供版块的名字(接口),在有该版块的页面中直接导入即可 语法:{% include '版块页面的路径' %} ''' 公共的页面版块 <!-- templates/public.html --> <!-- 该页面位公共的页面代码块,所以不需要完整的html页面结构 --> <div class=