echart两组柱状图对比时,不同类型根据各类型的最大值为基准进行展示

项目中遇到的问题:因为数据太小,箭头的地方展示不出来,这时的两组对比数据是根据一个最大值为基准进行渲染的。但我们想实现不同类型的对比根据不同的基准值渲染。

理想效果如下图:

实现代码:

option = {
    grid: {
        left: ‘3%‘,
        right: ‘4%‘,
        bottom: ‘3%‘,
        containLabel: true
    },
    xAxis: {
        type: ‘log‘,//这是重点
    },
    yAxis: {
        type: ‘category‘,
        data: [‘巴西‘,‘印尼‘,‘美国‘,‘印度‘,‘中国‘,‘世界人口(万)‘]
    },
    series: [
        {
            name: ‘2011年‘,
            type: ‘bar‘,
            barGap: ‘30%‘,//设置不重叠  当值为-100%时重叠
            data: [183, 49, 034, 9710, 44, 30]
        },
        {
            name: ‘2012年‘,
            type: ‘bar‘,
            data: [125, 8, 310, 914, 141, 107]
        }
    ]
};

原文地址:https://www.cnblogs.com/javascripter/p/10951466.html

时间: 2024-10-10 20:36:13

echart两组柱状图对比时,不同类型根据各类型的最大值为基准进行展示的相关文章

Linux 两组信号对比(关闭和停止进程信号)

之前看信号的时候,没有太注意不同信号的对比.今天再次看到的时候,突然感觉对一些信号,非常相似,乃至非常容易混淆.今天周末就抽空总结一下. 一.关闭进程信号 常见的4中关闭进程信号是SIGKILL,SIGINT,SIGTERM,SIGQUIT. SIGKILL,就是为了关闭进程用的,无法捕获以及忽略.场景是,管理员把一些占用资源的进程或者无法掌控的孤儿进程杀死. SIGINT,interrupt(中断)进程,这个是可以捕获以及忽略.可以使用ctrl+c发出信号,直接发给父进程以及子进程,这样的话就

Linux 两组信号对比

博客逐步迁移到,独立博客,原文地址 http://www.woniubi.cn/two_groups_signal_difference/ 之前看信号的时候,没有太注意不同信号的对比.今天再次看到的时候,突然感觉对一些信号,非常相似,乃至非常容易混淆.今天周末就抽空总结一下. 第一组 关闭进程信号 常见的4中关闭进程信号是SIGKILL,SIGINT,SIGTERM,SIGQUIT. SIGKILL,就是为了关闭进程用的,无法捕获以及忽略.场景是,管理员把一些占用资源的进程或者无法掌控的孤儿进程

【华为OJ】201301 JAVA 题目0-1级 将数组分为相等的两组

描述:  编写一个函数,传入一个int型数组,返回该数组能否分成两组,使得两组中各元素加起来的和相等,并且,所有5的倍数必须在其中一个组中,所有3的倍数在另一个组中(不包括5的倍数),能满足以上条件,返回true:不满足时返回false. 知识点: 语言基础,字符串,循环,函数,指针,枚举,位运算,结构体,联合体,文件操作,递归    题目来源: 内部整理  练习阶段: 初级  运行时间限制: 10Sec 内存限制: 128MByte 输入: 输入输入的数据个数 输入一个int型数组 输出: 返

两组有序数列的中位数

两组升序排列的数组A[m]和B[n], 求他们的中位数. 注意,中位数的概念哦-相信你会百度一下的- 格式: 第一行输入数字m,接下来一行输入数组A[m], 第三行输入数字n,第四行输入数组B[n],接下来输出中位数.两个数组的长度都不超过1000. 注意,需要保留5位小数哦-所以,你设计函数的时候请设计成double类型哦- 样例输入 1 3 5 1 2 4 5 6 样例输出 3.50000 package jsk; import java.util.Scanner; public class

int与Integer的区别(基本类型与复杂类型的对比)转

基本类型,或者叫做内置类型,是JAVA中不同于类的特殊类型. Java中的简单类型从概念上分为四种:实数.整数.字符.布尔值.但是有一点需要说明的是,Java里面只有八种原始类型,其列表如下: 实数:double.float 整数:byte.short.int.long 字符:char 布尔值:boolean 复杂类型和基本类型的内存模型本质上是不一样的,简单数据类型的存储原理是这样的:所有的简单数据类型不存在"引用"的概念,简单数据类型都是直接存储在内存中的内存栈上的,数据本身的值就

python字典转化成json格式。JSONEncoder和JSONDecoder两个类来实现Json字符串和dict类型数据的互相转换

遇到问题:进行Webservice接口测试时,对接口入参数据进行了处理,变成了dict格式,去进行接口请求报错. 需要转成成json格式,双引号去扩. 如下: 更改代码: # 在Python标准库的json包中,提供了JSONEncoder和JSONDecoder两个类来实现Json字符串和dict类型数据的互相转换. from json import * if __name__=="__main__": d={} d['a'] =1 d['b']=2 d[3]='c' d[4]=['

两个集合对比

在GitHub上有个项目,本来是作为自己研究学习.net core的Demo,没想到很多同学在看,还给了很多星,所以觉得应该升成3.0,整理一下,写成博分享给学习.net core的同学们. 项目名称:Asp.NetCoreExperiment 项目地址:https://github.com/axzxs2001/Asp.NetCoreExperiment 今天先分享几个对集合知识点. 两个集合对比代码: GitHub代码库(https://github.com/axzxs2001/Asp.Net

js函数传递参数时,如果是路径类型的参数,里边包含:'\'字符报错

在函数中,传递的参数中有“\”字符,js会将它默认为转义字符串,如果没有出现与他匹配的转义字符串,就会缺失,例如: 将这样的一个字符串作为一个参数:C:\Program Files (x86)\MySQL\MySQL Server 5.7\data\ 传递到函数里边的值就会被默认转化为:C:Program Files (x86)MySQLMySQL Server 5.7data 如果要实现这个参数的精确传递,就需要将字符串进行处理,一般会有两种方式: ①:将字符串里边的 ‘\’ 字符替换成 ‘/

计算两个日期之间相差几天(Date类型与String类型互相转换)

一:计算两个日期之间相差几天 1 /** 2 * 3 */ 4 package com.hlcui.date; 5 6 import java.text.ParseException; 7 import java.text.SimpleDateFormat; 8 import java.util.Calendar; 9 import java.util.Date; 10 11 import org.junit.Test; 12 13 /** 14 * @author Administrator