基本入门1、 新建一个echarts.html文件，为ECharts准备一个具备大小（宽高）的Dom。&!--&为ECharts准备一个具备大小（宽高）的Dom&--&&&&&&div&id="main"&style="height:400px"&&/div&2、 新建&script&标签引入模块化单文件echarts.js&script&src="dist/echarts.js"&type="text/javascript"&&/script&3、 新建&script&标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js），引入图表文件见引入ECharts2&script&type="text/javascript"&&&&&&&&&//&路径配置&&&&&&&&require.config({&&&&&&&&&&&&paths:&{&&&&&&&&&&&&&&&&echarts:&'dist'&&&&&&&&&&&&}&&&&&&&&});&&&&&/script&4. &script&标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成，option见API & Doc&//&使用&&&&&&&&require(&&&&&&&&&&&&[&&&&&&&&&&&&&&&&'echarts',&&&&&&&&&&&&&&&&'echarts/chart/bar'&//&使用柱状图就加载bar模块，按需加载&&&&&&&&&&&&],&&&&&&&&&&&&function&(ec)&{&&&&&&&&&&&&&&&&//&基于准备好的dom，初始化echarts图表&&&&&&&&&&&&&&&&var&myChart&=&ec.init(document.getElementById('main')); &&&&&&&&&&&&&&&&var&option&=&{&&&&&&&&&&&&&&&&&&&&title:&{&&&&&&&&&&&&&&&&&&&&&&&&text:&'某地区蒸发量和降水量',&&&&&&&&&&&&&&&&&&&&&&&&subtext:&'纯属虚构'&&&&&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&&&&&tooltip:&{&&&&&&&&&&&&&&&&&&&&&&&&trigger:&'axis'&&&&&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&&&&&legend:&{&&&&&&&&&&&&&&&&&&&&&&&&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&}&&&&&&&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&&&&&calculable:&true,&&&&&&&&&&&&&&&&&&&&xAxis:&[&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&type:&'category',&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&data:&['1月',&'2月',&'3月',&'4月',&'5月',&'6月',&'7月',&'8月',&'9月',&'10月',&'11月',&'12月']&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&&&&&&&],&&&&&&&&&&&&&&&&&&&&yAxis:&[&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&type:&'value'&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&&&&&&&],&&&&&&&&&&&&&&&&&&&&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],&&&&&&&&&&&&&&&&&&&&&&&&&&&&markPoint:&{&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&data:&[&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&type:&'max',&name:&'最大值'&},&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&type:&'min',&name:&'最小值'&}&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&]&&&&&&&&&&&&&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&&&&&&&&&&&&&markLine:&{&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&data:&[&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&type:&'average',&name:&'平均值'&}&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&]&&&&&&&&&&&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&&&&&&&&&&&&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],&&&&&&&&&&&&&&&&&&&&&&&&&&&&markPoint:&{&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&data:&[&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&name:&'年最高',&value:&182.2,&xAxis:&7,&yAxis:&183,&symbolSize:&18&},&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&name:&'年最低',&value:&2.3,&xAxis:&11,&yAxis:&3&}&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&]&&&&&&&&&&&&&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&&&&&&&&&&&&&markLine:&{&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&data:&[&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&type:&'average',&name:&'平均值'&}&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&]&&&&&&&&&&&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&]&&&&&&&&&&&&&&&&};&&&&&&&&&&&&&&&&//&为echarts对象加载数据&&&&&&&&&&&&&&&&&myChart.setOption(option);&&&&&&&&&&&&}&&&&&&&&);5.&&& 浏览器中打开echarts.html，就可看到以下效果&&深入理解与学习1 学习过程中曾经遇到，第一次加载时可以显示图表，按F5刷新后就报js的错此时把所有js代码放到window.onload&=&function&()&{& }中就可以解决2 当确认前台js代码没有错，测试时还报js代码的错，此时是传入的数据有问题！！！&&Legend中的&data，与series中的两个name一致（这里是有两个量），否则会有问题，比如修改成&&&& &legend:&{data:&['蒸发量1',&'降水量1']&},将option简化为var&option&=&{&&&&&&&&&&&&&&&&&&&&title:&{&&&&&&&&&&&&&&&&&&&&&&&&text:&'客流情况'&&&&&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&&&&&tooltip:&{&&&&&&&&&&&&&&&&&&&&&&&&trigger:&'axis'&&&&&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&&&&&legend:&{&&&&&&&&&&&&&&&&&&&&&&&&data:&['进站客流']&&&&&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&&&&&calculable:&true,&&&&&&&&&&&&&&&&&&&&xAxis:&[&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&type:&'category',&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&data:&['1月',&'2月',&'3月',&'4月',&'5月',&'6月',&'7月',&'8月',&'9月',&'10月',&'11月',&'12月']&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&&&&&&&],&&&&&&&&&&&&&&&&&&&&yAxis:&[&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&type:&'value'&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&&&&&&&],&&&&&&&&&&&&&&&&&&&&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]&&&&&&&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&]&&&&&&&&&&&&&&&&};&&&&&&&&&&&&&&&&//&为echarts对象加载数据&&&&&&&&&&&&&&&&&myChart.setOption(option);&&&&&&&&&&&&}&&&&&&&&);修改横纵坐标的值&data:&['人民广场站',&'建设一路站',&'飞虹路站',&'朝阳站',&'曹家桥站',&'潘水站',&'盈丰路站',&'建设一路站',&'飞虹路站',&'朝阳站',&'曹家桥站',&'潘水站',&'盈丰路站']&data:&[,&,&,&310,&,&650,&210,&200,&900]&柱形条太大，看起来不爽，此时可以设置柱形条宽度的属性，我不用这种方法&&&&& axisLabel:&{&rotate:&45,&margin:&2,&textStyle:&{&color:&'#000',&fontWeight:&'bold',&fontFamily:&'宋体'}&},&& 设置为false就不能拖动柱形条了项目应用项目中开发与入门中开发有以下不同：首先可能有很多个图表，所以应该封装一个获取option的方法；其次，由于数据是从数据库中加载过来的，所以横纵坐标的数据不能写死，以及图表类型（柱形图，折线图）也不能写死Option获取方法//获取各线路进站客流图表的参数&&&&&&&&//OptionStation为Echarts图表横坐标的值，OptionFlow为纵坐标的值&&&&&&&&//charType为图表类型（柱形图、折线图），hovertitle为鼠标移动到位置时显示的纵坐标的值&&&&&&&&function&GetOption(OptionStation,&OptionFlow,&linetitle,&charType,&hovertitle)&{&&&&&&&&&&&&var&option&=&{&&&&&&&&&&&&&&&&title:&{&&&&&&&&&&&&&&&&&&&&text:&linetitle&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&tooltip:&{&&&&&&&&&&&&&&&&&&&&trigger:&'axis'&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&calculable:&false,&&&&&&&&&&&&&&&&xAxis:&[&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&type:&'category',&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&axisLabel:&{&rotate:&45,&margin:&2,&textStyle:&{&color:&'#000',&fontWeight:&'bold',fontFamily:'宋体'}&},&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&data:&OptionStation&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&&&&&&&],&&&&&&&&&&&&&&&&yAxis:&[&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&type:&'value'&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&&&&&&&&],&&&&&&&&&&&&&&&&series:&[&&&&&&&&{&&&&&&&&&&&&name:&hovertitle,&&&&&&&&&&&&type:&charType,&&&&&&&&&&&&data:&OptionFlow&&&&&&&&}&&&&]&&&&&&&&&&&&};&&&&&&&&&&&&return&&&&&&&&&}var&optionStationFlow4&=&GetOption(station4,&passengerFlow4,&'四号线进站客流',&'bar',&'进站客流');&后台传输数据到前台一般来说，由于js是在前台，我们需要在页面加载时去后台（不是aspx.cs文件）请求数据，此时需要注意以下问题1 项目中可能是请求特定日期，特定线路等条件的数据，而时间，线路等参数可能是url传过来的，我们在前台中就要通过获取这些参数到后台中查询相应的数据。2 获取后台数据要使用同步，不能异步，异步的话数据就更新不了，会报数据为null的错&前台中手写获取url参数的方法&//手写JavaScript获取url参数的方法&&&&&&&&function&GetRequest()&{&&&&&&&&&&&&var&url&=&decodeURI(location.search);&//获取url中"?"符后的字串&&&&&&&&&&&&var&theRequest&=&new&Object();&&&&&&&&&&&&if&(url.indexOf("?")&!=&-1)&{&&&&&&&&&&&&&&&&var&str&=&url.substr(1);&&&&&&&&&&&&&&&&strs&=&str.split("&");&&&&&&&&&&&&&&&&for&(var&i&=&0;&i&&&strs.&i++)&{&&&&&&&&&&&&&&&&&&&&theRequest[strs[i].split("=")[0]]&=&(strs[i].split("=")[1]);&&&&&&&&&&&&&&&&}&&&&&&&&&&&&}&&&&&&&&&&&&return&theR&&&&&&&&}使用方式如下var&Request&=&GetRequest();&var&FromDate&=&Request["fromdate"];&前台中同步获取后台传过来的数据首先后台需要到数据库中获取数据并拼接字符串，拼接格式为['人民广场站',&'建设一路站',&'飞虹路站',&'朝阳站',&'曹家桥站',&'潘水站',&'盈丰路站',&'建设一路站',&'飞虹路站',&'朝阳站',&'曹家桥站',&'潘水站',&'盈丰路站']接着序列化成对象返回JavaScriptSerializer&serializer&=&new&JavaScriptSerializer();&&&&&&&&&&&&return&serializer.Serialize(new&{&Station2&=&strA,&PassengerFlow2&=strB,&Station4&= strC,&PassengerFlow4&=&strD&});&前台中&script&src="../../Scripts/jquery.js"&type="text/javascript"&&/script&&script&src="../../Scripts/common.js"&type="text/javascript"&&/script&function&executeDataService(FromDate,&Todate,&Lines)&{&&&&&&&&&&&&Common.Util.DataServices('PTDDOperationDailyServices$GetStationFlow',&{&fromDate:&FromDate,&todate:&Todate,&lines:&Lines&},&function&(returnValue)&{&&&&&&&&&&&&&&&&var&jsonObj&=&$.parseJSON(returnValue);&&&&&&&&&&&&&&&&station2&=&eval("("&+&jsonObj.Station2&+&")");&&&&&&&&&&&&&&&&passengerFlow2&=&eval("("&+&jsonObj.PassengerFlow2&+&")");&&&&&&&&&&&&&&&&station4&=&eval("("&+&jsonObj.Station4&+&")");&&&&&&&&&&&&&&&&passengerFlow4&=&eval("("&+&jsonObj.PassengerFlow4&+&")");&&&&&&&&&&&&},&"",&false);&&&&&&&&}&所以需要通过eval方法将它转换成对象&
最新教程周点击榜
微信扫一扫用R制作百度Echarts交互图文档(1)
很多朋友还在不断向我询问echartR的问题。此包已经重写，请参考下载安装，并阅读。
Intro 前言
本工具来源于百度开发的国内顶尖水平的开源javascript可视项目()。Yang Zhou和Taiyun Wei基于该工具开发了包，经Yihui
Xie后，可通过htmlwidgets传递js参数，大大简化了开发难度。但此包开发仍未完成。为了赶紧上手用，基于该包做了一个函数echartR，用于制作。需要R版本&=3.2.0.
This tool originates from
a top-tier&javascript
visualization project of China: (). Yang Zhou and
Taiyun Wei developed an experimental R package
based on it,
which then evoluted into
by Yihui Xie
to pass js parameters through &htmlwidgets.
The package is sill uder development. I developed a function
based on this package to make . This function
requires R&=3.2.0.
echartR的主要工作是将Echarts参数封装成list，Yihui Xie的原型函数echart被用来处理这个list。echart函数的如下，除了数据本身，并没有提供其他参数的位置。
echartR majorly packs Echarts parameters into a list while
the prototype function developed by Yihui Xie, is used to parse the
of &echart
is as follows, which does not provide parameters entry other than
dataset itself.
if (! 'recharts' %in% installed.packages()[,1]){
install.packages('recharts',
repos = c('http://yihui.name/xran', '')
library(recharts)
echart(iris, ~Sepal.Length, ~Sepal.Width)
echart(iris, ~Sepal.Length, ~Sepal.Width, series = ~Species)
Usage 用法
首先，安装好最新版的和
了解最基本的R语言技巧，能够用R整理、读写数据集
最好会用knitr，会写
Installation 安装
安装 Install
(install.packages('devtools'))
安装 Insall recharts (install_github('yihui/recharts'))
下载 Download
&echartR.R脚本文件到本地位置
script file to local disk: )
调用 Source
脚本 script (假设我将脚本放在本地 suppose I stored the script to local GitHub
Repo: &source("~/Github/recharts/R/echartR.R"))
Grammar 语法
echartR(data, x=NULL, y, z=NULL, series=NULL, weight=NULL,
xcoord=NULL, ycoord=NULL, x1=NULL, xcoord1=NULL, ycoord1=NULL,
type="scatter", stack=FALSE,
title=NULL, subtitle=NULL, title_url=NULL, subtitle_url=NULL,
symbolList=NULL, dataZoom=NULL,
dataRange=NULL, splitNumber=NULL, dataRangePalette=NULL,
xAxis=list(lab=NULL,color=NULL,splitLine=T,banded=F,rotate=0), xlab=NULL,
yAxis=list(lab=NULL,color=NULL,splitLine=T,banded=F,rotate=0), ylab=NULL,
xAxis1=list(lab=NULL,series=NULL,reverse=F,color=NULL,splitLine=T,
banded=F,rotate=0), xlab1=NULL,
yAxis1=list(lab=NULL,series=NULL,reverse=F,color=NULL,splitLine=T,
banded=F,rotate=0), ylab1=NULL,
xyflip=FALSE, AxisAtZero=TRUE, scale=TRUE,
palette='aetnagreen', tooltip=TRUE, legend=TRUE, toolbox=TRUE,
pos=list(title=6, legend=11, toolbox=1, dataZoom=6, dataRange=8, roam=2),
calculable=TRUE, asImage=FALSE,
markLine=NULL, markLinesmooth=NULL, markPoint=NULL,
theme=list(backgroundColor=NULL, borderColor=NULL, borderWidth=1),
data: 数据集 dataset
x: x变量，直方图、饼图、环形图、玫瑰图可省略。x variable, only
omitable for histograms, pie, ring and rose charts。
y: y变量 y variable
z: z变量，只接受时间/日期变量，并打开时间轴。z variable, only accept
data/time variable to open time axis
series: Series(系列)变量 series variable
weight: 权重变量，可用于直方图、气泡图等 weight variable, used
in histogram, bubble, etc
xcoord: 纬度坐标变量，仅用于点/线标注的map。Latitude variable,
only for point/line-marking map.
ycoord: 经度坐标变量，仅用于点/线标注的map。Longitude variable,
only for point/line-marking map.
x1: 备用自变量，仅用于线标注的地图、力导向图和和弦图。Backup x variable,
only for line-marking map, force and chord chart.
xcoord1: 备用纬度坐标变量，仅用于线标注的map。Backup latitude
variable, only for line-marking map.
ycoord1: 备用经度坐标变量，仅用于线标注的map。Backup Longitude
variable, only for line-marking map.
type: 默认
default&scatter，可选
options "scatter", "bubble", "bar", "line", "linesmooth", "map",
"k", "pie", "ring", "rose","area", "areasmooth", "chordribbon",
"chord", "force", "tree", "treemap", "wordcloud", "heatmap",
"histogram", "funnel", "pyramid", "radar", "radarfill"
如选择map，则控制项必须写作一个长度为3的向量：c(“map”,mapType,markType)。mapType可选“world”、“china”，或简体中文表示的具体中国地名。markType为area时，用区块颜色表示效应大小；为point时，用点在地图上做标注；为line时，用线条在地图上做标注。默认为c("map","china","area")。If&map&was
chosen, the control option should be a vector of length 3:
c("map",mapType,markType).&mapType&could
be either "world" or “china”, of which simplified Chinese names are
required for 'china'. When&markType&equals
to “area”, the function colors polygons while
equals to “point”, it t while equals to
“line”, it ticks lines on the map.
默认FALSE，是否堆积。用于制作堆积条图、柱图、线图和面积图等直角坐标系图形。Default to FALSE (do not
stack). Used in stacked column, bar, line and area chart,
title: 标题 title of the figure
subtitle: 副标题 subtitle of the figure
图形要素的位置，写作一个列表，用1-12点钟方向指示。标题默认6点位，即底部居中位置。图例、工具箱、值域漫游轴、数据缩放轴、地图漫游控件默认位置分别是11、1、6、8、2点钟位。Position
of image elements which are integers 1-12. Title position default
to 6 (o'clock), which means bottom middle. Defaults to legend,
toolbox, dataRange, dataZoom, roamController are 11, 1, 6, 8, 2,
respectively.
title_url: 标题链接，url of the title
subtitle_url: 副标题链接, url of the
symbolList:
图形标志。可使用数组循环使用，如数组长度小于series水平数，则以最后一个标志填充。如设置为NULL或不设置，则循环显示Echarts默认的标志图形列表：c("circle","rectangle","triangle","diamond","emptyCircle","emptyRectangle","emptyTriangle","emptyDiamond")。也可任意指定"heart","droplet","pin","arrow","star5","star6"等非标图形。设为'none'则不显示。A
vector assigning symbols. You can use an array of symbols. If the
length of the symbols array is smaller than number of levels of the
series, the last symbol will be used to extend the array. If you
set symbolList NULL or leave it unset, the function circulates the
default symbol list of Echarts:
c("circle","rectangle","triangle","diamond","emptyCircle","emptyRectangle","emptyTriangle","emptyDiamond").
You can also assign non-standard symbols, such as
"heart","droplet","pin","arrow","star5","star6", "star7",
etc.& When assigned to 'none', no symbols are
dataZoom: 数据缩放轴，默认FALSE. The axis to zoom data.
Default to FALSE. 如dataZoom=TRUE，默认范围为0-100%。也可用一个长度为2的向量控制初始范围，如c(30,70)显示初始30-70%。If&dataZoom=TRUE,
the default range is 0-100%. You can assign a vector with length of
2 to&dataZoom&to
control the initial range. E.g.,c(30,70)&means
from 30% to 70% at the initial view.
dataRange:
数据范围漫游范围，默认不打开。如要打开，设置dataRange=c(高值标签,低值标签)
The range to zoom the data. Default to FALSE. Set
dataRange=c(High
value label,Low
value label) to enable dataRange.
splitNumber:
如打开数据漫游，可指定数据范围切分段数，默认为连续漫游轴(0)。在直方图里，如设定splitNumber，则将数据切分成splitNumber个块。When
dataRange is on, assign splitNumber to cut the range into discrete
sections. Default to 0 (continuous range). In histogram, if
splitNumber is set, the y variable will be cut into splitNumber
dataRangePalette:
如打开数据漫游，可单独指定漫游色板(同palette功能)，否则采用Echarts默认值。You can independently
assign palettes to dataRange (similar to overall palette). Default
to NULL (applies echarts defaults).
xAxis: x轴参数，写作一个列表，默认为list(lab=NULL,color=NULL,splitLine=T,banded=F,rotate=0),lab为标题，color为颜色，splitLine为分割线，banded为间隔区块，rotate为轴标签旋转(-90
~ 90)。x Axis parameters in a list, default
to&list(lab=NULL,color=NULL,splitLine=T,banded=F,rotate=0).
yAxis: y轴参数，参考xAxis。parameters of y Axis. Refer
xlab: 也可忽略xAxis项，单独通过xlab指定x轴标题。如xAxis[['lab']]和xlab冲突，取xlab。You
can also omit xAxis, directly assign xAxis title. xlab has a higher
priority than&xAxis[['lab']].
ylab: 也可忽略yAxis项，单独通过ylab指定y轴标题。如yAxis[['lab']]和ylab冲突，取ylab。You
can also omit yAxis, directly assign yAxis title. ylab has a higher
priority than&yAxis[['lab']].
xAxis1: 次级x轴参数，多系列数据时有效。写作一个列表，默认为list(lab=NULL,series=NULL,reverse=F,color=NULL,splitLine=T,banded=F,rotate=0)。其中，series指定放于次坐标轴的数据系列，可写系列名或序号，如c(1,2)或c('male','female')；reverse设为TRUE时将数据颠倒显示。Secondary
x axis, effecitve only if there are multiple series. Written in a
list, default tolist(lab=NULL,series=NULL,reverse=F,color=NULL,splitLine=T,banded=F,rotate=0).&series&set
which series to put on secondary x-axis, which can be either a name
vector or an index vector, e.g., c(1,2) or c('male','female'). The
data is fliped up when&reverse&is
yAxis1：级次y轴参数，参考xAxis1。
xlab1：次级x轴标题，优先级高于xAxis1列表中的lab项。Title of
secondary x-axis, with higher priority
than&lab&in
xAxis1 list,
ylab1：次级y轴标题，优先级高于yAxis1列表中的lab项。Title of
secondary y-axis, with higher priority
than&lab&in
yAxis1 list,
xyflip: 默认FALSE，是否翻转坐标轴。Flip x,y-axies. Default
AxisAtZero: 默认FALSE，坐标轴是否交叉于零点。Axes cross at
zero. Default to FALSE.
scale: 默认TRUE，是否基于最大、最小值调整坐标尺度。Rescale the axes
based on min and max values. Default to TRUE.
调色板。默认aetnagreen。Overall palette. Default to 'aetnagreen'.
种类 Palette names:
Aetna palettes: 可用
Including&"aetnagreen", "aetnablue",
"aetnaviolet", "aetnaorange", "aetnateal", "aetnacranberry"
RColorBrewer palettes: 可用
Including "BrBG", "PiYG", "PRGn", "PuOr", "RdBu", "RdGy", "RdYlBu",
"RdYlGn", "Spectral", "Accent", "Dark2", "Paired", "Pastel1",
"Pastel2", "Set1", "Set2", "Set3", "Blues", "BuGn", "BuPu", "GnBu",
"Greens", "Greys", "Oranges", "OrRd", "PuBu", "PuBuGn", "PuRd",
"Purples", "RdPu", "Reds", "YlGn", "YlGnBu", "YlOrBr",
ggthemes palettes: "calc",
"economist", "economist_white", "economist_stata","excel",
"exel_fill", "excel_old", "excel_new", "few", "fivethirtyeight",
"gdocs", "pander", "tableau", "stata",
"stata1","stata1r","statamono", "tableau20", "tableau10medium",
"tableaugray", "tableauprgy", "tableaublrd", "tableaugnor",
"tableaucyclic", "tableau10light", "tableaublrd12",
"tableauprgy12", "tableaugnor12","hc","darkunica",
"solarized","solarized_red", "solarized_yellow",
"solarized_orange","solarized_magenta","solarized_violet",
"solarized_blue", "solarized_cyan", "solarized_green", "wsj",
"wsj_rgby", "wsj_red_green", "wsj_black_green", "wsj_dem_rep",
"colorblind", "trafficlight"
其他Other palettes: "rainbow",
"terrain", "topo", "heat", "cm"
用法 Usage:
可以不设置，使用函数默认。Do not set the
value and function defaults will be loaded
可使用Echarts默认(palette=NULL)。Set&palette=NULL&to
apply Echarts defaults
可指定上述任何一种色板(palette=palette_name)。Set&palette=palette_name&to
assign any palette listed above
规定色板的同时加上个数限定，限定取色个数，如palette="calc(3)"，会从calc色板中随机取3种色彩。Set&palette=palette
name(number)&to restrain number of colors
within the palette (e.g.,palette="calc(3)"&picks
3 colors out of "calc"&randomly)
可以palette=c(色1,
色2, 色3, …)自定义色板向量（名称或hex式）。可以用colors()函数查看所有可用的色名。
tooltip: 默认TRUE，鼠标指针特效。Mouse
tip effects swtich. Default to TRUE.
图例，默认TRUE。可以写作一个长度为2的列表，list(mode="single/multiple",select=选中的系列)。如list(mode="single",select="Male")表示单选，初始仅选中显示Male系列。legend=FALSE则不显示图例。Whether
to show the legend. Default to TRUE. Can also be a list length
2:list(mode='single/multiple',select=vector(...)).
E.g.,&list(mode='single',select='Male')&means
singular choice, with series 'Male' selected at the initial
view.&legend=FALSE&closes
toolbox: 默认TRUE，是否显示工具箱。Echarts
Tool box switch. Default to TRUE.
calculable:
默认TRUE，是否支持拖曳重算(Echarts专利) Calculable switch (Echarts patent).
默认FALSE，是否显示为静态图。renderAsImage switch. Deafult to FALSE.
markLine: 显示标线，默认不显示。格式写作一个4或8列的数据框或矩阵 Show markline, default to
NULL. The grammar is a data.frame or matrix with 4 or 8
缩略格式 Short form ：
series name/index *
Light effect
String or number
String / NA
min/max/average/lm
TRUE / FALSE
完整格式 Full form :
series name/index *
Light effect
String or number
TRUE / FALSE
例子 Examples
如t(c('male',NA,'average',F))或t(c(1,NA,'average',F))都可表示male数据系列平均值标线，只用于line,
linesmooth, bar, scatter, bubble。lm可出线性回归标线，只用于散点或气泡图。如t(c(1,NA,'average',T))则表示male系列开启炫光特效。E.g.,
both&t(c('male',NA,'average',F))&and&t(c(1,NA,'average',F))&refer
to an average markline of the series 'male', only available for
line, linesmooth, bar, scatter, bubble charts. 'lm' refers to
linear regresson markline which is only available for scatters and
bubbles.&t(c(1,NA,'average',T))&opens
light effects of series 'male'.
如t(c('male',NA,100,0,5,100,5,F))表示在'male'数据系列中画一条经过P0(0,5)和P1(100,5)的直线。E.g.,t(c('male',NA,100,0,5,100,5,F))&refers
to a markline through P0(0,5) and P1(100,5) as of sereis 'male'.
在line, bar, k, scatter图中，'P0 x','P0 y','P1 x','P1
y'均被理解为直角坐标系的定位。在map中，这些坐标值必须写作经纬度。&t(c('male',NA,100,0,5,100,5,T))可打开male系列的炫光特效。
In line, bar, k and scatter charts, 'P0 x','P0 y','P1 x','P1 y' are
comprehended as coordinates. In map charts, these coordinates
should be lattitudes and longitudes.&t(c('male',NA,100,0,5,100,5,T))&opens
light effects of series 'male'.
markLinesmooth: 如要用平滑标线，可用markLinesmooth替代markLine。语法完全一样。Used this
instead of&markLine&for
smooth marklines with totally identical grammar.
markPoint: 显示标注点，默认不显示。格式写作一个4或6列的数据框或矩阵 Show markpoints, default
to NULL. The grammar is a data.frame or matrix with 4 or 6
缩略格式 Short form ：
series name/index *
Point name
Point type
Light effect
String or number
String / NA
TRUE / FALSE
完整格式 Full form :
series name/index *
Point name
Light effect
String or number
String / NA
TRUE / FALSE
例子 Examples
如t(c('male',NA,'min',F))或t(c(1,NA,'min',F))都可表示male数据系列最小值标注，只用于line,
linesmooth, bar, scatter, bubble。t('male',NA,'min',T)则表示male系列开启炫光特效。E.g.,
both&t(c('male',NA,'min',F))and&t(c(1,NA,'min',F))&refer
to a min markpoint of the series 'male', only available for line,
linesmooth, bar, scatter, bubble
charts.&t(c('male',NA,'min',T))&opens
light effects of series 'male'.
如t(c('male',NA,100,0,5,F))表示在'male'数据系列中标注点P(0,5)。E.g.,&t(c('male',NA,100,0,5,F))&refers
to a markpoint at P(0,5) as of sereis 'male'. 在line, bar, k,
scatter图中，'P x','P y', ...
均被理解为直角坐标系的定位。在map中，这些坐标值必须写作经纬度。&t(c('male',NA,100,0,5,T))可打开male系列的炫光特效。
In line, bar, k and scatter charts, 'P x','P y',... are
comprehended as coordinates. In map charts, these coordinates
should be lattitudes and longitudes.&t(c('male',NA,100,0,5,T))&opens
light effects of series 'male'.
theme: 主题元素设置，语法为theme=list(backgroundColor=color
name/value, borderColor=color name/value,
borderWidth=1)，color默认均为NULL，width默认为1。
&Examples 示例
以下为静态图示例，真实d3-js效果请前往&&&&&&&&
#Global settings
Sys.setlocale("LC_CTYPE","Chs")
source("~/Github/recharts/R/echartR.R")
knitr::opts_chunk$set(message=FALSE,warning=FALSE,results='asis')
Scatter 散点图
Mono-series Scatter 单系列散点图
没有数据系列，因此指定显示第1个系列的均数线(markLine=c(1,NA,'average',F))。
echartR(data = iris, x = ~Sepal.Width, y = ~Petal.Width,
type = 'scatter', palette='solarized_magenta',
title = 'Scatter - Sepal Width vs Petal Width',
subtitle = "(source: iris)", xlab = 'Sepal Width', ylab = 'Petal Width',
markLine=t(c(1,'Mean',"average",F)))
Multi-series Scatter 多系列散点图
指定series，且显示范围从零点开始(scale=FALSE)。在第2个数据系列(versicolor)中打开最大(max)、最小(min)、均线(average)三根标线；在第1、2、3数据系列中分别标注max、min、max点，且打开第3个系列的眩光特效(markPoint=rbind(c(1,'Max','max',F),c(2,'Min','min',F),
c(3,'Max','max',T)))。
通过xAxis和yAxis设置，去掉了所有纵轴。
echartR(data = iris, x = ~Sepal.Width, y = ~Petal.Width, series = ~Species,
type = 'scatter', palette='wsj_dem_rep', symbolList='circle',
scale=F, xAxis = list(lab='Sepal Width', color='darkgray'),
yAxis = list(lab='Petal Width',color='none'),
title = 'Scatter - Sepal Width vs Petal Width, by Species',
subtitle ='(source: iris)',
markLine=rbind(c(2,'Mean','average',F),c('versicolor','Maximum','max',F),
c(2,'Minimum','min',F)),
markPoint=rbind(c(1,'Max','max',F),c(2,'Min','min',F), c(3,'Max','max',T)))
使用三套非标准图形(箭头、心形、八角星)区分数据系列(c('arrow','heart','star8'))。命令指定随机选择excel_old色版中的1种颜色，但由于数据集有3个水平(series)，颜色个数限制在执行中被忽略。
同时拟合3条回归线(markLine列表写作short form，类型指定为’lm’，并开启炫光特效)。
echartR(data = iris, x = ~Sepal.Width, y = ~Petal.Width, series = ~Species,
type = 'scatter', palette='excel_old(1)',
symbolList=c('arrow','heart','star8'),
title = 'Scatter - Sepal Width vs Petal Width, by Species',
subtitle = '(source: iris)', xlab = 'Sepal Width', ylab = 'Petal Width',
markLine = rbind(c('setosa','Linear Reg Coef','lm',T),
c(2,'Linear Reg Coef','lm',T), c(3,'Linear Reg Coef','lm',T)))
大规模散点图(2000个点以上)同样可以秒级出图(但html文件会变得很大)。
x &- rnorm(2001)*2
e &- vector()
for (i in 1:2001)
e &- c(e,rnorm(1,0,x[i]+abs(min(x))))
df &- data.frame(x, sin=sin(x)+e/20, cos=cos(x)+e/20)
df &- melt(df,id="x")
echartR(df,x=~x,y=~value,series=~variable,type='scatter',
palette='wsj_red_green',symbolList='circle', AxisAtZero=F,
title='Scatter of 2,001 points', subtitle = 'Large-scale scatter')
Bubble 气泡图
气泡图同样来源于散点图。type改为bubble即可，如不指定weight变量，函数默认指定y为气泡权重。
Mono-series Bubble 单系列气泡图
echartR(data = iris, x = ~Sepal.Width, y = ~Petal.Width, weight = ~Petal.Length,
type = 'bubble', palette='solarized_cyan',
title = paste("Bubble - Sepal Width vs Petal Width,",
"weighed by Petal Length"),
subtitle = '(source: iris)',
xlab = 'Sepal Width', ylab = 'Petal Width')
Multi-series Bubble 多系列气泡图
用symbolList=c('circle','emptyCircle')设置第1个数据系列为实心圆、剩下的数据系列以空心圆作为标志图形。palette设置为tableauGnOr(3)，只随机取该色板的3种颜色。
再做一个基于全集的线性回归(lm())。由于无法显示在任何一个系列上，因此echartR生成了一个新的数据系列。前一节多系列散点图中，三个系列Sepal
Width与Petal Width都正相关，而本例中，合并起来两者却呈负相关。这个例子形象地展示了分层分析的重要性。
fit &- lm(Petal.Width~Sepal.Width,iris)
pred &- data.frame(Sepal.Width=c(min(iris$Sepal.Width),max(iris$Sepal.Width)))
yhat &- round(predict(fit,pred),2)
echartR(data = iris, x = ~Sepal.Width, y = ~Petal.Width,
weight = ~Petal.Length, series = ~Species,
symbolList=c('emptyCircle','circle'),
type = 'bubble', palette='tableaugnor(4)',
title = paste('Bubble - Sepal Width vs Petal Width, by Species,',
'weighed by Petal Length'),
subtitle = '(source: iris)', xlab = 'Sepal Width', ylab = 'Petal Width',
markLine=t(c('Reg Coef.','slope',round(fit$coefficients[[2]],2),
pred[1,1],yhat[[1]],pred[2,1],yhat[[2]],F)))
Column 柱图
先生成一个汇总数据集dtiris。
library(reshape2)
dfiris &- iris
dfiris$id &- row.names(iris)
dfiris &- melt(dfiris,id=c("Species","id"))
names(dfiris) &- c("Species","id","Param","Value")
dtiris &- dcast(dfiris[,c(1,3,4)],Species+Param~.,value.var="Value",mean)
names(dtiris) &- c("Species","Param","Mean")
knitr::kable(dcast(dtiris,Param~Species,sum,value.var="Mean"),
format='html',caption="Table: Mean of parameters (iris)")
Table: Mean of parameters (iris)
versicolor
Sepal.Length
Sepal.Width
Petal.Length
Petal.Width
Tiled Column 平铺柱图
echartR(data = dtiris, x = ~Param, y = ~Mean,
series = ~Species,
type = 'bar', palette='fivethirtyeight',
title = "Column - Parameter Mean by Species",
subtitle = '(source: iris)',legend_pos=3,
xlab = 'Parameter', ylab = 'Mean')
Stacked Column 堆积柱图
echartR(data = dtiris, x = ~Param, y = ~Mean,
series = ~Species, stack=T,
type = 'bar', palette='pander',
title = "Column - Parameter Mean by Species",
subtitle = '(source: iris)',
xlab = 'Parameter', ylab = 'Mean', legend_pos=3)
堆积与否，也可以简单地通过工具栏的平铺和堆积按钮切换。非常强大。
条图和柱图的区别只在于xyflip开关选项。
Tiled Bar 平铺条图
echartR(data = dtiris, x = ~Species, y = ~Mean, series = ~Param,
type = 'bar', palette='stata1', xyflip=T,
title = 'Species-specific Mean by Parameters',
subtitle = '(source: iris)', legend_pos=3,
xlab = 'Species', ylab = 'Mean')
Stacked Bar 堆积条图
palette设为calc的随机4种颜色。打开stack (stack=TRUE)。
echartR(data = dtiris, x = ~Param, y = ~Mean,
series = ~Species, stack=T, xyflip=T,
type = 'bar', palette='calc(5)',
title = 'Parameter Mean by Species',
subtitle = '(source: iris)',
xlab = 'Parameter', ylab = 'Mean', legend_pos=3)
Histogram 直方图
直方图是柱图的一种特例，只需要指定y变量。可通过splitNumber指定直方数(默认9)。xyflip设为TRUE则成为等价的横条图。
echartR(airquality, y=~Temp, type='histogram', splitNumber=13,
palette='pastel2', title='Histogram of temperature',
subtitle = '(source: airquality)')
用mtcars作为作图数据集。
dtcars &- mtcars
dtcars$car &- row.names(dtcars)
dtcars$transmission &- as.factor(dtcars$am)
levels(dtcars$transmission) &- c("Automatic","Manual")
dtcars$cylinder &- as.factor(dtcars$cyl)
dtcars$carburetor &-as.factor(dtcars$carb)
echartR(dtcars, x = ~transmission,
y = ~car, type='pie',
palette='darkunica',
title='Number of cars by transmission',
subtitle = '(source: mtcars)')
环形图是饼图的变形，只需将type改为’ring’。Echarts中只需要把饼图的半径参数扩展为包含内、外径的长度为2的向量即可。
echartR(dtcars, x = ~cylinder,
y = ~car, type='ring',
palette='hc', title='Number of Cylinders',
subtitle = '(source: mtcars)')
Rose Nightingale玫瑰图
echartR(dtcars, x = ~cylinder,
y = ~car, type='rose',
palette='colorblind', title='Number of Cylinders',
subtitle = '(source: mtcars)')
Unstacked Line 平铺线图
打开数据缩放，设置初始显示30-70%(dataZoom=c(30,70))。
airquality$Date &- strptime(paste(2015,airquality$Month,airquality$Day,sep="-"),
format="%F", tz="Asia/Taipei")
airquality$strDate &- with(airquality,paste(2015,Month,Day,sep="-"))
airquality$TempG &- cut(airquality$Temp,breaks=c(0,60,70,80,100))
echartR(airquality, x = ~Day, y= ~Wind, series=~Month, type='line',
dataZoom=c(30,70), symbolList='none',
palette='tableauBlRd', xlab = 'Days', ylab = 'Wind',
title='Day-specific Wind by month (airquality)')
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。