在series中的数据组加个属性,yAxisIndex: 1,表示第二个数据用的是第二个y轴,不加这个属性的话都是默认0,即第一个属性,再配置yAxis的值第一个为左侧坐标轴,右册坐标轴为第二个配置参数的值.
optionC = {
tooltip: {
trigger: 'axis'
}, legend: {
data: ['蒸发量', '降水量', '平均温度']
},
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}],
yAxis: [{
type: 'value',
name: '水量',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '温度',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [{
name: '蒸发量',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: '降水量',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name: '平均温度',
type: 'line',
yAxisIndex: 1,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};

Echarts双轴图的配置.的更多相关文章

  1. HighCharts之2D柱状图、折线图的组合双轴图

    HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...

  2. 如何拼接FusionCharts的JSON格式的双轴图

    1.问题背景 假如,项目中遇到这样一个问题:利用FusionCharts中的JSON格式拼接双轴图,并将JSON字符串转换成JSON对象传输到前台,在页面上展示出来. 2.设计源码 /** * * @ ...

  3. pyhton中matplotlib箱线图的绘制(matplotlib双轴图、箱线图、散点图以及相关系数矩阵图))

    //2019.07.23 1.箱形图,又称为盒式图,一般可以很好地反映出数据分布的特征,也可以进行多项数据之间分布特征的比较,它主要包含五个基础数据:中位数,两个上下分位数以及上下边缘线数据 其中的一 ...

  4. Highcharts 测量图;Highcharts 圆形进度条式测量图;Highcharts 时钟;Highcharts 双轴车速表;Highcharts 音量表(VU Meter)

    Highcharts 测量图 配置 chart.type 配置 配置 chart 的 type 为 'gauge' .chart.type 描述了图表类型.默认值为 "line". ...

  5. Flex实现双轴条状图

    1.问题背景 一般的,柱状图可以实现双轴图,但是如何实现双轴条状图? 2.实现实例 <?xml version="1.0" encoding="utf-8" ...

  6. echarts之折线图配置(附带图例很多做成分页效果)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. echarts折现图配置

    js引用和div容器 <div id="container" style="height: 100%"></div> <scrip ...

  8. Python Pandas 时间序列双轴折线图

    时间序列pv-gmv双轴折线图 import numpy as np import pandas as pd import matplotlib.pyplot as plt n = 12 date_s ...

  9. [置顶] echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)

    echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...

随机推荐

  1. Swift语言 1小时速学教程

    本文由 张渊杰 (网名寂静)编写 Swift语言 1小时速学教程 写在前面的话 有些人可能想, 呵呵, 1小时学一门语言, 你不是搞笑吧, 我想说, 是的, 完全可以, 就要看你怎么学了 要想在1小时 ...

  2. Groovy 数组操作

    将字符串转为map def str="['汤菜':['1000000028','1000000030'],'肉菜':['1000000032'],'素材':['1000000031']]&q ...

  3. a标签拨打电话、发短信、发邮件

    1.<a href=”tel:xxxx”>拨打电话</a> 2.<a href=”sms:xxxx”>发短信</a> 3.<a href=”mai ...

  4. gulp 中的增量编译

    最近花一点时间学了下 gulp,顺便学了下 sass,因为工作中并不需要用(我比较希望学习是需求驱动),所以一直拖到现在才学.突然觉得学习这类工具性价比很高,半天一天即可上手,技能树丰富了(尽管可能只 ...

  5. Clang 与 LLVM

    我们在iOS调试中经常会看到Clang这个,那么Clang到底是什么呢?我们来简单了解一下. Clang是一个C.C++.OC语言的轻量级编译器.源代码发布于BSD协议下.Clang是由C++编写,基 ...

  6. ubuntu13.10 登陆后黑屏,没有菜单栏,可以启动termina,怎么解决?

    最近在学习openGL,自己的电脑是intel集显加nvidia GT630M,本来想应该可以支持到opengl4以上的,可是发现nvidia的显卡由于驱动问题,好像一直没有用到,所以只支持了open ...

  7. C++程序的构成和书写形式

    C++程序的结构和书写格式归纳如下:  (1) 一个C++程序可以由一个程序单位或多个程序单位构成.每一个程序单位作为一个文件.在程序编译时,编译系统分别对各个文件进行编译,因此,一个文件是一个编译单 ...

  8. Android学习之Image操作及时间日期选择器

    一.基础学习 1.ImageView是图片容器,就相当于RadioGroup是RadioButton的容器一样,是View的直接子类. 1: <ImageView 2: android:id=& ...

  9. python加密解密

    from Crypto.Cipher import Blowfish  #easy_install pycrypto可以获得

  10. AJAX里调用AJAX,作定时进度刷新

    这个确实搞了一段时间,但成就感有啦... 哈哈,这个自动部署平吧,异步队列CELERY+REDIS,发布进度实时AJAX的技术点全部打通!!! 而获取实时进度,我用的是RESTFUL FRAMEWOR ...