Echarts双轴图的配置.
在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双轴图的配置.的更多相关文章
- HighCharts之2D柱状图、折线图的组合双轴图
		HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ... 
- 如何拼接FusionCharts的JSON格式的双轴图
		1.问题背景 假如,项目中遇到这样一个问题:利用FusionCharts中的JSON格式拼接双轴图,并将JSON字符串转换成JSON对象传输到前台,在页面上展示出来. 2.设计源码 /** * * @ ... 
- pyhton中matplotlib箱线图的绘制(matplotlib双轴图、箱线图、散点图以及相关系数矩阵图))
		//2019.07.23 1.箱形图,又称为盒式图,一般可以很好地反映出数据分布的特征,也可以进行多项数据之间分布特征的比较,它主要包含五个基础数据:中位数,两个上下分位数以及上下边缘线数据 其中的一 ... 
- Highcharts 测量图;Highcharts 圆形进度条式测量图;Highcharts 时钟;Highcharts 双轴车速表;Highcharts 音量表(VU Meter)
		Highcharts 测量图 配置 chart.type 配置 配置 chart 的 type 为 'gauge' .chart.type 描述了图表类型.默认值为 "line". ... 
- Flex实现双轴条状图
		1.问题背景 一般的,柱状图可以实现双轴图,但是如何实现双轴条状图? 2.实现实例 <?xml version="1.0" encoding="utf-8" ... 
- echarts之折线图配置(附带图例很多做成分页效果)
		<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ... 
- echarts折现图配置
		js引用和div容器 <div id="container" style="height: 100%"></div> <scrip ... 
- Python Pandas 时间序列双轴折线图
		时间序列pv-gmv双轴折线图 import numpy as np import pandas as pd import matplotlib.pyplot as plt n = 12 date_s ... 
- [置顶]
        echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)
		echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ... 
随机推荐
- Sass中的Map 详解
			Sass中的Map长什么样 Sass 的 map 常常被称为数据地图,也有人称其为数组,因为他总是以 key:value 成对的出现, Sass 的 map 长得与 JSON 极其相似. json: ... 
- Ubuntu 13.10 PHP 5.5.x mcrypt missing – Fatal Error: Undefined function mcrypt_encrypt()!
			[原文]http://www.tuicool.com/articles/goto?id=myM7veR I had updgraded my Ubuntu from 13.04 to 13.10 la ... 
- Delphi 我常用的几个下载源码的站点
			盒子.Delphi园地就不说了,介绍几个其它的: 源码爱好者,特别喜欢. http://www.codefans.net/sort/list_10_1.shtml 新兴源码: http://www.n ... 
- Dev表格导出工具类 z
			using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace xSof ... 
- 动画讲解 Eclipse 常用快捷键
			Eclipse有强大的编辑功能, 工欲善其事,必先利其器, 掌握Eclipse快捷键,可以大大提高工作效率. 小坦克我花了一整天时间, 精选了一些常用的快捷键操作,并且精心录制了动画, 让你一看就会. ... 
- 查找类class所在的jar包
			CTRL+SHIFT+R 意思是输入关键字搜索当前工程的 对象. CTRL+SHIFT+T 输入关键字搜索当前工程的类. 
- NET Portability Analyzer
			NET Portability Analyzer 分析迁移dotnet core 大多数开发人员更喜欢一次性编写好业务逻辑代码,以后再重用这些代码.与构建不同的应用以面向多个平台相比,这种方法更加容易 ... 
- Android中通过访问本地相册或者相机设置用户头像
			目前几乎所有的APP在用户注册时都会有设置头像的需求,大致分为三种情况: (1)通过获取本地相册的图片,经过裁剪后作为头像. (2)通过启动手机相机,现拍图片然后裁剪作为头像. (3)在APP中添加一 ... 
- 【转】WPF中的Binding技巧(二)
			WPF中的Binding技巧(二) 接上篇, 我们来看一看Elementname,Source,RelativeSource 三种绑定的方式 1.ElementName顾名思义就是根据Ui元素 ... 
- 中断服务程序(Interrupt Service Routines,ISR)注意事项
			转自ISR之不能做什么 中断是嵌入式系统中重要组成部分,很多编译器开发商都让标准c支持中断,并引入关键字_interrupt.但是: 1.ISR不能有返回值: 2.ISR不能传递参数: 3.ISR应该 ... 
