在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. svn-代码回滚

    第一种:# svn revert [-R] something 第二种: 1. svn update,svn log,找到最新版本(latest revision)    2. 找到自己想要回滚的版本 ...

  2. 禁止选择文本和禁用右键 v2.0

    禁止鼠标右键(注:在火狐浏览器没有起到效果作用) <script> function stop() { return false }; document.oncontextmenu = s ...

  3. php快递单号查询源码

    贴下记录下php查询快递单号的源码,能查询各种快递的快递单号记录,中通.圆通快递.顺丰快递等都不是问题.只需要在 爱快递(www.aikuaidi.cn)上面申请一个快递key即可,下面把源码分享下, ...

  4. 006 Python的操作符

      算术操作符: +    -    *    /       %    **    // 如 >>> a = 5 >>> a = a + 3 >>&g ...

  5. Core Animation

    position和anchorPoint的区别  -整理自苹果官方文档- Layers使用两种坐标系: 1. point-based  :1)当需要定义layer在屏幕中或是距另一个layer的位置时 ...

  6. WEB架构师成长之路之三-架构师都要懂哪些知识

    Web架构师究竟都要学些什么?具备哪些能力呢?先网上查查架构师的大概的定义,参见架构师修炼之道这篇文章,写的还不错,再查查公司招聘Web架构师的要求. 总结起来大概有下面几点技能要求: 一. 架构师有 ...

  7. 在虚拟机的linux中利用VMware Tools实现与windows共享文件

        很多人都知道安装"VMware Tools"可以实现与windows共享,但是其实它的功能远不止此.安装了"VMware Tools"后,虚拟机的网络. ...

  8. 控制器 - URL routing HTTP module(一)

    URL routing HTTP module 负责处理检查入站请求的 URL,并将它们分派到最合理的处理器上.URL routing HTTP module 也替代了旧版本的 ASP.NET URL ...

  9. 广州麒麟网络工作室 qlgame eninge(anroid) opengles c++ matrix

    在opengles中,采用的是可编程渲染管线,矩阵需要自己实现! 先说一下矩阵的理论: 参考一下资料:http://blog.sina.com.cn/s/blog_6084f588010192ug.h ...

  10. Entity Framework关联实体的三种加载方法

    推荐文章 EF性能之关联加载 总结很好 一:介绍三种加载方式 Entity Framework作为一个优秀的ORM框架,它使得操作数据库就像操作内存中的数据一样,但是这种抽象是有性能代价的,故鱼和熊掌 ...