在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. 测试php页面执行代码时间

    //生命一个计算脚本运行时间的类 class Timer { private $startTime = 0; //保存脚本开始执行时的时间(以微秒的形式保存) private $stopTime = ...

  2. php重载

    重载 PHP所提供的"重载"(overloading)是指动态地"创建"类属性和方法.我们是通过 魔术方法(magic methods)来实现的. 当调用当前环 ...

  3. XML3_XML元素和节点的具体解释

    就像一个树状的目录.可以把第一行当作它扎根的“土地”.XML文件是由节点构成的.它的第一个节点为“根节点”.一个XML文件必须有且只能有一 个根节点,其他节点都必须是它的子节点.我们在FLASH里使用 ...

  4. TDirectory.Delete 创建删除目录简单示例

    使用函数: 1.System.IOUtils.TDirectory.CreateDirectory//创建目录 2.System.IOUtils.TDirectory.Exists        // ...

  5. Ubuntu下Memcache的安装与基本使用

    安装Memcache Memcache分为两部分,Memcache服务端和客户端.Memcache服务端是作为服务来运行的,所有数据缓存的建立,存储,删除实际上都是在这里完成的.客户端,在这里我们指的 ...

  6. ubuntu maven 安装 设置

    http://blog.csdn.net/tiefanhe/article/details/9774189 1.安装 maven ,下载地址:http://maven.apache.org/downl ...

  7. 【技术贴】jsp出现getOutputStream() has already been calle

    此错误经常在websphere6.x版本里出现:原因是jsp文件中的尖括号百分号里面有空行或者其他的什么原因,Servlet1.2规范规定了OutputStream只能获得一次,在jsp中实际上已经通 ...

  8. 【技术贴】解决 myeclipse打不开报错an error has occurred, see .

    方法1.右键选中快捷方式属性选项,在快捷方式页,目标一项最后加上-clean选项,如C:\MyEclipse6\eclipse.exe -clean. 然后重新启动一下MyEclipse. 方法2. ...

  9. IE连EXCHANGE的HTTPS时,出现错误

    "There is a problem with this website's security certificate" 这种问题,一般是SSL或CA认证证书的问题. 一般从服务 ...

  10. Android的十六进制颜色值

    [转自]: http://blog.csdn.net/fxtxz2/article/details/7598256 颜色和不透明度 (alpha) 值以十六进制表示法表示.任何一种颜色的值范围都是 0 ...