22:30 提问
百度echarts官方实例动态数据怎么跑起来？一直粘贴官方代码，就是跑不起来。
这是基础代码，option是空的
&div id="main" style="height:400px"&&/div&
&script src="/build/dist/echarts.js"&&/script&
&script type="text/javascript"&
require.config({
echarts: '/build/dist'
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
function (ec)
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option =
myChart.setOption(option);
这是官方代码（进入百度echarts官网，实例，其他，动态数据即是）：
option = {
text: '动态数据',
subtext: '纯属虚构'
tooltip : {
trigger: 'axis'
data:['最新成交价', '预购队列']
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
dataZoom : {
show : false,
start : 0,
type : 'category',
boundaryGap : true,
data : (function (){
var now = new Date();
var res = [];
var len = 10;
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
now = new Date(now - 2000);
type : 'category',
boundaryGap : true,
data : (function (){
var res = [];
var len = 10;
while (len--) {
res.push(len + 1);
type : 'value',
scale: true,
name : '价格',
boundaryGap: [0.2, 0.2]
type : 'value',
scale: true,
name : '预购量',
boundaryGap: [0.2, 0.2]
series : [
name:'预购队列',
type:'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data:(function (){
var res = [];
var len = 10;
while (len--) {
res.push(Math.round(Math.random() * 1000));
name:'最新成交价',
type:'line',
data:(function (){
var res = [];
var len = 10;
while (len--) {
res.push((Math.random()*10 + 5).toFixed(1) - 0);
var lastData = 11;
clearInterval(timeTicket);
timeTicket = setInterval(function (){
lastData += Math.random() * ((Math.round(Math.random() * 10) % 2) == 0 ? 1 : -1);
lastData = lastData.toFixed(1) - 0;
axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
// 动态数据接口 addData
myChart.addData([
// 系列索引
Math.round(Math.random() * 1000), // 新增数据
// 新增数据是否从队列头部插入
// 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
// 系列索引
lastData, // 新增数据
// 新增数据是否从队列头部插入
// 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
// 坐标轴标签
这段官方代码要怎么放？或者直接给我一份完整的html最好不过了
按赞数排序
我觉得你没理解echarts的机制，可以多读读源码。
下面这样，无非实现一个动态更新数据。
&div id="main" style="height:400px"&&/div&
&script src="/build/dist/echarts.js"&&/script&
&script type="text/javascript"&
require.config({
echarts: '/build/dist'
'echarts',
'echarts/chart/line' ,
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
function (ec)
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
text: '动态数据',
subtext: '纯属虚构'
tooltip : {
trigger: 'axis'
data:['最新成交价', '预购队列']
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
dataZoom : {
show : false,
start : 0,
type : 'category',
boundaryGap : true,
data : (function (){
var now = new Date();
var res = [];
var len = 10;
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
now = new Date(now - 2000);
type : 'category',
boundaryGap : true,
data : (function (){
var res = [];
var len = 10;
while (len--) {
res.push(len + 1);
type : 'value',
scale: true,
name : '价格',
boundaryGap: [0.2, 0.2]
type : 'value',
scale: true,
name : '预购量',
boundaryGap: [0.2, 0.2]
series : [
name:'预购队列',
type:'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data:(function (){
var res = [];
var len = 10;
while (len--) {
res.push(Math.round(Math.random() * 1000));
name:'最新成交价',
type:'line',
data:(function (){
var res = [];
var len = 10;
while (len--) {
res.push((Math.random()*10 + 5).toFixed(1) - 0);
myChart.setOption(option);
var lastData = 11;
clearInterval(timeTicket);
timeTicket = setInterval(function (){
lastData += Math.random() * ((Math.round(Math.random() * 10) % 2) == 0 ? 1 : -1);
lastData = lastData.toFixed(1) - 0;
axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
// 动态数据接口 addData
myChart.addData([
// 系列索引
Math.round(Math.random() * 1000), // 新增数据
// 新增数据是否从队列头部插入
// 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
// 系列索引
lastData, // 新增数据
// 新增数据是否从队列头部插入
// 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
// 坐标轴标签
官方的代码里面没有定义timeTicket这个变量，var axisDvar timeTclearInterval(timeTicket);在这里加一句就可以了
其他相关推荐ECharts 3测试版发布，焕然一新的面貌
查看: 2307|
评论: 0|原作者: oschina|来自: oschina
摘要: ECharts 在 github 上沉寂了数个月，想必很多小伙伴充满了各种疑问，ECharts是不是不维护了？你们以后是不是不做了？别着急，其实这几个月，我们的设计师、工程师一直厉兵秣马，加班加点，没有周末，没有女朋友地疯 ...
ECharts 3 测试版发布注：由于直接转载内容，文章中实例效果无法查看，如需查看详情请往&ECharts 在 github 上沉寂了数个月，想必很多小伙伴充满了各种疑问，ECharts是不是不维护了？你们以后是不是不做了？别着急，其实这几个月，我们的设计师、工程师一直厉兵秣马，加班加点，没有周末，没有女朋友地疯狂工作中。 终于，ECharts 的又一个重大版本即将出炉，在 ECharts 3 正式版发行前，我们选择了今天，12.3，一个能够隐喻我们一步一步从1.0到2.0再到3.0走来的日子，提前给广大用户带来 ECharts 3 的测试版。 那 ECharts 3 究竟会有哪些新的特征，我们用数月究竟在颠覆着自己的什么呢？接下来让我们一一为您道来：焕然一新的面貌&&&&&&&&&&&&&&&&从底层的技术架构到上层的外观展现，都进行了较大的升级。无需多言，请看下面的诸多例子。数据和坐标系的抽象及统一ECharts 3 中，数据结构进行了统一化抽象，最常用的数据结构有：线性表、树、图。例如，线性表以及树、图的节点列表的结构可以归一化为这样的二维数组：[
&&&&[1,91,45,125,"良"],
&&&&[2,65,27,78,"良"],
&&&&[3,83,60,84,"优"],
]这种设计利于跨组件的数据处理（数据过滤、视觉编码等），并且为多维度的数据使用带来了方便。ECharts 3 中另一个重要的数据结构抽象是独立出了“坐标系”概念。事实上在 ECharts 2 中已经有gridpolar配置项存在，但是并不是按一个“坐标系”的理解去实现的。ECharts 3 中，支持了直角坐标系（catesian，兼容 ECharts 2 中的 grid）、极坐标系（polar）、地理坐标系（geo）。图表可以跨坐标系存在，例如折、柱、散点等图可以放在直角坐标系上，也可以放在极坐标系上，甚至可以放在地理坐标系中。下面是一个极坐标系的例子：点击图片加载真实图表下面是一个散点图在地理坐标系上的例子：点击图片加载真实图表我们要可视化的数据有多种类型，比如“数值型”、“类别型”，数轴也要对这不同的类型给予支持。更细致的，还支持“时间轴”、“对数轴”等。数据和坐标系统一抽象后，能够方便得搭配不同类型的数轴。下面是一个x轴y轴均为“类别型“数轴（category）的例子：点击图片加载真实图表一个 ECharts 实例中，也可以同时存在多个坐标系了，这便于做出更丰富的协同分析效果。下面是著名的 Anscombe's Quartet：点击图片加载真实图表其实，ECharts 3 中每一种组件都可以同时存在多个。比如可以使用多个dataRange组件进行更复杂的筛选，多个title组件表达更个性化的文字展示。在 Option 中，用数组来表示每种组件的多个实例，如：polar:&[
&&&&{...},&//&第一个极坐标系
&&&&{...},&//&第二个极坐标系
]移动支持流量珍贵的移动端需要图表库的体积尽量小。ECharts 和 ZRender 代码的重构，带来了核心部分体积的减小。ECharts 组件众多，并且会逐渐增加，我们提供了更细粒度的按需打包能力。最小体积缩小为 ECharts 2 的 40%。这是 ECharts 3 的移动端交互也做了优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移，如下图：点击图片加载真实图表配置方式说明：123456789101112chart.setOption({&&&&...,&&&&&dataZoom:&[&&&&&&&&&&&&&&&&{&&&&&&&&&&&&type:&'inside',&&&&&&&&&&&&&xAxis:&0,&&&&&&&&&&&&start:&20,&&&&&&&&&&&&end:&70&&&&&&&&}&&&&]});另外说一个细节：ECharts 2 中，直角坐标系的位置设置参数（x, y, x2, y2 等），设置的是“两个数轴所形成的矩形”的位置，并不包含数轴的文字、刻度。这种做法使得数据变化时数轴位置能够稳定，从而方便存在动态数据或数据过滤组件（dataZoom）等场景下的展示。但是缺点是，使用者需要估算数轴文字的宽度，并不方便使用。ECharts 3 中，直角坐标系（grid属性）中加入了 containLabel 参数，位置参数包含了数轴文字的尺寸，从而方便自适应数轴文字的宽度，不用担心超出屏幕。123grid:&{&&&&containLabel:&true}ECharts 3 还将持续对移动端的体验进行优化。更深度的交互式数据探索交互是从数据中发掘信息的重要手段。总览为先缩放过滤按需查看细节是数据可视化交互的基本需求。ECharts 一直在“交互”的路上前进，legenddataRangedataZoomroamselecttooltip等组件提供了数据筛取、视图缩放、展示细节等能力。ECharts 3 中，对这些组件进行了广泛增强，例如支持在数据的各种坐标轴、维度进行数据过滤、缩放，以及在更多的图中采用这些组件。下面举几个例子。点击图片加载真实图表在任何数轴，都支持使用dataZoom组件进行数据窗口操作。 如上图，在左右y轴的dataZoom，配置方式说明：1234567891011121314151617181920chart.setOption({&&&&...,&&&&&dataZoom:&[&&&&&&&&&&&&&&&&{&&&&&&&&&&&&xAxis:&0,&&&&&&&&&&&&&&start:&10,&&&&&&&&&&&&&end:&30&&&&&&&&&&&&},&&&&&&&&{&&&&&&&&&&&&yAxis:&0,&&&&&&&&&&&&&&&filterMode:&'empty'&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&},&&&&&&&&{&&&&&&&&&&&&yAxis:&1&&&&&&&&&&&}&&&&]});另一个例子：点击图片加载真实图表上图的数据实际是多维的：1234567891011[&&&&[1,91,45,125,0.82,34,23,"良"],&&&&[2,65,27,78,0.86,45,29,"良"],&&&&[3,83,60,84,1.09,73,27,"良"],&&&&[4,109,81,121,1.28,68,51,"良"],&&&&[5,106,77,114,1.07,55,51,"轻度污染"],&&&&[6,109,81,121,1.28,68,51,"轻度污染"],&&&&[7,106,77,114,1.07,55,51,"轻度污染"],&&&&[8,89,65,78,0.86,51,26,"良"],&&&&...]里面每一列是一个维度，从左到右，依次是：日期AQI指数PM2.5PM10一氧化碳 (CO)二氧化氮 (NO2)二氧化硫 (SO2)等级。一个直角坐标系只有两个轴，我们可以把第一个维度（时间）映射到x轴，第二个维度（AQI指数）映射到y轴。但如果想对其他维度的数据进行视觉表达和交互式的筛选，则可以用到上图中的dataRange组件。第一个dataRange组件表达了PM2.5这一维度的筛选，把数值映射到了圆形大小；第二个dataRange组件表达了二氧化硫这一维度的筛选，把数值映射到了颜色明暗。配置方式说明：视觉映射配置在inRangeoutOfRange属性中。图表的和dataRange组件本身的能分别配置这两个属性（见下面方controller属性） 。inRangeoutOfRange中，能够配置的视觉通道有：color,colorSaturation,colorLightness,colorHue,symbol,symbolSize。color设置为颜色值列表，如[#324123, '#453e2f', '#756ff2', ...]，会自动根据数值进行差值计算，得到映射的颜色。其他视觉通道均使用数组的形式表明 [最小值, 最大值]。12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152chart.setOption({&&&&...,&&&&&dataRange:&[&&&&&&&&{&&&&&&&&&&&&&&&dimension:&2,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&min:&0,&&&&&&&&&&&&&&&&&&&&&max:&250,&&&&&&&&&&&&&&&&&&&calculable:&true,&&&&&&&&&&&&text:&['圆形大小：PM2.5'],&&&&&&&&&&&&inRange:&{&&&&&&&&&&&&&&&&symbolSize:&[10,&70]&&&&&&&&&&&&&&},&&&&&&&&&&&&outOfRange:&{&&&&&&&&&&&&&&&&symbolSize:&[10,&70],&&&&&&&&&&&&&&&&&color:&['rgba(255,255,255,.2)']&&&&&&&&&&&&&},&&&&&&&&&&&&controller:&{&&&&&&&&&&&&&&&&inRange:&{&&&&&&&&&&&&&&&&&&&&color:&['#c23531']&&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&outOfRange:&{&&&&&&&&&&&&&&&&&&&&color:&['#444']&&&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&},&&&&&&&&&&&&...,&&&&&&&&&&},&&&&&&&&{&&&&&&&&&&&&&&&dimension:&6,&&&&&&&&&&&&&&min:&0,&&&&&&&&&&&&max:&50,&&&&&&&&&&&&calculable:&true,&&&&&&&&&&&&precision:&0.1,&&&&&&&&&&&&text:&['明暗：二氧化硫'],&&&&&&&&&&&&inRange:&{&&&&&&&&&&&&&&&&colorLightness:&[1,&0.5]&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&},&&&&&&&&&&&&outOfRange:&{&&&&&&&&&&&&&&&&color:&['rgba(255,255,255,.2)']&&&&&&&&&&&&&},&&&&&&&&&&&&controller:&{&&&&&&&&&&&&&&&&inRange:&{&&&&&&&&&&&&&&&&&&&&color:&['#c23531']&&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&outOfRange:&{&&&&&&&&&&&&&&&&&&&&color:&['#444']&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&}&&&&&&&&}&&&&]});更丰富的视觉编码手段“数据可视化”本质是数据到视觉元素的编码过程。我们把数据映射到坐标系中的点，或者颜色、形状、图形大小等视觉通道。前述的dataRange提供了丰富的视觉编码的方式。另外在各种图中，也提供了一些有一定意义的视觉编码方式。例如：点击图片加载真实图表这个Treemap是奥巴马2012年的预算，每种类别的预算额度映射到了面积，使我们可以直观地感受到预算额的大小。而如果在这个图上，要进一步描述相比于 2011年 的增长率，我们可以将其映射到颜色的明暗度上。点击右上角图例中第三项“增长率”，能体会到这种比较效果。映射到明暗的配置方式说明：123456789101112131415161718192021222324252627282930313233chart.setOption({&&&&...,&&&&&series:&[&{&type:&'treemap',&data:&[&&&&{&&&&&&&&value:&[1313,&50],&&&&&&&&name:&'Centers&for&Medicare',&&&&&&&&children:&[&&&&&&&&&&&&{&...&}&&&&&&&&]&&&&},&&&&...&],&visualDimension:&2,&&&&&&&&&levels:&[&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&color:&[&&&&&&&&&&&&&&&&&&&&&&&&'#c23531',&'#314656',&'#61a0a8',&'#dd8668',&&&&&&&&&&&&&&&&&&&&&&&&'#91c7ae',&'#6e7074',&'#61a0a8',&'#bda29a',&&&&&&&&&&&&&&&&&&&&&&&&'#44525d',&'#c4ccd3'&&&&&&&&&&&&&&&&&&&&],&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&colorMappingBy:&'id'&&&&&&&&&&&&&},&&&&&&&&&&&&{&&&&&&&&&&&&&&&&colorAlpha:&[0.5,&1]&&&&&&&&&&&&&}&&&&&&&&&&&&],&&&&&&&&&&&&...&&&&&&&&&}&]});动画支持动画并不容易，容易带来代码结构的复杂、体积的增加、鲁棒性的降低。但是在可视化中动画往往易于表达出数据在变化时的联系，使用户不至于迷失焦点，这些对于用户交互分析、动态数据展示有着重要作用。ECharts 3 中在各种初始动画、转换动画、强调动画上都做了相当多的工作，使得数据观察更人性和清晰。动画表达变化的一个例子，各国人均收入（x轴）、平均寿命（y轴）、人口（圆面积）在时间维度上的展现：点击图片加载真实图表新图表ECharts 3 中加入了一些新的图表。关系图（Graph）：最直观的表达关系数据。支持了 gexf。能够采用不同的布局方法。点击图片加载真实图表Treemap：易于展示树状结构的数据，较大的数据更容易被关注到。点击图片加载真实图表平行坐标系（Parallel Coordinates）：易于表达多维数据。点击图片加载真实图表TODO 更多的图表还有待被加入。Option的变动ECharts 3 对于 ECharts 2 的 Option 配置兼容，但是一小部分原有的 Option 配置方式已经不被推荐（deprecated），个别细节有所差异。组件/图表位置的描述，统一采用了x，x2，y，y2，width，height的方式，每个属性值都可以使用绝对数值（表示px）或者百分比（表示占 echarts container 的百分比）。这样的表达方式和 css 比较相近，表达能力比较强，易于屏幕尺寸的适应和调整。label属性描述了系列中标签的相关配置信息。ECharts 2 中，label属性一般放在itemStyle.normal和itemStyle.emphsis中，例如：1234567891011121314151617181920212223itemStyle:&{&&&&normal:&{&&&&&&&&...,&&&&&&&&label:&{&&&&&&&&&&&&show:&true,&&&&&&&&&&&&formatter:&...,&&&&&&&&&&&&textStyle:&{&&&&&&&&&&&&&&&&...&&&&&&&&&&&&}&&&&&&&&}&&&&},&&&&emplsis:&{&&&&&&&&...,&&&&&&&&label:&{&&&&&&&&&&&&show:&true,&&&&&&&&&&&&position:&'top',&&&&&&&&&&&&formatter:&...,&&&&&&&&&&&&textStyle:&{&&&&&&&&&&&&&&&&...&&&&&&&&&&&&}&&&&&&&&}&&&&}}为了让结构更合理，ECharts 3 中 label 被移出来和 itemStyle 平级：itemStyle:&{
&&&&normal:&{
&&&&&&&&...
&&&&emphsis:&{
&&&&&&&&...
&&&&normal:&{
&&&&&&&&...
&&&&emphasis:&{
&&&&&&&&...
}当然，原来的配置方式还是兼容的，但是不推荐。另外，ECharts 3 中新增了不少Option配置项，在前面的例子中简单做了一些介绍了，这里不赘述。更多细节会在将要发布的文档中描述。更丰富、漂亮的图表、更炫酷的动画、更加专业的可视化实现、更深度的交互式数据探索、更丰富的视觉编码手段、更好的移动支持、更好的性能、更小的体积，不知道上面的新特性是否有击中您对于图表、对于数据可视化的需求与痛点，如果还没看过瘾，可以点击我们全新的查看更多漂亮而强大的 ECharts 图表。在 3.0 正式版发布之前，我们还有很多的工作需要完善：正式版我们将精耕细作，为大家带来一份优质的新年礼物。最后，欢迎大家继续支持 ECharts，我们会一如既往地给大家带来优秀的产品。
上一篇：下一篇：
快毕业了，没工作经验，
找份工作好难啊？
赶紧去人才芯片公司磨练吧!!ECharts3实现动态数据+时间坐标轴的操作-js教程-PHP中文网QQ群微信公众号还没有收藏ECharts3实现动态数据+时间坐标轴的操作对ECharts3官网中动态数据+时间坐标轴实例进行了修改，X轴为当前时间，并数据累积。可在ECharts3实例中的代码框中粘贴直接查看效果。function randomData() {
now = new Date(+now + 1000);
value = value + Math.random() * 21 - 10;
name: now.toString(),
Math.round(value)
}var data = [];var now = new Date();var value = Math.random() * 1000;
option = {
text: '动态数据 + 时间坐标轴'
tooltip: {
trigger: 'axis',
formatter: function (params) {
params = params[0];
var date = new Date(params.name);
return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
axisPointer: {
animation: false
type: 'time',
splitLine: {
show: false
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
series: [{
name: '模拟数据',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: data
setInterval(function () {
//data.shift();
data.push(randomData());
myChart.setOption({
series: [{
data: data
}, 1000);以上就是ECharts3实现动态数据+时间坐标轴的操作的详细内容，更多请关注php中文网其它相关文章！共3篇735点赞收藏分享：.&猜你喜欢请问一下你是怎么修改让x轴显示当前时间的首页上一页下一页尾页PHP中文网：独家原创，永久免费的在线，php技术学习阵地！
All Rights Reserved | 皖B2-QQ群:关注微信公众号R＋Echarts画双坐标轴折柱混合图 - 简书
R＋Echarts画双坐标轴折柱混合图
柱状图和折线图的组合图是excel里很容易实现的一个功能，日常报表里也经常使用这类型的图。最近想用Rmarkdown自动生成日报并直接发邮件，但却被这个简单的图难住了。
先造一些数据，没有实际意义。柱状图要显示绝对值，折线图要显示百分比。formattable包可以把小数显示成百分比而保留其numeric的类型。
library(formattable)
# test data 数据均为捏造
y&-data.frame(date=c('1月','2月','3月','4月','5月','6月','7月'),
waterfall = c(2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6),
humidity=percent(c(0., 0.3, 0.1, 0.7273)))
在excel中的效果如下图，有点丑，别介意，大致就是这么个意思：
尝试1: ggplot2
R里画图第一个想到的是用ggplot2，觉的就是一个柱状图的layer加上一个折线图就好了。但是想起来容易，操作起来却挺困难。第一个是双坐标轴的问题。这个问题无解，因为据说ggplot2的作者不喜欢双坐标轴，觉得会误导读者。那折线图就不要次坐标了吧，也不是不可以。然后把小数据映射到大数据的量级，如100%对应max(降水量)，避免百分比的量级太小而在图片上看不清。然后是添加图例。柱状图和折线图可以单独添加图例，但是两个会添加在同一个位置并且彼此重叠。因为legend的position是通过theme来调节的，不能分别作用于柱状图和折线图。目前我还没找到解决方法，希望高人指点。我能做到的就是下图这样了：
ggplot(y)+
geom_bar(aes(x=y[1:7,1], y=y[1:7,2]), stat="identity", width=.5, fill='#227487')+
ylim(c(0,200))+
geom_text(aes(x=y[1:7,1], y=y[1:7,2], label=y[1:7,2]), vjust=-0.5)+
geom_line(aes(x =y[1:7,1], y=y[1:7,3]*max(y[1:7,2]),linetype = '湿度' , group=1), size=1.2, color='#ca3e1c')+
# scale_colour_manual(values = c("湿度"="red")) +
geom_point(aes(x =y[1:7,1], y=y[1:7,3]*max(y[1:7,2])), size=4, shape=21, fill='white', color='#ca3e1c')+
geom_text(aes(x=y[1:7,1], y=y[1:7,3]*max(y[1:7,2]),
label=paste(y[1:7,3]*100, '%', sep='')), vjust=-1)+
xlab('')+ylab('降雨量')+
theme(axis.text=element_text(size=12), axis.title=element_text(size=12),
legend.title=element_blank(),
panel.background = element_rect(fill = 'white', colour = 'white'),
legend.position="top")+
ggtitle('测试数据')
双坐标轴还可以用R自带的plot来做，也有一个双坐标轴的包，但图都有点丑，所以没有再研究了。有兴趣可以看stackoverflow上的这篇
尝试2: recharts
recharts是R调用百度的一个包，目前其实有两个包叫recharts，一个是做的，另一个是的。taiyun的包里把echarts的各个图形分类别做了接口，代码简单，但是可定制的地方较少，比较适合不需要复杂图形的情况。yihui的包基本就是把js语言先用R的格式写，然后再翻译成js语言（我猜的），所以定制能力几乎和原生echats一样。我这里用的是yihui的包，注意安装时不要通过cran而是从github安装，因为从cran安装的recharts版本较低。
devtools::install_github("yihui/recharts")
我用的echarts模版是它的。在默认的基础上改了bar和line的颜色，增加并格式化label，修改次坐标轴的label格式。
library(recharts)
barnline&-list(
title = list(text = '测试数据'),
tooltip = list(),
legend = list(data=c('降水量','湿度')),
xAxis= list(
type= 'category',
data= y$date,
splitLine = list(show=FALSE) # 删掉竖线
yAxis= list(
type= 'value',
name= '降水量',
max= ceiling(max(y$waterfall/10))*10,
interval= ceiling(max(y$waterfall/10))*10/5,
splitLine=list(
show=FALSE # 删掉横线
#axisLabel= list (formatter= '{value} ml')
type= 'value',
name= '湿度',
splitLine=list(
show=FALSE
interval= 0.2 ,
axisLabel= list(formatter= JS("function(value){return value * 100 + '%';}"))
series = list(
name="降水量",
type='bar',
data=y$waterfall,
itemStyle = list(
normal=list(color = '#227487', label = list(show = TRUE)) # set bar color and label
name='湿度',
type='line',
yAxisIndex= 1,
data=y$humid
itemStyle = list(
normal=list( label = list(show = TRUE, formatter= JS("function(c){return Math.floor(c.value
* 1 + '%';}"))) # label保留小数点后两位
echart(barnline, width = 700, height =400)
效果截图，动态效果可参考echarts示例：
一点体会：
把echarts源代码中所有的冒号:{}改成等号=, 所有的花括号{}改成list()。
不知道yihui接的是echarts2还是echarts3，在echarts3里显示数据label是单独的一条label语句，但R里要放到itemStyle中，否则报错。
总的来说很方便，定制性很高。