echarts 坐标自适应_echarts 同一页面，多个图表 页面大小自适应
// 路径配置
require.config({
paths: {
echarts: './js'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/line', // 折线图
'echarts/chart/bar' // 柱状图
],
function (ec) {
var myChart =
ec.init(document.getElementByIdx_x('main'));
var myChartx =
ec.init(document.getElementByIdx_x('mainx'));
option = {
//标题
title : {
text: '未来一周气温变化', //主标题文本
subtext: '纯属虚构' //副标题文本
},
//提示框
tooltip : {
trigger: 'axis' //提示类型
},
//图例
legend: {
data:['最高气温'] //图例 内容
},
//工具箱
toolbox: {
show : true, //显示策略
feature : { //启用功能
magicType : {//动态类型切换
show: true,
//'line', 'bar', 'stack', 'tiled', 'force', 'chord', 'pie',
'funnel'
type: ['line', 'bar']
},
dataView : { //数据视图
show: true,
readOnly: false,
optionToContent: function(opt) {
var axisData = opt.xAxis[0].data;
var series = opt.series;
var table = '
'
+ '
'
+ '
'
+ '
'
+ '
';
for (var i = 0, l = axisData.length; i < l; i++)
{
table += '
'
+ '
'
+ '
'
+ '
'
+ '
';
}
table += '
时间
' + series[0].name + '
' + series[1].name + '
' + axisData[i] + '
' + series[0].data[i] + '
' + series[1].data[i] + '
';
return table;
}
},
restore : {show: true} //还原，复位原始图表
}
},
//坐标
xAxis : [
{
//坐标轴类型，横轴默认为类目型'category' 纵轴默认为数值型'value'
type : 'category',
boundaryGap : false,
//坐标轴两端空白策略，数组内数值代表百分比
//类目型坐标轴文本标签数组，指定label内容
data : ['周一','周二','周三','周四','周五','周六','周日'],
//横轴线条
axisLine:{
lineStyle:{
color:'#333', //颜色
width:'1' //线条高度
}
},
//分隔线，默认显示
splitLine:{
show:false //是否显示，默认为true
}
}
],
//坐标
yAxis : [
{
//坐标轴类型，横轴默认为类目型'category' 纵轴默认为数值型'value'
type : 'value',
//坐标轴文本标签
axisLabel : {
formatter: '{value} 人' //间隔名称格式器%
},
//竖轴线条
axisLine:{
lineStyle:{
color:'#333', //颜色
width:'1' //线条高度
}
},
splitLine:{
show:false
}
}
],
series : [
{
name:'最高气温', //系列名称
type:'line', //图表类型
data:[11, 11, 15, 13, 12, 13, 10],
//系列中的数据内容数组
smooth:'true', //平滑曲线显示
stack:'null',
itemStyle : { //图形样式
normal: { //默认样式
label : {
//标签
show: true, //显示策略
position: 'right' //标签显示位置
}
}
}
}
]
};
optionx = {
//标题
title : {
text: '未来一周气温变化', //主标题文本
subtext: '纯属虚构' //副标题文本
},
//提示框
tooltip : {
trigger: 'axis' //提示类型
},
//图例
legend: {
data:['最低气温'] //图例 内容
},
//工具箱
toolbox: {
show : true, //显示策略
feature : { //启用功能
magicType : {//动态类型切换
show: true,
//'line', 'bar', 'stack', 'tiled', 'force', 'chord', 'pie',
'funnel'
type: ['line', 'bar']
},
dataView : { //数据视图
show: true,
readOnly: false,
optionToContent: function(opt) {
var axisData = opt.xAxis[0].data;
var series = opt.series;
var table = '
'
+ '
'
+ '
'
+ '
'
+ '
';
for (var i = 0, l = axisData.length; i < l; i++)
{
table += '
'
+ '
'
+ '
'
+ '
'
+ '
';
}
table += '
时间
' + series[0].name + '
' + series[1].name + '
' + axisData[i] + '
' + series[0].data[i] + '
' + series[1].data[i] + '
';
return table;
}
},
restore : {show: true} //还原，复位原始图表
}
},
//坐标
xAxis : [
{
//坐标轴类型，横轴默认为类目型'category' 纵轴默认为数值型'value'
type : 'category',
boundaryGap : false,
//坐标轴两端空白策略，数组内数值代表百分比
//类目型坐标轴文本标签数组，指定label内容
data : ['周一','周二','周三','周四','周五','周六','周日'],
//横轴线条
axisLine:{
lineStyle:{
color:'#333', //颜色
width:'1' //线条高度
}
},
//分隔线，默认显示
splitLine:{
show:false //是否显示，默认为true
}
}
],
//坐标
yAxis : [
{
//坐标轴类型，横轴默认为类目型'category' 纵轴默认为数值型'value'
type : 'value',
//坐标轴文本标签
axisLabel : {
formatter: '{value} 人' //间隔名称格式器%
},
//竖轴线条
axisLine:{
lineStyle:{
color:'#333', //颜色
width:'1' //线条高度
}
},
splitLine:{
show:false
}
}
],
series : [
{
name:'最低气温', //系列名称
type:'line', //图表类型
data:[4, 21, 6, 7, 9, 15, 2], //系列中的数据内容数组
smooth:'true', //平滑曲线显示
stack:'null',
itemStyle : { //图形样式
normal: { //默认样式
label : {
//标签
show: true, //显示策略
position: 'right' //标签显示位置
}
}
}
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
myChartx.setOption(optionx);
//图标内容大小自适应
setTimeout(function (){
window.onresize = function () {
myChart.resize();
myChartx.resize();
}
},1)
}
);
相关文章：
opencv——pcb上寻找mark点（拟合椭圆的方法）
#include "stdafx.h" // FitCircle.cpp : 定义控制台应用程序的入口#include "cv.h" #include "highgui.h" #include "cxcore.h" #include "cvaux.h" #include <iostream>using namespace cv; using namespace std; v…
bit,Byte、KB、MB、GB、TB、PB、EB之间的关系
计算机存储信息的最小单位，称之为位（bit），音译比特，二进制的一个“0”或一个“1”叫一位；计算机存储容量基本单位是字节（Byte），音译为拜特，8个二进制位组成1个…
echarts 点亮中国插件研究
echarts 真的是个神奇的东西，最近做了一个需要点亮中国的移动端项目，前期就怎样点亮中国做了调研，发现微博当初炫酷的点亮效果就是用echarts做的，于是研究了一下。 一连研究了一堆demo，不管从官网还是GitHub上面&#…
linux进程间通信：无名管道 pipe
文章目录内核层实现结构通信原理特点使用函数声明使用实例单向通信双向通信编程注意事项管道中无数据时读操作会阻塞将管道的写端句柄关闭，不会影响读端数据读取管道中没有数据，写操作关闭则读操作会立即返回管道大小测试 64K管道发生写满阻塞࿰…
争吵所达到的效果要_悟空：不要害怕争吵，有时候争吵一些不喜欢的事情也能创造和谐...
悟空：八戒，你吃了早饭去把马喂了吧。八戒：好的。悟空：喂了马你去看看我们午饭可以吃什么，如果有需要提前做预备的什么事儿，你知道该怎么做吧？八戒：好的。悟空：昨天&#…
Log4j日志管理的用法
参考网址： http://www.blogjava.net/314508313/archive/2011/11/14/363653.html http://www.cnblogs.com/likwo/archive/2010/09/01/1814994.html http://fanqiang.chinaunix.net/app/other/2006-06-22/4640.shtml http://www.blogjava.net/rickhunter/articles/281…
多线程实现生产者消费者模型
首先是一个仓库接口，该接口规定的仓库大小，仓库的存取方法，如下所示 1 package pers.lan.jc.pc;2 3 /**4 * author lan [1728209643qq.com]5 * create 2018-11-27 15:596 * desc 仓库7 */8 public interface Repertory<T> {9 10 …
再记一次ceph object unfound的艰辛历程
文章目录先说问题：再说解决尝试1：尝试2(该尝试建议先在自己环境搭配对应业务测试通过后再现场尝试)：感谢 学无止境996同学的陪伴和vigourtyy美丽女友的支持，直到这个解决问题的深夜先说问题： ceph 12.2.1生产环境&…
2014-01-04 SQL练习
目标数据库 250,czzznew/czzznew *关于执行计划：在PL/SQL选中查询的语句后，按下F5即可，其中Cost列表示当前操作的代价（消耗），值越大代表性能越差 t_rkxx表 (1):用2种以上方法查出xm(姓名)为test或者Test的人…
多重集表示合json数据_计数DP（划分数，多重集组合数）
划分数：把n个无区别的物品划分成不超过m组。 dp[i][j]j的i划分的总数。 dp[i[j]dp[i][j-i]dp[i-1][j] 即：将j个物品分成i份，有两种情况：每份划分都大于等于1 dp[i][j-i]; 存在有一份以上用0划分dp[i-1][j]int main(){int n,m;cin&…
搭建PHP环境遇到的问题!!
为什么80%的码农都做不了架构师？>>> 问题1： 再次./configure以下错误发生 configure: error: xml2-config not found. Please check your libxml2 installation. 解决方法： 安装libxml2 # yum install libxml2-devel 问题2&…
linux进程间通信：shell管道 | 的实现
文章目录介绍重定向函数介绍总结linux terminal输入如下命令，其中"|"符号即为我们上文中所说的无名管道介绍 正如我们上文中所描述的"|“无名管道提供了具有亲缘关系的进程之间的通信，它由于直接使用系统调用，运行效率较高。…
Golang的接口
当一只鸟走路像鸭子，游泳像鸭子，叫起来也像鸭子，那么我们就认为它就是鸭子。 Duck typing 的理念因此比喻得名。 Golang 通过 interface 实现 duck typing。 Effective Go 文章中这样描述 interface: interface 指定了一种描述对象行为的方法…
mysql 5.6.15_mysql-5.6.15-win32.zip免安装配置
此随笔是根据网上的资料整理的：环境：Windows XP系统软件来源：mysql官网下载1.下载mysql-5.6.15-win32.zip；2.解压MySQL压缩包；以下以加压到“F:\Program Files\Mysql\mysql-5.6.15-win32”为例：3.将解压目录…
jquery treeview 树形插件
jquery treeview 插件参数说明 treeview开源地址：https://github.com/jzaefferer/jquery-treeview 1、animated：String or Number 设置展开子节点时的显示速度，有 slow、normal、fast 或者指定速度值，与 jQuery 的 hide࿰…
spark调优（一）-开发调优，数据倾斜，shuffle调优
主要分为开发调优、资源调优、数据倾斜调优、shuffle调优几个部分。 开发调优和资源调优是所有Spark作业都需要注意和遵循的一些基本原则，是高性能Spark作业的基础；数据倾斜调优，主要讲解了一套完整的用来解决Spark作业数据倾斜的解决方案&am…
linux进程间通信：popen函数通过管道与shell通信
函数描述 FILE *popen(const char* command,const char* type) 该函数的执行过程如下： a. 调用pipe创建一个管道，并fork创建一个子进程来执行shell,shell会创建一个子进程来执行commad b. 将父进程的输入输出重定向到管道，建立一个单向的数据…
新的小游戏发布啦。Pop Jungle
丛林爱消除是一款画面清新，效果绚丽的消除类休闲游戏。你只需要选中尽可能多的图块，并消除它们就可以得到高分，并有无限多的关卡等待你去征服。一旦你开始玩儿你将无法停止下来，如果你还是消除星星的粉丝，那你更加不能…
mysql thread safe_Windows环境下完全手工配置Apache、MySQL和PHP（Thread Safe）
happydagui：现在LAMP(Linux、Apache、MySQL、PHP/Perl/Python的简称)已经很流行了。在Windows下也有类似的，比如 WAMP(Apache, MySQL, PHP on Windows)。这篇文章主要是介绍如何在Windows环境下完全手工配置Apache、MySQL和PHP，都是解压后直接…
点滴积累【C#】---检验编号在本表中自动生成，与其他表无关
检验编号在本表中自动生成，与其他表无关 效果： 描述：在本表中自动生成编号，与其他表无关。 调用： 1 protected void Page_Load(object sender, EventArgs e)2 {3 Response.Expires -1;4 …
Alpha冲刺（9/10）
团队信息 队名：爸爸饿了组长博客：here作业博客：here组员情况 组员1（组长）：王彬 过去两天完成了哪些任务 学习jQuery的AJAX部分的基础知识,对web端如何异步获取服务器信息有了初步认识接下来的计划 & 还…
linux进程通信：pipe实现进程同步
文章目录通过管道同步进程实现代码管道缓冲区设置缓冲区大小总结 ：pipe的特点通过管道同步进程 管道自带同步互斥机制： 管道的内核实现：fs/pipe.c ，主要通过内核的锁以及等待队列等机制实现 管道的write操作会阻塞进程 当内存缓冲…
（转）MySQL联表查询
资料源于网络 一.内联结、外联结、左联结、右联结的含义及区别在SQL标准中规划的（Join）联结大致分为下面四种：1.内联结：将两个表中存在联结关系的字段符合联结关系的那些记录形成记录集的联结。2.外联结：分为外左联结和…
极小连通子图和极大连通子图_强连通分量与拓扑排序
前言由于GacUI里面开始多处用上拓扑排序，我决定把之前瞎JB搞出来的算法换掉，换成个正式的。之前我自己弄了个写起来很简单的算法，然后每一处需要用到的地方我就重新做一遍。当然这样肯定也是不行的，我觉得也差不多积累到重构的临界…
INTERVAL数据类型-007学习笔记
http://baggio785.itpub.net/post/31233/286119 INTERVAL数据类型用来存储两个时间戳之间的时间间隔。 可以指定years and months，或者days,hours,minuts,seconds之间的间隔。本文为oracle的学习笔记，结合实例介绍INTERVAL数据类型。 INTERVAL数据类型用…
scrapy模拟用户登录
scrapy框架编写模拟用户登录的三种方式： 方式一：携带cookie登录，携带cookie一般请求的url为登录后的页面，获取cookie信息应在登录后的页面获取，cookie参数应转成字典形式 # -*- coding: utf-8 -*- import re import sc…
linux 系统调用 open函数使用
函数介绍 本文仅仅将open系统调用的使用简单总结一下，关于其实现原理大批的大佬分享可以自行学习。open系统调用主要用于打开或者创建一个文件，并返回文件描述符。 头文件 #include <fcntl.h>函数名称 a. int open(const char *pathname, int fl…
配置zendframework开始工作（加入环境变量）
首先需要把把两个路径加入到环境变量中 1、我用的php环境是xampp，安装在di盘，我要把d:/xampp/php/这个路径加入到环境变量 2、下载zendframework（我用的版本是1.）,把安装包中的bin目录加入到环境变量 3、关于设置php/php.ini中设置…
mysql计算两gps坐标的距离_mysql 计算两坐标间的距离
mysql 5.6.1 加入了空间数据支持功能，新增了st_*相关函数，可以非常方便的计算两个地理坐标点的距离了。如下例子：按我的坐标计算周边坐标的距离并由近到远排序select name,st_distance(point(113.327955,23.129717),point)*111195 as distanc…
（转）mxArray数据类型
1 、数据类型mxArray的操作 在上节的Matlab引擎函数中，所有与变量有关的数据类型都是mxArray类型。数据结构mxArray以及大量的mx开头的函数，广泛用于Matlab 引擎程序和Matlab C数学库中。mxArray是一种很复杂的数据结构，与Matlab中的array相对…