Google Git
Sign in
apache / echarts-website / 6591708b9d6986b1cfedd4ee86dd22e95f1e4823 / . / next / en / documents / option-parts / option.js
blob: a9201dcfe0aebad0cc57ba56ad682c42a9afaf29 [file] [log] [blame]
window.__EC_DOC_option = {
"title": {
"desc": "<p>Title component, including main title and subtitle.</p>\n<p>In ECharts 2.x, a single instance of ECharts could contains one title component at most. However, in ECharts 3, there could be one or more than one title components. It is more useful when multiple diagrams in one instance all need titles.</p>\n<p><strong>Here are some instances of different animation easing functions, among which every instance has a title component: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=line-easing&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n\n\n",
"exampleBaseOptions": [
{
"code": "\nconst option = {\n title: {\n text: 'Main Title',\n subtext: 'Sub Title',\n left: 'center',\n top: 'center',\n textStyle: {\n fontSize: 30\n },\n subtextStyle: {\n fontSize: 20\n }\n }\n}\n",
"name": "title-only",
"title": "只有标题的实例",
"title-en": "Title"
}
]
},
"legend": {
"desc": "<p>Legend component.</p>\n<p>Legend component shows symbol, color and name of different series. You can click legends to toggle displaying series in the chart.</p>\n<p>In ECharts 3, a single echarts instance may contain multiple legend components, which makes it easier for the layout of multiple legend components.</p>\n<p>If there have to be too many legend items, <a href=\"https://echarts.apache.org/next/examples/en/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/next/examples/en/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a> are options to paginate them. Check <a href=\"#legend.type\">legend.type</a> please.</p>\n",
"exampleBaseOptions": [
{
"code": "\n\noption = {\n color: ['#003366', '#006699', '#4cabce', '#e5323e'],\n dataset: {\n source: [\n ['type', '2012', '2013', '2014', '2015', '2016'],\n ['Forest', 320, 332, 301, 334, 390],\n ['Steppe', 220, 182, 191, 234, 290],\n ['Desert', 150, 232, 201, 154, 190],\n ['Wetland', 98, 77, 101, 99, 40]\n ]\n },\n legend: {\n },\n xAxis: {\n type: 'category',\n axisTick: {show: false}\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n seriesLayoutBy: 'row'\n },\n {\n type: 'bar',\n seriesLayoutBy: 'row'\n },\n {\n type: 'bar',\n seriesLayoutBy: 'row'\n },\n {\n type: 'bar',\n seriesLayoutBy: 'row'\n }\n ]\n};\n",
"name": "legend",
"title": "基础图例",
"title-en": "Basic Legend"
},
{
"code": "\nconst option = {\n legend: {\n width: 350,\n left: 0\n },\n tooltip: {},\n dataset: {\n source: [\n ['product', '2012', '2013', '2014', '2015'],\n ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],\n ['Milk Tea', 86.5, 92.1, 85.7, 83.1],\n ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]\n ]\n },\n xAxis: [\n {type: 'category', gridIndex: 0},\n {type: 'category', gridIndex: 1}\n ],\n yAxis: [\n {gridIndex: 0},\n {gridIndex: 1}\n ],\n grid: [\n {bottom: '55%'},\n {top: '55%'}\n ],\n series: [\n // These series are in the first grid.\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n // These series are in the second grid.\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}\n ]\n};\n\n",
"name": "legend-more",
"title": "多源图例",
"title-en": "Legend on Multiple Source"
}
]
},
"grid": {
"desc": "<p>Drawing grid in rectangular coordinate. In a single grid, at most two X and Y axes each is allowed. <a href=\"#series-line\">Line chart</a>, <a href=\"#series-bar\">bar chart</a>, and <a href=\"#series-scatter\">scatter chart (bubble chart)</a> can be drawn in grid.</p>\n<p>In ECharts 2.x, there could only be one single grid component at most in a single echarts instance. But in ECharts 3, there is no limitation.</p>\n<p><strong>Following is an example of Anscombe Quartet:</strong></p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=scatter-anscombe-quartet&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n",
"exampleBaseOptions": [
{
"code": "\nconst option = {\n color: ['#3398DB'],\n tooltip: {\n trigger: 'axis',\n axisPointer: { // 坐标轴指示器，坐标轴触发有效\n type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'\n }\n },\n grid: {\n },\n xAxis: [\n {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n axisTick: {\n alignWithLabel: true\n }\n }\n ],\n yAxis: [\n {\n type: 'value'\n }\n ],\n series: [\n {\n name: '直接访问',\n type: 'bar',\n barWidth: '60%',\n data: [10, 52, 200, 334, 390, 330, 220]\n }\n ]\n};\n\n",
"title": "基础网格示例",
"name": "grid",
"title-en": "Basic Grid"
}
]
},
"xAxis": {
"desc": "<p>The x axis in cartesian(rectangular) coordinate. Usually a single grid component can place at most 2 x axis, one on the bottom and another on the top. <a href=\"#xAxis.offset\">offset</a> can be used to avoid overlap when you need to put more than two x axis.</p>\n",
"exampleBaseOptions": [
{
"code": "\nconst option = {\n color: ['#3398DB'],\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n grid: {},\n xAxis: [\n {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n }\n ],\n yAxis: [\n {\n type: 'value'\n }\n ],\n series: [\n {\n name: '直接访问',\n type: 'bar',\n barWidth: '60%',\n data: [10, 52, 200, 334, 390, 330, 220]\n }\n ]\n};\n",
"title": "基础 x 轴示例",
"name": "x-axis",
"title-en": "Basic X Axis"
},
{
"code": "\n// https://echarts.apache.org/examples/zh/editor.html?c=line-function\nconst option = {\"animation\":false,\"grid\":{\"top\":40,\"left\":50,\"right\":40,\"bottom\":50},\"xAxis\":{\"name\":\"x\",\"minorTick\":{\"show\":true},\"splitLine\":{\"lineStyle\":{\"color\":\"#999\"}},\"minorSplitLine\":{\"show\":true,\"lineStyle\":{\"color\":\"#ddd\"}}},\"yAxis\":{\"name\":\"y\",\"min\":-100,\"max\":100,\"minorTick\":{\"show\":true},\"splitLine\":{\"lineStyle\":{\"color\":\"#999\"}},\"minorSplitLine\":{\"show\":true,\"lineStyle\":{\"color\":\"#ddd\"}}},\"dataZoom\":[{\"show\":true,\"type\":\"inside\",\"filterMode\":\"none\",\"xAxisIndex\":[0],\"startValue\":-20,\"endValue\":20},{\"show\":true,\"type\":\"inside\",\"filterMode\":\"none\",\"yAxisIndex\":[0],\"startValue\":-20,\"endValue\":20}],\"series\":[{\"type\":\"line\",\"showSymbol\":false,\"clip\":true,\"smooth\":true,\"data\":[[-100,-7.28568859177975],[-99.5,-10.308641686442629],[-99,-12.413148293738898],[-98.5,-13.515078781534513],[-98,-13.621163798783135],[-97.5,-12.823906192675082],[-97,-11.288665356829664],[-96.5,-9.23425907937281],[-96,-6.909008869380329],[-95.5,-4.564555818396275],[-95,-2.429959682553713],[-94.5,-0.6885479810639478],[-94,0.5402906066423075],[-93.5,1.21264800981265],[-93,1.3638845704762748],[-92.5,1.1043049945382515],[-92,0.607128800864712],[-91.5,0.08988902269203362],[-91,-0.2089830400941321],[-90.5,-0.05616574430357663],[-90,0.7504337485361828],[-89.5,2.357963053593699],[-89,4.8396258541001735],[-88.5,8.182302580101384],[-88,12.28210110977527],[-87.5,16.94843212511602],[-87,21.916427041284017],[-86.5,26.866748982321948],[-86,31.45115851897577],[-85.5,35.321648453659435],[-85,38.160606043315696],[-84.5,39.709329939589225],[-84,39.792336052740495],[-83.5,38.33522352984697],[-83,35.37441051193005],[-82.5,31.057742636470405],[-82,25.635764735233245],[-81.5,19.444258578788666],[-81,12.879415101870299],[-80.5,6.367660473015441],[-80,0.33263375275288687],[-79.5,-4.837923076371445],[-79,-8.822578093923074],[-78.5,-11.391358995906408],[-78,-12.423514388716917],[-77.5,-11.916388761583795],[-77,-9.984670358500548],[-76.5,-6.850092793304596],[-76,-2.8224853658042144],[-75.5,1.7261975266933924],[-75,6.392644923935266],[-74.5,10.775134678186568],[-74,14.505865183234313],[-73.5,17.279956480954215],[-73,18.878712863643415],[-72.5,19.185255699222136],[-72,18.191313030152614],[-71.5,15.994731145683359],[-71,12.788083709042441],[-70.5,8.83952449599976],[-70,4.467692549018498],[-69.5,0.012975590895437749],[-69,-4.1922741387420865],[-68.5,-7.851922117811794],[-68,-10.730163368329142],[-67.5,-12.669495084794402],[-67,-13.601062453462621],[-66.5,-13.5465994712637],[-66,-12.611959711686918],[-65.5,-10.97299885981492],[-65,-8.855262294629314],[-64.5,-6.509484909480171],[-64,-4.185277201955389],[-63.5,-2.105518924587793],[-63,-0.4438966754207421],[-62.5,0.692286852115487],[-62,1.2724079897455145],[-61.5,1.3449501671845296],[-61,1.0318351442775524],[-60.5,0.5151905269770695],[-60,0.017801185985999862],[-59.5,-0.22090709289360527],[-59,0.028928422051093385],[-58.5,0.9617190257942162],[-58,2.713348257419601],[-57.5,5.3431673515049924],[-57,8.822875928469273],[-56.5,13.03348526904271],[-56,17.770830581210273],[-55.5,22.759318555202444],[-55,27.67283754054597],[-54.5,32.1610885780304],[-54,35.87907719610712],[-53.5,38.51718597410974],[-53,39.82915643467974],[-52.5,39.65545557536569],[-52,37.93987574464047],[-51.5,34.737784778835895],[-51,30.215157003198623],[-50.5,24.638312364356967],[-50,18.3551004804382],[-49.5,11.769017244537302],[-49,5.308367228986769],[-48.5,-0.6069701736010016],[-48,-5.598389007462409],[-47.5,-9.358254797929293],[-47,-11.673945378494896],[-46.5,-12.44420341716319],[-46,-11.68642247579883],[-45.5,-9.534261396568692],[-45,-6.225807256488313],[-44.5,-2.08331287986152],[-44,2.5137494777176124],[-43.5,7.160013600760711],[-43,11.457257707042197],[-42.5,15.04636057918079],[-42,17.635494470616305],[-41.5,19.022220309574532],[-41,19.10769812254342],[-40.5,17.901924909054376],[-40,15.519701164991243],[-39.5,12.16783590862111],[-39,8.124856971095452],[-38.5,3.7151319027968746],[-38,-0.7202306728773972],[-37.5,-4.853079136766696],[-37,-8.395881007451033],[-36.5,-11.124933349885053],[-36,-12.897138971827948],[-35.5,-13.658972761082097],[-35,-13.446987387978195],[-34.5,-12.379984634126401],[-34,-10.643737522168548],[-33.5,-8.469820815939153],[-33,-6.110632965724325],[-32.5,-3.81302424996074],[-32,-1.7930543977126796],[-31.5,-0.21427928123454362],[-31,0.8283777214546426],[-30.5,1.3176465270661046],[-30,1.3149721422382217],[-29.5,0.9535163621628415],[-29,0.42375789153044796],[-28.5,-0.04695086970601061],[-28,-0.21893632662110582],[-27.5,0.13346760225517343],[-27,1.1963329846094723],[-26.5,3.0937660296313783],[-26,5.870948366027804],[-25.5,9.484311863088184],[-25,13.79992777928205],[-24.5,18.60044702205284],[-24,23.600146792414954],[-23.5,28.466890368388025],[-23,32.84915907101051],[-22.5,36.40582759756618],[-22,38.83607084270149],[-21.5,39.90673883640768],[-21,39.47472266749568],[-20.5,37.50224316117999],[-20,34.0635906227061],[-19.5,29.34257625068219],[-19,23.62075967148033],[-18.5,17.257321645532187],[-18,10.662185216671737],[-17.5,4.264587283955446],[-17,-1.5202875629660895],[-16.5,-6.323814866394274],[-16,-9.852842017681294],[-15.5,-11.912562521377135],[-15,-12.421420510444117],[-14.5,-11.416790659702185],[-14,-9.050965359379433],[-13.5,-5.577808226132026],[-13,-1.3312284065670519],[-12.5,3.3026758385509267],[-12,7.917423620193896],[-11.5,12.119203239280052],[-11,15.55837638282317],[-10.5,17.956796360351262],[-10,19.12868503085732],[-9.5,18.99338986202127],[-9,17.579061587148733],[-8.5,15.01709021482992],[-8,11.527942043659884],[-7.5,7.399781778875801],[-7,2.9618766903727725],[-6.5,-1.4447894690655656],[-6,-5.497053399663779],[-5.5,-8.91664548985408],[-5,-11.492442353296507],[-4.5,-13.096007425735229],[-4,-13.689159299781739],[-3.5,-13.323045922867745],[-3,-12.128981716306324],[-2.5,-10.30205367796348],[-2,-8.079154145047465],[-1.5,-5.713593654471709],[-1,-3.448743016334093],[-0.5,-1.4932232631765217],[0,0],[0.5,0.9486397319584265],[1,1.3488096893269022],[1.5,1.2747170638693173],[2,0.870353404927271],[2.5,0.3339660345950574],[3,-0.10322470763397162],[3.5,-0.20204765659669835],[4,0.2582374710442245],[4.5,1.454725891649126],[5,3.4992630153517794],[5.5,6.422580567311993],[6,10.165796338844878],[6.5,14.580238819160703],[7,19.435802797730613],[7.5,24.437261127880166],[8,29.24722169622069],[8.5,33.513794004739815],[9,36.900573657650156],[9.5,39.11630758706193],[10,39.941591483707086],[10.5,39.25017620157846],[11,37.022903312892616],[11.5,33.35291338730777],[12,28.44151963796814],[12.5,22.58494859182894],[13,16.152947095922325],[13.5,9.560970707452038],[14,3.238238801433192],[14.5,-2.4056842830906398],[15,-7.012978673567718],[15.5,-10.305624836117072],[16,-12.107056254092159],[16.5,-12.355580200073405],[17,-11.10843817373304],[17.5,-8.536176088592812],[18,-4.90782121466318],[18.5,-0.5681459110878003],[19,4.091031098382733],[19.5,8.663055207241856],[20,12.759421640647318],[20.5,16.040752592352533],[21,18.243176576243357],[21.5,19.197939288291717],[22,18.842679990982205],[22.5,17.223544347651067],[23,14.488108235548665],[23.5,10.86988618038699],[24,6.6659221812418945],[24.5,2.209546267783195],[25,-2.1592238447013776],[25.5,-6.122984088310804],[26,-9.413361256758252],[26.5,-11.832253816320339],[27,-13.266101020473464],[27.5,-13.692038393324927],[28,-13.175547760361352],[28.5,-11.859988828360883],[29,-9.949136490320415],[29.5,-7.684477199530865],[30,-5.319482513871472],[30.5,-3.0933368490897424],[31,-1.2066268829646725],[31.5,0.1987000891124841],[32,1.0532133853370986],[32.5,1.3664018475405608],[33,1.2249981140652904],[33.5,0.7833810466567335],[34,0.24696017979113305],[34.5,-0.1498891855695422],[35,-0.16925007139800816],[35.5,0.4039734569218113],[36,1.737283984396856],[36.5,3.929813834125026],[37,6.997602267276391],[37.5,10.866447559164017],[38,15.37317300071458],[38.5,20.275381487984532],[39,25.268995081304684],[39.5,30.012154044519434],[40,34.153449933416525],[40.5,37.362044132215885],[41,39.35701605241099],[41.5,39.93331403791406],[42,38.98194585746568],[42.5,36.502522494982095],[43,32.606917653346514],[43.5,27.513569360946178],[44,21.532762221559814],[44.5,15.04401754771972],[45,8.467414060409247],[45.5,2.231202253174259],[46,-3.2615873259646198],[46.5,-7.664738112952494],[47,-10.715980079127142],[47.5,-12.257368751095374],[48,-12.247190107477518],[48.5,-10.762392147500078],[49,-7.991352244733339],[49.5,-4.217613972442744],[50,0.20400418462188566],[50.5,4.876880077839909],[51,9.395124449081761],[51.5,13.376421273233174],[52,16.492404111543],[52.5,18.494034773760912],[53,19.22990353310072],[53.5,18.656001240762667],[54,16.836266627996974],[54.5,13.934019969891603],[55,10.195185607831574],[55.5,5.924910825028729],[56,1.4597454208423777],[56.5,-2.8620933688495294],[57,-6.729712922557857],[57.5,-9.885241147398862],[58,-12.144004442705404],[58.5,-13.40749282195799],[59,-13.668091400301305],[59.5,-13.005317296528741],[60,-11.574077708447874],[60.5,-9.586188374077032],[61,-7.28699674721417],[61.5,-4.929386789541986],[62,-2.747663831836344],[62.5,-0.9338091588054483],[63,0.38164363608619517],[63.5,1.142302663092698],[64,1.3709841074751992],[64.5,1.1666726035062154],[65,0.6936609119957133],[65.5,0.16389208586664838],[66,-0.18582804773230152],[66.5,-0.11958792315217186],[67,0.5713580738956626],[67.5,2.0443276909305883],[68,4.385320374542261],[68.5,7.595478879431859],[69,11.585317583836206],[69.5,16.177432003975525],[70,21.117632346422035],[70.5,26.093670276933018],[71,30.760022354178012],[71.5,34.76661989385577],[72,37.78902591993554],[72.5,39.557391519206995],[73,39.88159291393935],[73.5,38.670252311997615],[74,35.94185467473224],[74.5,31.826844943066902],[75,26.56036723047081],[75.5,20.46612073928973],[76,13.932584913724465],[76.5,7.383539732774445],[77,1.2453162173977006],[77.5,-4.086488316022926],[78,-8.278033050158065],[78.5,-11.083377630925245],[79,-12.36353853437559],[79.5,-12.096849635887272],[80,-10.37975947481941],[80.5,-7.418013821074427],[81,-3.508992319114549],[81.5,0.983279497595262],[82,5.658302370713721],[82.5,10.111887309003258],[83,13.968771747749276],[83.5,16.91232297515734],[84,18.708856862379733],[84.5,19.224586162676218],[85,18.43386853040691],[85.5,16.41819147255127],[86,13.356141579952205],[86.5,9.505386930309934],[87,5.178385663170118],[87.5,0.7140604782586624],[88,-3.5519974865612904],[88.5,-7.316138713800894],[89,-10.331566649107813],[89.5,-12.427404556274425],[90,-13.520327586597327],[90.5,-13.617862853500739],[91,-12.813227911493573],[91.5,-11.272350638002058],[92,-9.214421396127614],[92.5,-6.887907876479652],[93,-4.5443623106137405],[93.5,-2.4125343613659083],[94,-0.6752550400481316],[94.5,0.5487174411715527],[95,1.2161743368259692],[95.5,1.3631725739539164],[96,1.1006393533733236],[96.5,0.6022782227915058],[97,0.0859164667235129],[97.5,-0.20994348985294733],[98,-0.05214413451216387],[98.5,0.761018385811453],[99,2.3761100198305223],[99.5,4.865611281247671],[100,8.215603575381051]]}]}\n",
"title": "Minor Ticks",
"name": "minor-ticks-x-axis",
"title-en": "Minor Axis Ticks"
}
]
},
"yAxis": {
"desc": "<p>The y axis in cartesian(rectangular) coordinate. Usually a single grid component can place at most 2 y axis, one on the left and another on the right. <a href=\"#yAxis.offset\">offset</a> can be used to avoid overlap when you need to put more than two y axis.</p>\n",
"exampleBaseOptions": [
{
"code": "\nconst option = {\n color: ['#3398DB'],\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n grid: {},\n xAxis: [\n {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n }\n ],\n yAxis: [\n {\n type: 'value'\n }\n ],\n series: [\n {\n name: '直接访问',\n type: 'bar',\n barWidth: '60%',\n data: [10, 52, 200, 334, 390, 330, 220]\n }\n ]\n};\n",
"title": "基础 y 轴示例",
"name": "y-axis",
"title-en": "Basic Y Axis"
},
{
"code": "\noption = {\n legend: {\n left: 'left',\n data: ['2的指数', '3的指数']\n },\n xAxis: {\n type: 'category',\n name: 'x',\n splitLine: {show: false},\n data: ['一', '二', '三', '四', '五', '六', '七', '八', '九']\n },\n grid: {\n left: '3%',\n right: '4%',\n bottom: '3%',\n containLabel: true\n },\n yAxis: {\n type: 'log',\n name: 'y',\n minorTick: {\n show: true\n },\n minorSplitLine: {\n show: true\n }\n },\n series: [\n {\n name: '3的指数',\n type: 'line',\n data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]\n },\n {\n name: '2的指数',\n type: 'line',\n data: [1, 2, 4, 8, 16, 32, 64, 128, 256]\n },\n {\n name: '1/2的指数',\n type: 'line',\n data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]\n }\n ]\n};\n\n",
"title": "Log 轴示例",
"name": "y-axis-log",
"title-en": "Log Axis"
}
]
},
"polar": {
"desc": "<p>Polar coordinate can be used in scatter and line chart. Every polar coordinate has an <a href=\"#angleAxis\">angleAxis</a> and a <a href=\"#radiusAxis\">radiusAxis</a>.</p>\n<p><strong>For example: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=scatter-polar-punchCard&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n",
"exampleBaseOptions": [
{
"code": "\n\nconst hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',\n '7a', '8a', '9a','10a','11a',\n '12p', '1p', '2p', '3p', '4p', '5p',\n '6p', '7p', '8p', '9p', '10p', '11p'];\nconst days = ['Saturday', 'Friday', 'Thursday',\n 'Wednesday', 'Tuesday', 'Monday', 'Sunday'];\n\nconst data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];\n\nconst option = {\n title: {\n text: 'Punch Card of Github',\n link: 'https://github.com/pissang/echarts-next/graphs/punch-card'\n },\n legend: {\n data: ['Punch Card'],\n left: 'right'\n },\n polar: {},\n angleAxis: {\n type: 'category',\n data: hours,\n boundaryGap: false,\n splitLine: {\n show: true,\n lineStyle: {\n color: '#999',\n type: 'dashed'\n }\n },\n axisLine: {\n show: false\n }\n },\n radiusAxis: {\n type: 'category',\n data: days,\n axisLine: {\n show: false\n },\n axisLabel: {\n rotate: 45\n }\n },\n series: [{\n name: 'Punch Card',\n type: 'scatter',\n coordinateSystem: 'polar',\n symbolSize: function (val) {\n return val[2] * 2;\n },\n data: data\n }]\n};\n",
"name": "polar",
"title": "极坐标系",
"title-en": "Polar"
}
]
},
"radiusAxis": {
"desc": "<p>Radial axis of polar coordinate.</p>\n",
"exampleBaseOptions": [
{
"code": "\nconst data = [];\n\nfor (let i = 0; i <= 360; i++) {\n const t = i / 180 * Math.PI;\n const r = Math.sin(2 * t) * Math.cos(2 * t);\n data.push([r, i]);\n}\n\nconst option = {\n polar: {\n center: ['50%', '54%']\n },\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'cross'\n }\n },\n angleAxis: {\n type: 'value',\n startAngle: 0,\n },\n radiusAxis: {\n min: 0\n },\n series: [{\n coordinateSystem: 'polar',\n name: 'line',\n type: 'line',\n showSymbol: false,\n data: data\n }],\n animationDuration: 2000\n};\n",
"name": "two-number-axis",
"title": "双数值轴",
"title-en": "Tow Number Axes"
},
{
"code": "\n\nconst hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',\n '7a', '8a', '9a','10a','11a',\n '12p', '1p', '2p', '3p', '4p', '5p',\n '6p', '7p', '8p', '9p', '10p', '11p'];\nconst days = ['Saturday', 'Friday', 'Thursday',\n 'Wednesday', 'Tuesday', 'Monday', 'Sunday'];\n\nconst option = {\n title: {\n text: 'Punch Card of Github'\n },\n legend: {\n data: ['Punch Card'],\n left: 'right'\n },\n polar: {},\n angleAxis: {\n type: 'category',\n data: hours,\n boundaryGap: false\n },\n radiusAxis: {\n type: 'category',\n data: days\n }\n};\n",
"name": "two-category-axis",
"title": "双类目轴",
"title-en": "Tow Category Axes"
}
]
},
"angleAxis": {
"desc": "<p>The angle axis in Polar Coordinate.</p>\n",
"exampleBaseOptions": [
{
"code": "\nconst data = [];\n\nfor (let i = 0; i <= 360; i++) {\n const t = i / 180 * Math.PI;\n const r = Math.sin(2 * t) * Math.cos(2 * t);\n data.push([r, i]);\n}\n\nconst option = {\n polar: {\n center: ['50%', '54%']\n },\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'cross'\n }\n },\n angleAxis: {\n type: 'value',\n startAngle: 0,\n },\n radiusAxis: {\n min: 0\n },\n series: [{\n coordinateSystem: 'polar',\n name: 'line',\n type: 'line',\n showSymbol: false,\n data: data\n }],\n animationDuration: 2000\n};\n",
"name": "two-number-axis",
"title": "双数值轴",
"title-en": "Two Number Axes"
},
{
"code": "\n\nconst hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',\n '7a', '8a', '9a','10a','11a',\n '12p', '1p', '2p', '3p', '4p', '5p',\n '6p', '7p', '8p', '9p', '10p', '11p'];\nconst days = ['Saturday', 'Friday', 'Thursday',\n 'Wednesday', 'Tuesday', 'Monday', 'Sunday'];\n\nconst option = {\n title: {\n text: 'Punch Card of Github'\n },\n legend: {\n data: ['Punch Card'],\n left: 'right'\n },\n polar: {},\n angleAxis: {\n type: 'category',\n data: hours,\n boundaryGap: false\n },\n radiusAxis: {\n type: 'category',\n data: days\n }\n};\n",
"name": "two-category-axis",
"title": "双类目轴",
"title-en": "Two Category Axes"
}
]
},
"radar": {
"desc": "<p>Coordinate for <a href=\"#series-radar\">radar charts</a>. This component is equal to the polar component in ECharts 2. Because the polar component in the echarts 3 is reconstructed to be the standard polar coordinate component, this component is renamed to be radar to avoid confusion.</p>\n<p>Radar chart coordinate is different from polar coordinate, in that every axis indicator of the radar chart coordinate is an individual dimension. The style of indicator coordinate axis could be configured through the following configuration items, including <a href=\"#radar.name\">name</a>, <a href=\"#radar.axisLine\">axisLine</a>, <a href=\"#radar.axisTick\">axisTick</a>, <a href=\"#radar.axisLabel\">axisLabel</a>, <a href=\"#radar.splitLine\">splitLine</a>, <a href=\"#radar.splitArea\">splitArea</a>.</p>\n<p>Here is a custom example of radar component.</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=doc-example/radar&edit=1&reset=1\" width=\"400\" height=\"400\"><iframe />\n\n\n\n",
"exampleBaseOptions": [
{
"code": "\nconst option = {\n title: {\n text: '基础雷达图'\n },\n tooltip: {},\n legend: {\n data: ['Allocated Budget', 'Actual Spending']\n },\n radar: {\n indicator: [\n { name: 'sales', max: 6500},\n { name: 'Administration', max: 16000},\n { name: 'Information Techology', max: 30000},\n { name: 'Customer Support', max: 38000},\n { name: 'Development', max: 52000},\n { name: 'Marketing', max: 25000}\n ]\n },\n series: [{\n name: '预算 vs 开销（Budget vs spending）',\n type: 'radar',\n data: [\n {\n value: [4300, 10000, 28000, 35000, 50000, 19000],\n name: 'Allocated Budget'\n },\n {\n value: [5000, 14000, 28000, 31000, 42000, 21000],\n name: 'Actual Spending'\n }\n ]\n }]\n};\n",
"name": "radar",
"title": "基础雷达图",
"title-en": "Radar"
}
]
},
"dataZoom": {
"desc": "<p><code class=\"codespan\">dataZoom</code> component is used for zooming a specific area, which enables user to investigate data in detail, or get an overview of the data, or get rid of outlier points.</p>\n<p>These types of <code class=\"codespan\">dataZoom</code> component are supported:</p>\n<ul>\n<li><p><a href=\"#dataZoom-inside\">dataZoomInside</a>: Data zoom functionalities is embeded inside coordinate systems, enable user to zoom or roam coordinate system by mouse dragging, mouse move or finger touch (in touch screen).</p>\n</li>\n<li><p><a href=\"#dataZoom-slider\">dataZoomSlider</a>: A special slider bar is provided, on which coordinate systems can be zoomed or roamed by mouse dragging or finger touch (in touch screen).</p>\n</li>\n<li><p><a href=\"#toolbox.feature.dataZoom\">dataZoomSelect</a>: A marquee tool is provided for zooming or roaming coordinate system. That is <a href=\"#toolbox.feature.dataZoom\">toolbox.feature.dataZoom</a>, which can only be configured in toolbox.</p>\n</li>\n</ul>\n<p>Example:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=doc-example/scatter-dataZoom-all&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<p><br></p>\n<hr>\n<p><strong>✦ Relationship between dataZoom and axis ✦</strong></p>\n<p>Basically <code class=\"codespan\">dataZoom</code> component operates &quot;window&quot; on axis to zoom or roam coordinate system.</p>\n<blockquote>\n<p>Use <a href=\"#dataZoom.xAxisIndex\">dataZoom.xAxisIndex</a> or <a href=\"#dataZoom.yAxisIndex\">dataZoom.yAxisIndex</a> or <a href=\"#dataZoom.radiusAxisIndex\">dataZoom.radiusAxisIndex</a> or <a href=\"#dataZoom.angleAxisIndex\">dataZoom.angleAxisIndex</a> to specify which axes are operated by <code class=\"codespan\">dataZoom</code>.</p>\n</blockquote>\n<p>A single chart instance can contain several <code class=\"codespan\">dataZoom</code> components, each of which controls different axes. The <code class=\"codespan\">dataZoom</code> components that control the same axis will be automatically linked (i.e., all of them will be updated when one of them is updated by user action or API call).</p>\n<p><br></p>\n<hr>\n<p><strong>✦ How dataZoom componets operates axes and data ✦</strong></p>\n<p>Generally <code class=\"codespan\">dataZoom</code> component zoom or roam coordinate system through data filtering and set the windows of axes internally.</p>\n<p>Its behaviours vary according to filtering mode settings (<a href=\"#dataZoom.filterMode\">dataZoom.filterMode</a>).</p>\n<p>Possible values:</p>\n<ul>\n<li><p>&#39;filter&#39;: data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered if one of the relevant dimensions is out of the window.</p>\n</li>\n<li><p>&#39;weakFilter&#39;: data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered only if all of the relevant dimensions are out of the same side of the window.</p>\n</li>\n<li><p>&#39;empty&#39;: data that outside the window will be <strong>set to NaN</strong>, which will not lead to changes of windows of other axes.</p>\n</li>\n<li><p>&#39;none&#39;: Do not filter data.</p>\n</li>\n</ul>\n<p>How to set <code class=\"codespan\">filterMode</code> is up to users, depending on the requirments and scenarios. Expirically:</p>\n<ul>\n<li><p>If only <code class=\"codespan\">xAxis</code> or only <code class=\"codespan\">yAxis</code> is controlled by <code class=\"codespan\">dataZoom</code>, <code class=\"codespan\">filterMode: &#39;filter&#39;</code> is typically used, which enable the other axis auto adapte its window to the extent of the filtered data.</p>\n</li>\n<li><p>If both <code class=\"codespan\">xAxis</code> and <code class=\"codespan\">yAxis</code> are operated by <code class=\"codespan\">dataZoom</code>:</p>\n<ul>\n<li><p>If <code class=\"codespan\">xAxis</code> and <code class=\"codespan\">yAxis</code> should not effect mutually (e.g. a scatter chart with both axes on the type of <code class=\"codespan\">&#39;value&#39;</code>), they should be set to be <code class=\"codespan\">filterMode: &#39;empty&#39;</code>.</p>\n</li>\n<li><p>If <code class=\"codespan\">xAxis</code> is the main axis and <code class=\"codespan\">yAxis</code> is the auxiliary axis (or vise versa) (e.g., in a bar chart, when dragging <code class=\"codespan\">dataZoomX</code> to change the window of xAxis, we need the yAxis to adapt to the clipped data, but when dragging <code class=\"codespan\">dataZoomY</code> to change the window of yAxis, we need the xAxis not to be changed), in this case, <code class=\"codespan\">xAxis</code> should be set to be <code class=\"codespan\">fiterMode: &#39;filter&#39;</code>, while <code class=\"codespan\">yAxis</code> should be set to be <code class=\"codespan\">fiterMode: &#39;empty&#39;</code>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p>It can be demonstrated by the sample:</p>\n<pre><code class=\"lang-javascript\">option = {\n dataZoom: [\n {\n id: &#39;dataZoomX&#39;,\n type: &#39;slider&#39;,\n xAxisIndex: [0],\n filterMode: &#39;filter&#39;\n },\n {\n id: &#39;dataZoomY&#39;,\n type: &#39;slider&#39;,\n yAxisIndex: [0],\n filterMode: &#39;empty&#39;\n }\n ],\n xAxis: {type: &#39;value&#39;},\n yAxis: {type: &#39;value&#39;},\n series{\n type: &#39;bar&#39;,\n data: [\n // The first column corresponds to xAxis,\n // and the second coloum corresponds to yAxis.\n [12, 24, 36],\n [90, 80, 70],\n [3, 9, 27],\n [1, 11, 111]\n ]\n }\n}\n</code></pre>\n<p>In the sample above, <code class=\"codespan\">dataZoomX</code> is set as <code class=\"codespan\">filterMode: &#39;filter&#39;</code>. When use drags <code class=\"codespan\">dataZoomX</code> (do not touch <code class=\"codespan\">dataZoomY</code>) and the valueWindow of <code class=\"codespan\">xAxis</code> is changed to <code class=\"codespan\">[2, 50]</code> consequently, <code class=\"codespan\">dataZoomX</code> travel the first column of series.data and filter items that out of the window. The series.data turns out to be:</p>\n<pre><code class=\"lang-javascript\">[\n [12, 24, 36],\n // [90, 80, 70] This item is filtered, as 90 is out of the window.\n [3, 9, 27]\n // [1, 11, 111] This item is filtered, as 1 is out of the window.\n]\n</code></pre>\n<p>Before filtering, the second column, which corresponds to yAxis, has values <code class=\"codespan\">24</code>, <code class=\"codespan\">80</code>, <code class=\"codespan\">9</code>, <code class=\"codespan\">11</code>. After filtering, only <code class=\"codespan\">24</code> and <code class=\"codespan\">9</code> are left. Then the extent of <code class=\"codespan\">yAxis</code> is adjusted to adapt the two values (if <code class=\"codespan\">yAxis.min</code> and <code class=\"codespan\">yAxis.man</code> are not set).</p>\n<p>So <code class=\"codespan\">filterMode: &#39;filter&#39;</code> can be used to enable the other axis to auto adapt the filtered data.</p>\n<p>Then let&#39;s review the sample from the beginning, <code class=\"codespan\">dataZoomY</code> is set as <code class=\"codespan\">filterMode: &#39;empty&#39;</code>. So if user drags <code class=\"codespan\">dataZoomY</code> (do not touch <code class=\"codespan\">dataZoomX</code>) and its window is changed to <code class=\"codespan\">[10, 60]</code> consequently, <code class=\"codespan\">dataZoomY</code> travels the second column of series.data and set NaN to all of the values that outside the window (NaN cause the graphical elements, i.e., bar elements, do not show, but still hold the place). The series.data turns out to be:</p>\n<pre><code class=\"lang-javascript\">[\n [12, 24, 36],\n [90, NaN, 70], // Set to NaN\n [3, NaN, 27], // Set to NaN\n [1, 11, 111]\n]\n</code></pre>\n<p>In this case, the first column (i.e., <code class=\"codespan\">12</code>, <code class=\"codespan\">90</code>, <code class=\"codespan\">3</code>, <code class=\"codespan\">1</code>, which corresponds to <code class=\"codespan\">xAxis</code>), will not be changed at all. So dragging <code class=\"codespan\">yAxis</code> will not change extent of <code class=\"codespan\">xAxis</code>, which is good for requirements like outlier filtering.</p>\n<p>See this example:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=doc-example/bar-dataZoom-filterMode&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n\n\n\n<p>Moreover, when <code class=\"codespan\">min</code>, <code class=\"codespan\">max</code> of an axis is set (e.g., <code class=\"codespan\">yAxis: {min: 0, max: 400}</code>), this extent of the axis will not be modified by the behaviour of dataZoom of other axis any more.</p>\n<p><br></p>\n<hr>\n<p><strong>✦ How to set window ✦</strong></p>\n<p>You can set the current window in two forms:</p>\n<ul>\n<li><p>percent value: see <a href=\"#dataZoom.start\">dataZoom.start</a> and <a href=\"#dataZoom.end\">dataZoom.end</a>.</p>\n</li>\n<li><p>absolute value: see <a href=\"#dataZoom.startValue\">dataZoom.startValue</a> and <a href=\"#dataZoom.endValue\">dataZoom.endValue</a>.</p>\n</li>\n</ul>\n<p>Notice: If use percent value form, and it is in the scenario below, the result of dataZoom depends on the sequence of dataZoom definitions appearing in <code class=\"codespan\">option</code>.</p>\n<pre><code class=\"lang-javascript\">option = {\n dataZoom: [\n {\n id: &#39;dataZoomX&#39;,\n type: &#39;slider&#39;,\n xAxisIndex: [0],\n filterMode: &#39;filter&#39;, // Set as &#39;filter&#39; so that the modification\n // of window of xAxis willl effect the\n // window of yAxis.\n start: 30,\n end: 70\n },\n {\n id: &#39;dataZoomY&#39;,\n type: &#39;slider&#39;,\n yAxisIndex: [0],\n filterMode: &#39;empty&#39;,\n start: 20,\n end: 80\n }\n ],\n xAxis: {\n type: &#39;value&#39;\n },\n yAxis: {\n type: &#39;value&#39;\n // Notice there is no min or max set to\n // restrict the view extent of yAxis.\n },\n series{\n type: &#39;bar&#39;,\n data: [\n // The first column corresponds to xAxis,\n // and the second column corresponds to yAxis.\n [12, 24, 36],\n [90, 80, 70],\n [3, 9, 27],\n [1, 11, 111]\n ]\n }\n}\n</code></pre>\n<p>What is the exact meaning of <code class=\"codespan\">start: 20, end: 80</code> in <code class=\"codespan\">dataZoomY</code> in the example above?</p>\n<ul>\n<li><p>If <code class=\"codespan\">yAxis.min</code> and <code class=\"codespan\">yAxis.max</code> are set:</p>\n<p> <code class=\"codespan\">start: 20, end: 80</code> of <code class=\"codespan\">dataZoomY</code> means: from <code class=\"codespan\">20%</code> to <code class=\"codespan\">80%</code> out of <code class=\"codespan\">[yAxis.min, yAxis.max]</code>.</p>\n<p> If one of <code class=\"codespan\">yAxis.min</code> and <code class=\"codespan\">yAxis.max</code> is not set, the corresponding edge of the full extend also follow rule as follows.</p>\n</li>\n<li><p>If <code class=\"codespan\">yAxis.min</code> and <code class=\"codespan\">yAxis.max</code> are not set:</p>\n<ul>\n<li><p>If <code class=\"codespan\">dataZoomX</code> is set to be <code class=\"codespan\">filterMode: &#39;empty&#39;</code>:</p>\n<p> <code class=\"codespan\">start: 20, end: 80</code> of <code class=\"codespan\">dataZoomY</code> means: from <code class=\"codespan\">20%</code> to <code class=\"codespan\">80%</code> out of <code class=\"codespan\">[dataMinY to dataMaxY]</code> of series.data (i.e., <code class=\"codespan\">[9, 80]</code> in the example above).</p>\n</li>\n<li><p>If <code class=\"codespan\">dataZoomX</code> is set to <code class=\"codespan\">filterMode: &#39;filter&#39;</code>:</p>\n<p> Since <code class=\"codespan\">dataZoomX</code> is defined before <code class=\"codespan\">dataZoomY</code>, <code class=\"codespan\">start: 30, end: 70</code> of <code class=\"codespan\">dataZoomX</code> means: from <code class=\"codespan\">30%</code> to <code class=\"codespan\">70%</code> out of full series.data, whereas <code class=\"codespan\">start: 20, end: 80</code> of <code class=\"codespan\">dataZoomY</code> means: from <code class=\"codespan\">20%</code> to <code class=\"codespan\">80%</code> out of the series.data having been filtered by <code class=\"codespan\">dataZoomX</code>.</p>\n<p> If you want to change the process sequence, you can just change the sequence of the definitions apearing in <code class=\"codespan\">option</code>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<br></p>\n"
},
"dataZoom-inside": {
"desc": "<p><strong>dataZoomInside</strong></p>\n<p>Data zoom component of <em>inside</em> type.</p>\n<p>Refer to <a href=\"#dataZoom\">dataZoom</a> for more information.</p>\n<p>The <em>inside</em> means it&#39;s inside the coordinates.</p>\n<ul>\n<li>Translation: data area can be translated when moving in coordinates.</li>\n<li>Scaling:<ul>\n<li>PC: when mouse rolls (similar with touch pad) in coordinates.</li>\n<li>Mobile: when touches and moved with two fingers in coordinates on touch screens.</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<br></p>\n",
"exampleBaseOptions": [
{
"code": "\nconst data = [[\"2014-07-14\",156],[\"2014-07-15\",140],[\"2014-07-16\",133],[\"2014-07-17\",186],[\"2014-07-18\",182],[\"2014-07-19\",106],[\"2014-07-20\",119],[\"2014-07-21\",68],[\"2014-07-22\",54],[\"2014-07-23\",82],[\"2014-07-24\",90],[\"2014-07-25\",134],[\"2014-07-26\",188],[\"2014-07-27\",194],[\"2014-07-28\",159],[\"2014-07-29\",159],[\"2014-07-30\",169],[\"2014-07-31\",244],[\"2014-08-01\",199],[\"2014-08-02\",163],[\"2014-08-03\",149],[\"2014-08-05\",80],[\"2014-08-06\",67],[\"2014-08-07\",162],[\"2014-08-08\",140],[\"2014-08-09\",143],[\"2014-08-10\",125],[\"2014-08-11\",76],[\"2014-08-12\",119],[\"2014-08-13\",70],[\"2014-08-14\",104],[\"2014-08-15\",109],[\"2014-08-16\",159],[\"2014-08-17\",124],[\"2014-08-18\",135],[\"2014-08-19\",150],[\"2014-08-20\",164],[\"2014-08-21\",169],[\"2014-08-22\",83],[\"2014-08-23\",155],[\"2014-08-24\",75],[\"2014-08-25\",59],[\"2014-08-26\",78],[\"2014-08-27\",136],[\"2014-08-28\",103],[\"2014-08-29\",104],[\"2014-08-30\",176],[\"2014-08-31\",89],[\"2014-09-01\",127],[\"2014-09-03\",54],[\"2014-09-04\",100],[\"2014-09-05\",140],[\"2014-09-06\",186],[\"2014-09-07\",200],[\"2014-09-08\",61],[\"2014-09-09\",109],[\"2014-09-10\",111],[\"2014-09-11\",114],[\"2014-09-12\",97],[\"2014-09-13\",94],[\"2014-09-14\",66],[\"2014-09-15\",54],[\"2014-09-16\",87],[\"2014-09-17\",80],[\"2014-09-18\",84],[\"2014-09-19\",117],[\"2014-09-20\",168],[\"2014-09-21\",129],[\"2014-09-22\",127],[\"2014-09-23\",64],[\"2014-09-24\",60],[\"2014-09-25\",144],[\"2014-09-26\",170],[\"2014-09-27\",58],[\"2014-09-28\",87],[\"2014-09-29\",70],[\"2014-09-30\",53],[\"2014-10-01\",92],[\"2014-10-02\",78],[\"2014-10-03\",123],[\"2014-10-04\",95],[\"2014-10-05\",54],[\"2014-10-06\",68],[\"2014-10-07\",200],[\"2014-10-08\",314],[\"2014-10-09\",379],[\"2014-10-10\",346],[\"2014-10-11\",233],[\"2014-10-14\",80],[\"2014-10-15\",73],[\"2014-10-16\",76],[\"2014-10-17\",132],[\"2014-10-18\",211],[\"2014-10-19\",289],[\"2014-10-20\",250],[\"2014-10-21\",82],[\"2014-10-22\",99],[\"2014-10-23\",163],[\"2014-10-24\",267],[\"2014-10-25\",353],[\"2014-10-26\",78],[\"2014-10-27\",72],[\"2014-10-28\",88],[\"2014-10-29\",140],[\"2014-10-30\",206],[\"2014-10-31\",204],[\"2014-11-01\",65],[\"2014-11-03\",59],[\"2014-11-04\",150],[\"2014-11-05\",79],[\"2014-11-07\",63],[\"2014-11-08\",93],[\"2014-11-09\",80],[\"2014-11-10\",95],[\"2014-11-11\",59],[\"2014-11-13\",65],[\"2014-11-14\",77],[\"2014-11-15\",143],[\"2014-11-16\",98],[\"2014-11-17\",64],[\"2014-11-18\",93],[\"2014-11-19\",282],[\"2014-11-23\",155],[\"2014-11-24\",94],[\"2014-11-25\",196],[\"2014-11-26\",293],[\"2014-11-27\",83],[\"2014-11-28\",114],[\"2014-11-29\",276],[\"2014-12-01\",54],[\"2014-12-02\",65],[\"2014-12-03\",51],[\"2014-12-05\",62],[\"2014-12-06\",89],[\"2014-12-07\",65],[\"2014-12-08\",82],[\"2014-12-09\",276],[\"2014-12-10\",153],[\"2014-12-11\",52],[\"2014-12-13\",69],[\"2014-12-14\",113],[\"2014-12-15\",82],[\"2014-12-17\",99],[\"2014-12-19\",53],[\"2014-12-22\",103],[\"2014-12-23\",100],[\"2014-12-25\",73],[\"2014-12-26\",155],[\"2014-12-27\",243],[\"2014-12-28\",155],[\"2014-12-29\",125],[\"2014-12-30\",65],[\"2015-01-01\",65],[\"2015-01-02\",79],[\"2015-01-03\",200],[\"2015-01-04\",226],[\"2015-01-05\",122],[\"2015-01-06\",60],[\"2015-01-07\",85],[\"2015-01-08\",190],[\"2015-01-09\",105],[\"2015-01-10\",208],[\"2015-01-11\",59],[\"2015-01-12\",160],[\"2015-01-13\",211],[\"2015-01-14\",265],[\"2015-01-15\",386],[\"2015-01-16\",118],[\"2015-01-17\",89],[\"2015-01-18\",94],[\"2015-01-19\",77],[\"2015-01-20\",113],[\"2015-01-22\",143],[\"2015-01-23\",257],[\"2015-01-24\",117],[\"2015-01-25\",185],[\"2015-01-26\",119],[\"2015-01-28\",65],[\"2015-01-29\",87],[\"2015-01-31\",60],[\"2015-02-01\",108],[\"2015-02-02\",188],[\"2015-02-03\",143],[\"2015-02-05\",62],[\"2015-02-06\",100],[\"2015-02-09\",152],[\"2015-02-10\",166],[\"2015-02-11\",55],[\"2015-02-12\",59],[\"2015-02-13\",175],[\"2015-02-14\",293],[\"2015-02-15\",326],[\"2015-02-16\",153],[\"2015-02-18\",73],[\"2015-02-19\",267],[\"2015-02-20\",183],[\"2015-02-21\",394],[\"2015-02-22\",158],[\"2015-02-23\",86],[\"2015-02-24\",207]];\n\nconst option = {\n color: ['#3398DB'],\n title: {\n text: 'Beijing AQI'\n },\n tooltip: {\n trigger: 'axis'\n },\n xAxis: {\n data: data.map(function (item) {\n return item[0];\n })\n },\n yAxis: {\n splitLine: {\n show: false\n }\n },\n dataZoom: [{\n start: 80,\n type: 'inside'\n }, {\n start: 80\n }],\n series: {\n name: 'Beijing AQI',\n type: 'bar',\n data: data.map(function (item) {\n return item[1];\n })\n }\n};\n",
"name": "data-zoom-inside",
"title": "使用拖拽滚轮平移缩放",
"title-en": "DataZoom with Pan and Zoom"
}
]
},
"dataZoom-slider": {
"desc": "<p>Slider type dataZoom component provides functions like data thumbnail, zoom, brush to select, drag to move, click to locate.</p>\n<p>The followling picture shows areas to interact.</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/dataZoom-zone.png\"></p>\n",
"exampleBaseOptions": [
{
"code": "\nconst data = [[\"2014-07-14\",156],[\"2014-07-15\",140],[\"2014-07-16\",133],[\"2014-07-17\",186],[\"2014-07-18\",182],[\"2014-07-19\",106],[\"2014-07-20\",119],[\"2014-07-21\",68],[\"2014-07-22\",54],[\"2014-07-23\",82],[\"2014-07-24\",90],[\"2014-07-25\",134],[\"2014-07-26\",188],[\"2014-07-27\",194],[\"2014-07-28\",159],[\"2014-07-29\",159],[\"2014-07-30\",169],[\"2014-07-31\",244],[\"2014-08-01\",199],[\"2014-08-02\",163],[\"2014-08-03\",149],[\"2014-08-05\",80],[\"2014-08-06\",67],[\"2014-08-07\",162],[\"2014-08-08\",140],[\"2014-08-09\",143],[\"2014-08-10\",125],[\"2014-08-11\",76],[\"2014-08-12\",119],[\"2014-08-13\",70],[\"2014-08-14\",104],[\"2014-08-15\",109],[\"2014-08-16\",159],[\"2014-08-17\",124],[\"2014-08-18\",135],[\"2014-08-19\",150],[\"2014-08-20\",164],[\"2014-08-21\",169],[\"2014-08-22\",83],[\"2014-08-23\",155],[\"2014-08-24\",75],[\"2014-08-25\",59],[\"2014-08-26\",78],[\"2014-08-27\",136],[\"2014-08-28\",103],[\"2014-08-29\",104],[\"2014-08-30\",176],[\"2014-08-31\",89],[\"2014-09-01\",127],[\"2014-09-03\",54],[\"2014-09-04\",100],[\"2014-09-05\",140],[\"2014-09-06\",186],[\"2014-09-07\",200],[\"2014-09-08\",61],[\"2014-09-09\",109],[\"2014-09-10\",111],[\"2014-09-11\",114],[\"2014-09-12\",97],[\"2014-09-13\",94],[\"2014-09-14\",66],[\"2014-09-15\",54],[\"2014-09-16\",87],[\"2014-09-17\",80],[\"2014-09-18\",84],[\"2014-09-19\",117],[\"2014-09-20\",168],[\"2014-09-21\",129],[\"2014-09-22\",127],[\"2014-09-23\",64],[\"2014-09-24\",60],[\"2014-09-25\",144],[\"2014-09-26\",170],[\"2014-09-27\",58],[\"2014-09-28\",87],[\"2014-09-29\",70],[\"2014-09-30\",53],[\"2014-10-01\",92],[\"2014-10-02\",78],[\"2014-10-03\",123],[\"2014-10-04\",95],[\"2014-10-05\",54],[\"2014-10-06\",68],[\"2014-10-07\",200],[\"2014-10-08\",314],[\"2014-10-09\",379],[\"2014-10-10\",346],[\"2014-10-11\",233],[\"2014-10-14\",80],[\"2014-10-15\",73],[\"2014-10-16\",76],[\"2014-10-17\",132],[\"2014-10-18\",211],[\"2014-10-19\",289],[\"2014-10-20\",250],[\"2014-10-21\",82],[\"2014-10-22\",99],[\"2014-10-23\",163],[\"2014-10-24\",267],[\"2014-10-25\",353],[\"2014-10-26\",78],[\"2014-10-27\",72],[\"2014-10-28\",88],[\"2014-10-29\",140],[\"2014-10-30\",206],[\"2014-10-31\",204],[\"2014-11-01\",65],[\"2014-11-03\",59],[\"2014-11-04\",150],[\"2014-11-05\",79],[\"2014-11-07\",63],[\"2014-11-08\",93],[\"2014-11-09\",80],[\"2014-11-10\",95],[\"2014-11-11\",59],[\"2014-11-13\",65],[\"2014-11-14\",77],[\"2014-11-15\",143],[\"2014-11-16\",98],[\"2014-11-17\",64],[\"2014-11-18\",93],[\"2014-11-19\",282],[\"2014-11-23\",155],[\"2014-11-24\",94],[\"2014-11-25\",196],[\"2014-11-26\",293],[\"2014-11-27\",83],[\"2014-11-28\",114],[\"2014-11-29\",276],[\"2014-12-01\",54],[\"2014-12-02\",65],[\"2014-12-03\",51],[\"2014-12-05\",62],[\"2014-12-06\",89],[\"2014-12-07\",65],[\"2014-12-08\",82],[\"2014-12-09\",276],[\"2014-12-10\",153],[\"2014-12-11\",52],[\"2014-12-13\",69],[\"2014-12-14\",113],[\"2014-12-15\",82],[\"2014-12-17\",99],[\"2014-12-19\",53],[\"2014-12-22\",103],[\"2014-12-23\",100],[\"2014-12-25\",73],[\"2014-12-26\",155],[\"2014-12-27\",243],[\"2014-12-28\",155],[\"2014-12-29\",125],[\"2014-12-30\",65],[\"2015-01-01\",65],[\"2015-01-02\",79],[\"2015-01-03\",200],[\"2015-01-04\",226],[\"2015-01-05\",122],[\"2015-01-06\",60],[\"2015-01-07\",85],[\"2015-01-08\",190],[\"2015-01-09\",105],[\"2015-01-10\",208],[\"2015-01-11\",59],[\"2015-01-12\",160],[\"2015-01-13\",211],[\"2015-01-14\",265],[\"2015-01-15\",386],[\"2015-01-16\",118],[\"2015-01-17\",89],[\"2015-01-18\",94],[\"2015-01-19\",77],[\"2015-01-20\",113],[\"2015-01-22\",143],[\"2015-01-23\",257],[\"2015-01-24\",117],[\"2015-01-25\",185],[\"2015-01-26\",119],[\"2015-01-28\",65],[\"2015-01-29\",87],[\"2015-01-31\",60],[\"2015-02-01\",108],[\"2015-02-02\",188],[\"2015-02-03\",143],[\"2015-02-05\",62],[\"2015-02-06\",100],[\"2015-02-09\",152],[\"2015-02-10\",166],[\"2015-02-11\",55],[\"2015-02-12\",59],[\"2015-02-13\",175],[\"2015-02-14\",293],[\"2015-02-15\",326],[\"2015-02-16\",153],[\"2015-02-18\",73],[\"2015-02-19\",267],[\"2015-02-20\",183],[\"2015-02-21\",394],[\"2015-02-22\",158],[\"2015-02-23\",86],[\"2015-02-24\",207]];\n\nconst option = {\n color: ['#3398DB'],\n tooltip: {\n trigger: 'axis'\n },\n xAxis: {\n data: data.map(function (item) {\n return item[0];\n })\n },\n yAxis: {\n splitLine: {\n show: false\n }\n },\n dataZoom: [{\n }],\n series: {\n name: 'Beijing AQI',\n type: 'bar',\n data: data.map(function (item) {\n return item[1];\n })\n }\n};\n",
"name": "data-zoom-slider",
"title": "滑块缩放的 dataZoom",
"title-en": "DataZoom with Slider"
}
]
},
"visualMap": {
"desc": "<p><code class=\"codespan\">visualMap</code> is a type of component for visual encoding, which maps the data to visual channels, including:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p>Myltiple <code class=\"codespan\">visualMap</code> component could be defined in a chart instance, which enable that different dimensions of a series data are mapped to different visual channels.</p>\n<p><code class=\"codespan\">visualMap</code> could be defined as <a href=\"#visualMap-piecewise\">Piecewise (visualMapPiecewise)</a> or <a href=\"#visualMap-continuous\">Continuous (visualMapContinuous)</a>, which is distinguished by the property <code class=\"codespan\">type</code>. For instance:</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n { // the first visualMap component\n type: &#39;continuous&#39;, // defined to be continuous visualMap\n ...\n },\n { // the second visualMap component\n type: &#39;piecewise&#39;, // defined to be piecewise visualMap\n ...\n }\n ],\n ...\n};\n</code></pre>\n<p><br>\n<strong>✦ Configure mapping ✦</strong></p>\n<p>The dimension of <a href=\"#series.data\">series.data</a> can be specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>, from which the value can be retrieved and mapped onto visual channels, which can be defined in <a href=\"#visualMap.inRange\">visualMap.inRange</a> and <a href=\"#visualMap.outOfRange\">visualMap.outOfRange</a>.</p>\n<p><br>\nIn series that controlled by visualMap, if a data item needs to escape from controlled by visualMap, you can set like this:</p>\n<pre><code>series: {\n type: &#39;...&#39;,\n data: [\n {name: &#39;Shanghai&#39;, value: 251},\n {name: &#39;Haikou&#39;, value: 21},\n // Mark as `visualMap: false`, then this item does not controlled by visualMap any more,\n // and series visual config (like color, symbol, ...) can be used to this item.\n {name: &#39;Beijing&#39;, value: 821, },\n ...\n ]\n}\n</code></pre><p><br>\n<strong>✦ The relationship between visualMap of ECharts3 and dataRange of ECharts2 ✦</strong></p>\n<p><code class=\"codespan\">visualMap</code> is renamed from the <code class=\"codespan\">dataRange</code> of ECharts2, and the scope of functionalities are extended a lot. The configurations of <code class=\"codespan\">dataRange</code> are still compatible in ECharts3, which automatically convert them to <code class=\"codespan\">visualMap</code>. It is recommended to use <code class=\"codespan\">visualMap</code> instead of <code class=\"codespan\">dataRange</code> in ECharts3.</p>\n<p><br>\n<strong>✦ The detailed configurations of visualMap are elaborated as follows. ✦</strong></p>\n<p><br>\n<br></p>\n"
},
"visualMap-continuous": {
"desc": "<p><strong>Continuous visualMap component (visualMapContinuous)</strong></p>\n<p> (See <a href=\"#visualMap\">the introduction to visual Map component (visualMap)</a>)</p>\n<p>You can set <a href=\"#visualMap.calculable\">visualMap.calculable</a> to show or hide the handles, which are used to change the selected range in <code class=\"codespan\">visualMapContinuous</code>.</p>\n<p><br>\n<br></p>\n",
"exampleBaseOptions": [
{
"code": "\n// https://echarts.apache.org/examples/zh/editor.html?c=heatmap-large\noption = {\"tooltip\":{},\"xAxis\":{\"type\":\"category\",\"data\":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]},\"yAxis\":{\"type\":\"category\",\"data\":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]},\"visualMap\":{\"min\":0,\"max\":100,\"calculable\":true,\"realtime\":false,\"inRange\":{\"color\":[\"#313695\",\"#4575b4\",\"#74add1\",\"#abd9e9\",\"#e0f3f8\",\"#ffffbf\",\"#fee090\",\"#fdae61\",\"#f46d43\",\"#d73027\",\"#a50026\"]}},\"series\":[{\"name\":\"Gaussian\",\"type\":\"heatmap\",\"data\":[[0,0,50],[0,1,50],[0,2,50],[0,3,50],[0,4,50],[0,5,50],[0,6,50],[0,7,50],[0,8,50],[0,9,50],[0,10,50],[0,11,50],[0,12,50],[0,13,50],[0,14,50],[0,15,50],[0,16,50],[0,17,50],[0,18,50],[0,19,50],[0,20,50],[1,0,54.994209375000004],[1,1,54.98855287535156],[1,2,54.983669047750006],[1,3,54.980227686550776],[1,4,54.978760914000006],[1,5,54.97964233398438],[1,6,54.983074003125],[1,7,54.98908121921484],[1,8,54.997515127],[1,9,55.00806314130469],[1,10,55.020267187500004],[1,11,55.0335497593164],[1,12,55.047247794],[1,13,55.0606543648125],[1,14,55.073068190875],[1,15,55.08385096435546],[1,16,55.092492495],[1,17,55.09868367200781],[1,18,55.10239724325],[1,19,55.103976411832036],[1,20,55.104231250000005],[2,0,59.9144],[2,1,59.87254178725],[2,2,59.83612736],[2,3,59.80991875325],[2,4,59.797737472],[2,5,59.80230078125],[2,6,59.825115776000004],[2,7,59.866431231250004],[2,8,59.925247232000004],[2,9,59.999382583250004],[2,10,60.08560000000001],[2,11,60.17978907725],[2,12,60.27720704],[2,13,60.37277727325],[2,14,60.461445632],[2,15,60.53859453125],[2,16,60.60051481600001],[2,17,60.64493541125],[2,18,60.67161075200001],[2,19,60.68296599325001],[2,20,60.6848],[3,0,64.60082187500001],[3,1,64.4705362889961],[3,2,64.35634390175],[3,3,64.27246293910156],[3,4,64.230427154],[3,5,64.23854693603516],[3,6,64.301550051125],[3,7,64.42040201135937],[3,8,64.592306075],[3,9,64.81088287663673],[3,10,65.0665296875],[3,11,65.34695930592969],[3,12,65.637918578],[3,13,65.92408654830078],[3,14,66.190152240875],[3,15,66.4220720703125],[3,16,66.60850688299999],[3,17,66.74243862852734],[3,18,66.82296666124999],[3,19,66.85728367200781],[3,20,66.86283125],[4,0,68.8416],[4,1,68.557701681],[4,2,68.30702156800001],[4,3,68.11922918100001],[4,4,68.01867264],[4,5,68.023140625],[4,6,68.143015296],[4,7,68.380816173],[4,8,68.731134976],[4,9,69.180961425],[4,10,69.7104],[4,11,70.29377766100001],[4,12,70.90114252800001],[4,13,71.50015352100002],[4,14,72.05836096],[4,15,72.545878125],[4,16,72.938443776],[4,17,73.22087563299999],[4,18,73.39091481599999],[4,19,73.46346124499999],[4,20,73.4752],[5,0,72.412109375],[5,1,71.90412197265626],[5,2,71.45227109375],[5,3,71.10730203857422],[5,4,70.91138125],[5,5,70.89576721191406],[5,6,71.07918007812499],[5,7,71.46687003173828],[5,8,72.050384375],[5,9,72.80803334960937],[5,10,73.7060546875],[5,11,74.70047689208985],[5,12,75.73968125],[5,13,76.76766257324219],[5,14,77.72798867187501],[5,15,78.5684585571289],[5,16,79.246459375],[5,17,79.73502207031248],[5,18,80.02957578124999],[5,19,80.15540096435545],[5,20,80.17578125],[6,0,75.10759999999999],[6,1,74.306365026875],[6,2,73.588477184],[6,3,73.030288488875],[6,4,72.69610342399999],[6,5,72.634326171875],[6,6,72.87470864],[6,7,73.426699275875],[6,8,74.278892672],[6,9,75.399579960875],[6,10,76.7384],[6,11,78.229091346875],[6,12,79.79334502399999],[6,13,81.345758073875],[6,14,82.79988790399999],[6,15,84.075407421875],[6,16,85.10636096],[6,17,85.85052099087498],[6,18,86.299845632],[6,19,86.49203694087497],[6,20,86.5232],[7,0,76.769071875],[7,1,75.61228988726954],[7,2,74.56835686375],[7,3,73.74219509090625],[7,4,73.223470242],[7,5,73.08077093505861],[7,6,73.357375684125],[7,7,74.06860724378906],[7,8,75.20077434699999],[7,9,76.71170083616016],[7,10,78.53284218750001],[7,11,80.57298942873437],[7,12,82.72356045],[7,13,84.86547870807422],[7,14,86.877639323875],[7,15,88.64696257324218],[7,16,90.080034771],[7,17,91.11633654830075],[7,18,91.74305852324999],[7,19,92.01150436481247],[7,20,92.05508124999999],[8,0,77.30239999999999],[8,1,75.739096288],[8,2,74.318210048],[8,3,73.17437552],[8,4,72.42448998399999],[8,5,72.1595],[8,6,72.43833036800001],[8,7,73.283955808],[8,8,74.68161536],[8,9,76.579169504],[8,10,78.8896],[8,11,81.495652448],[8,12,84.256621568],[8,13,87.0172792],[8,14,89.618945024],[8,15,91.9127],[8,16,93.774742528],[8,17,95.12388732799997],[8,18,95.94120704],[8,19,96.29181654399996],[8,20,96.3488],[9,0,76.690709375],[9,1,74.68461634627343],[9,2,72.84836233175],[9,3,71.34554847203516],[9,4,70.32070372999999],[9,5,69.88829931640626],[9,6,70.124509509125],[9,7,71.06171886594922],[9,8,72.685775831],[9,9,74.93599273472657],[9,10,77.70789218750001],[9,11,80.85869986680079],[9,12,84.21558369799999],[9,13,87.58663942873439],[9,14,90.774622596875],[9,15,93.59342689208985],[9,16,95.88730891100002],[9,17,97.55285930592964],[9,18,98.56372032724998],[9,19,98.99804975931636],[9,20,99.06873125],[10,0,75],[10,1,72.5318484375],[10,2,70.25680000000001],[10,3,68.36488593749999],[10,4,67.0272],[10,5,66.3818359375],[10,6,66.5232],[10,7,67.4946984375],[10,8,69.2848],[10,9,71.8264734375],[10,10,75],[10,11,78.63916093750001],[10,12,82.5408],[10,13,86.47776093750001],[10,14,90.2152],[10,15,93.5302734375],[10,16,96.2352],[10,17,98.20369843749995],[10,18,99.40079999999998],[10,19,99.91603593749994],[10,20,100],[11,0,72.378021875],[11,1,69.44673325310546],[11,2,66.72599725775],[11,3,64.42817184539844],[11,4,62.748488433999995],[11,5,61.847702941894525],[11,6,61.838750433125],[11,7,62.77740336915625],[11,8,64.656933467],[11,9,67.40677716374609],[11,10,70.89520468749998],[11,11,74.93599273472657],[11,12,79.299100754],[11,13,83.72535083616017],[11,14,87.94511121087498],[11,15,91.70098334960937],[11,16,94.774492675],[11,17,97.01678287663667],[11,18,98.38331383324999],[11,19,98.9725631413046],[11,20,99.06873125],[12,0,69.04639999999999],[12,1,65.669172041],[12,2,62.51293567999999],[12,3,59.807031077],[12,4,57.767232512],[12,5,56.57501562499999],[12,6,56.361431935999995],[12,7,57.195590644999996],[12,8,59.077747712],[12,9,61.937002217],[12,10,65.6336],[12,11,69.965844581],[12,12,74.68161536],[12,13,79.49449309700002],[12,14,84.10449267199999],[12,15,88.223403125],[12,16,91.60473497600002],[12,17,94.07827482499994],[12,18,95.58924723199998],[12,19,96.24208387699991],[12,20,96.3488],[13,0,65.28600937499999],[13,1,61.497287028703106],[13,2,57.932315881749986],[13,3,54.83122884943358],[13,4,52.425841313999975],[13,5,50.91555895996092],[13,6,50.44844821612499],[13,7,51.10746930434764],[13,8,52.901871894999985],[13,9,55.763753369156234],[13,10,59.549779687499985],[13,11,64.0480688659492],[13,12,68.99023705799999],[13,13,74.06860724378906],[13,14,78.95858052587498],[13,15,83.34617003173828],[13,16,86.96069742300001],[13,17,89.6126520113593],[13,18,91.23671248124997],[13,19,91.93993121921474],[13,20,92.05508124999999],[14,0,61.415600000000005],[14,1,57.264924029125005],[14,2,53.33296140800001],[14,3,49.86404046912501],[14,4,47.100920320000014],[14,5,45.257486328125005],[14,6,44.497094816000015],[14,7,44.91656696612501],[14,8,46.535831936000015],[14,9,49.29321918312502],[14,10,53.04640000000001],[14,11,57.578978259125016],[14,12,62.612730368000015],[14,13,67.82549443412502],[14,14,72.87470864000001],[14,15,77.42659882812501],[14,16,81.19101529600002],[14,17,83.96191880112494],[14,18,85.66351577599998],[14,19,86.40204275312492],[14,20,86.52320000000002],[15,0,57.763671875],[15,1,53.312397229003906],[15,2,49.06741484375],[15,3,45.27069145507813],[15,4,42.17058125],[15,5,39.99156951904297],[15,6,38.910067578125],[15,7,39.03625895996093],[15,8,40.401996875],[15,9,42.95475294189453],[15,10,46.5576171875],[15,11,50.995349316406255],[15,12,55.98648125000001],[15,13,61.20147093505861],[15,14,66.286907421875],[15,15,70.89576721191406],[15,16,74.72372187500001],[15,17,77.55149693603508],[15,18,79.29328203124997],[15,19,80.05119233398428],[15,20,80.17578125],[16,0,54.633599999999994],[16,1,49.950476159999994],[16,2,45.45472614399999],[16,3,41.37986803199999],[16,4,37.974610943999984],[16,5,35.469999999999985],[16,6,34.052920319999984],[16,7,33.84596006399998],[16,8,34.89363251199998],[16,9,37.15495718399999],[16,10,40.50239999999998],[16,11,44.727172479999986],[16,12,49.550889983999994],[16,13,54.643588992000005],[16,14,59.64810342399998],[16,15,64.21079999999999],[16,16,68.01867264],[16,17,70.84279590399991],[16,18,72.58813747199996],[16,19,73.34972966399988],[16,20,73.47519999999999],[17,0,52.26200937500006],[17,1,47.417614852445375],[17,2,42.73643318375007],[17,3,38.43829799326961],[17,4,34.767499282000074],[17,5,31.957741455078203],[17,6,30.20367171912508],[17,7,29.638978849433673],[17,8,30.32106232700008],[17,9,32.222271845398524],[17,10,35.227717187500076],[17,11,39.13964847203523],[17,12,43.68840677000008],[17,13,48.549945090906334],[17,14,53.36991973887506],[17,15,57.79435203857428],[17,16,61.506860431000064],[17,17,64.27246293910154],[17,18,65.98795000325003],[17,19,66.73882768655074],[17,20,66.86283125000006],[18,0,50.770400000000016],[18,1,45.83042317175002],[18,2,41.02573452800002],[18,3,36.55840193375003],[18,4,32.66432614400002],[18,5,29.57643359375003],[18,6,27.494561408000028],[18,7,26.56203463175002],[18,8,26.84893568000003],[18,9,28.342066007750034],[18,10,30.941600000000026],[18,11,34.46443108175002],[18,12,38.654210048000024],[18,13,43.198075613750035],[18,14,47.75007718400001],[18,15,51.961289843750016],[18,16,55.51662156800003],[18,17,58.178312651749955],[18,18,59.83612735999999],[18,19,60.56423779774992],[18,20,60.68480000000002],[19,0,50.110021875000086],[19,1,45.127380337464935],[19,2,40.24985442175009],[19,3,35.65901485244542],[19,4,31.5795074100001],[19,5,28.24084722900401],[19,6,25.84595527912511],[19,7,24.546437028703227],[19,8,24.424603291000114],[19,9,25.482233253105584],[19,10,27.636079687500104],[19,11,30.720116346273546],[19,12,34.494527538000106],[19,13,38.661439887269644],[19,14,42.88739627687509],[19,15,46.832571972656346],[19,16,50.1867329310001],[19,17,52.71193628899612],[19,18,54.29197303725006],[19,19,54.98855287535156],[19,20,55.10423125000008],[20,0,50],[20,1,45.005790624999996],[20,2,40.0856],[20,3,35.399178125],[20,4,31.158399999999997],[20,5,27.587890625],[20,6,24.892400000000002],[20,7,23.230928125],[20,8,22.6976],[20,9,23.309290625000003],[20,10,25],[20,11,27.621978125000002],[20,12,30.9536],[20,13,34.713990625000015],[20,14,38.58439999999999],[20,15,42.236328125],[20,16,45.36640000000001],[20,17,47.73799062499994],[20,18,49.22959999999998],[20,19,49.889978124999914],[20,20,50]],\"emphasis\":{\"itemStyle\":{\"borderColor\":\"#333\",\"borderWidth\":1}},\"progressive\":1000,\"animation\":false}]};\n",
"name": "visual-map-heatmap",
"title": "热力图颜色线性映射",
"title-en": "Heatmap - Linear Map"
}
]
},
"visualMap-piecewise": {
"desc": "<p><strong>Piecewise visualMap component (visualMapPiecewise) </strong></p>\n<p> (Reference to <a href=\"#visualMap\">the introduction of visual Map component (visualMap)</a>)</p>\n<p>Sample:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=doc-example/scatter-visualMap-piecewise&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n<p>Piecewise visualMap component works in one of the three modes:</p>\n<ul>\n<li><strong>CONTINUOUS-AVERAGE</strong>: The series.data is continuous and is divided into pieces averagely according to <a href=\"#visualMap-piecewise.splitNumber\">visualMap-piecewise.splitNumber</a>.</li>\n<li><strong>CONTINUOUS-CUSTOMIZED</strong>: The series.data is continuous and is divided into pieces according to the given rule defined in <a href=\"#visualMap-piecewise.pieces\">visualMap-piecewise.pieces</a>.</li>\n<li><strong>CATEGORY</strong>: The series.data is discrete and is categorized according to <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>.</li>\n</ul>\n<p><br>\n<br></p>\n",
"exampleBaseOptions": [
{
"code": "\n// https://echarts.apache.org/examples/zh/editor.html?c=heatmap-large\noption = {\"tooltip\":{},\"xAxis\":{\"type\":\"category\",\"data\":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]},\"yAxis\":{\"type\":\"category\",\"data\":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]},\"visualMap\":{\"type\":\"piecewise\",\"splitNumber\": 8,\"min\":0,\"max\":100,\"calculable\":true,\"realtime\":false,\"inRange\":{\"color\":[\"#313695\",\"#4575b4\",\"#74add1\",\"#abd9e9\",\"#e0f3f8\",\"#ffffbf\",\"#fee090\",\"#fdae61\",\"#f46d43\",\"#d73027\",\"#a50026\"]}},\"series\":[{\"name\":\"Gaussian\",\"type\":\"heatmap\",\"data\":[[0,0,50],[0,1,50],[0,2,50],[0,3,50],[0,4,50],[0,5,50],[0,6,50],[0,7,50],[0,8,50],[0,9,50],[0,10,50],[0,11,50],[0,12,50],[0,13,50],[0,14,50],[0,15,50],[0,16,50],[0,17,50],[0,18,50],[0,19,50],[0,20,50],[1,0,54.994209375000004],[1,1,54.98855287535156],[1,2,54.983669047750006],[1,3,54.980227686550776],[1,4,54.978760914000006],[1,5,54.97964233398438],[1,6,54.983074003125],[1,7,54.98908121921484],[1,8,54.997515127],[1,9,55.00806314130469],[1,10,55.020267187500004],[1,11,55.0335497593164],[1,12,55.047247794],[1,13,55.0606543648125],[1,14,55.073068190875],[1,15,55.08385096435546],[1,16,55.092492495],[1,17,55.09868367200781],[1,18,55.10239724325],[1,19,55.103976411832036],[1,20,55.104231250000005],[2,0,59.9144],[2,1,59.87254178725],[2,2,59.83612736],[2,3,59.80991875325],[2,4,59.797737472],[2,5,59.80230078125],[2,6,59.825115776000004],[2,7,59.866431231250004],[2,8,59.925247232000004],[2,9,59.999382583250004],[2,10,60.08560000000001],[2,11,60.17978907725],[2,12,60.27720704],[2,13,60.37277727325],[2,14,60.461445632],[2,15,60.53859453125],[2,16,60.60051481600001],[2,17,60.64493541125],[2,18,60.67161075200001],[2,19,60.68296599325001],[2,20,60.6848],[3,0,64.60082187500001],[3,1,64.4705362889961],[3,2,64.35634390175],[3,3,64.27246293910156],[3,4,64.230427154],[3,5,64.23854693603516],[3,6,64.301550051125],[3,7,64.42040201135937],[3,8,64.592306075],[3,9,64.81088287663673],[3,10,65.0665296875],[3,11,65.34695930592969],[3,12,65.637918578],[3,13,65.92408654830078],[3,14,66.190152240875],[3,15,66.4220720703125],[3,16,66.60850688299999],[3,17,66.74243862852734],[3,18,66.82296666124999],[3,19,66.85728367200781],[3,20,66.86283125],[4,0,68.8416],[4,1,68.557701681],[4,2,68.30702156800001],[4,3,68.11922918100001],[4,4,68.01867264],[4,5,68.023140625],[4,6,68.143015296],[4,7,68.380816173],[4,8,68.731134976],[4,9,69.180961425],[4,10,69.7104],[4,11,70.29377766100001],[4,12,70.90114252800001],[4,13,71.50015352100002],[4,14,72.05836096],[4,15,72.545878125],[4,16,72.938443776],[4,17,73.22087563299999],[4,18,73.39091481599999],[4,19,73.46346124499999],[4,20,73.4752],[5,0,72.412109375],[5,1,71.90412197265626],[5,2,71.45227109375],[5,3,71.10730203857422],[5,4,70.91138125],[5,5,70.89576721191406],[5,6,71.07918007812499],[5,7,71.46687003173828],[5,8,72.050384375],[5,9,72.80803334960937],[5,10,73.7060546875],[5,11,74.70047689208985],[5,12,75.73968125],[5,13,76.76766257324219],[5,14,77.72798867187501],[5,15,78.5684585571289],[5,16,79.246459375],[5,17,79.73502207031248],[5,18,80.02957578124999],[5,19,80.15540096435545],[5,20,80.17578125],[6,0,75.10759999999999],[6,1,74.306365026875],[6,2,73.588477184],[6,3,73.030288488875],[6,4,72.69610342399999],[6,5,72.634326171875],[6,6,72.87470864],[6,7,73.426699275875],[6,8,74.278892672],[6,9,75.399579960875],[6,10,76.7384],[6,11,78.229091346875],[6,12,79.79334502399999],[6,13,81.345758073875],[6,14,82.79988790399999],[6,15,84.075407421875],[6,16,85.10636096],[6,17,85.85052099087498],[6,18,86.299845632],[6,19,86.49203694087497],[6,20,86.5232],[7,0,76.769071875],[7,1,75.61228988726954],[7,2,74.56835686375],[7,3,73.74219509090625],[7,4,73.223470242],[7,5,73.08077093505861],[7,6,73.357375684125],[7,7,74.06860724378906],[7,8,75.20077434699999],[7,9,76.71170083616016],[7,10,78.53284218750001],[7,11,80.57298942873437],[7,12,82.72356045],[7,13,84.86547870807422],[7,14,86.877639323875],[7,15,88.64696257324218],[7,16,90.080034771],[7,17,91.11633654830075],[7,18,91.74305852324999],[7,19,92.01150436481247],[7,20,92.05508124999999],[8,0,77.30239999999999],[8,1,75.739096288],[8,2,74.318210048],[8,3,73.17437552],[8,4,72.42448998399999],[8,5,72.1595],[8,6,72.43833036800001],[8,7,73.283955808],[8,8,74.68161536],[8,9,76.579169504],[8,10,78.8896],[8,11,81.495652448],[8,12,84.256621568],[8,13,87.0172792],[8,14,89.618945024],[8,15,91.9127],[8,16,93.774742528],[8,17,95.12388732799997],[8,18,95.94120704],[8,19,96.29181654399996],[8,20,96.3488],[9,0,76.690709375],[9,1,74.68461634627343],[9,2,72.84836233175],[9,3,71.34554847203516],[9,4,70.32070372999999],[9,5,69.88829931640626],[9,6,70.124509509125],[9,7,71.06171886594922],[9,8,72.685775831],[9,9,74.93599273472657],[9,10,77.70789218750001],[9,11,80.85869986680079],[9,12,84.21558369799999],[9,13,87.58663942873439],[9,14,90.774622596875],[9,15,93.59342689208985],[9,16,95.88730891100002],[9,17,97.55285930592964],[9,18,98.56372032724998],[9,19,98.99804975931636],[9,20,99.06873125],[10,0,75],[10,1,72.5318484375],[10,2,70.25680000000001],[10,3,68.36488593749999],[10,4,67.0272],[10,5,66.3818359375],[10,6,66.5232],[10,7,67.4946984375],[10,8,69.2848],[10,9,71.8264734375],[10,10,75],[10,11,78.63916093750001],[10,12,82.5408],[10,13,86.47776093750001],[10,14,90.2152],[10,15,93.5302734375],[10,16,96.2352],[10,17,98.20369843749995],[10,18,99.40079999999998],[10,19,99.91603593749994],[10,20,100],[11,0,72.378021875],[11,1,69.44673325310546],[11,2,66.72599725775],[11,3,64.42817184539844],[11,4,62.748488433999995],[11,5,61.847702941894525],[11,6,61.838750433125],[11,7,62.77740336915625],[11,8,64.656933467],[11,9,67.40677716374609],[11,10,70.89520468749998],[11,11,74.93599273472657],[11,12,79.299100754],[11,13,83.72535083616017],[11,14,87.94511121087498],[11,15,91.70098334960937],[11,16,94.774492675],[11,17,97.01678287663667],[11,18,98.38331383324999],[11,19,98.9725631413046],[11,20,99.06873125],[12,0,69.04639999999999],[12,1,65.669172041],[12,2,62.51293567999999],[12,3,59.807031077],[12,4,57.767232512],[12,5,56.57501562499999],[12,6,56.361431935999995],[12,7,57.195590644999996],[12,8,59.077747712],[12,9,61.937002217],[12,10,65.6336],[12,11,69.965844581],[12,12,74.68161536],[12,13,79.49449309700002],[12,14,84.10449267199999],[12,15,88.223403125],[12,16,91.60473497600002],[12,17,94.07827482499994],[12,18,95.58924723199998],[12,19,96.24208387699991],[12,20,96.3488],[13,0,65.28600937499999],[13,1,61.497287028703106],[13,2,57.932315881749986],[13,3,54.83122884943358],[13,4,52.425841313999975],[13,5,50.91555895996092],[13,6,50.44844821612499],[13,7,51.10746930434764],[13,8,52.901871894999985],[13,9,55.763753369156234],[13,10,59.549779687499985],[13,11,64.0480688659492],[13,12,68.99023705799999],[13,13,74.06860724378906],[13,14,78.95858052587498],[13,15,83.34617003173828],[13,16,86.96069742300001],[13,17,89.6126520113593],[13,18,91.23671248124997],[13,19,91.93993121921474],[13,20,92.05508124999999],[14,0,61.415600000000005],[14,1,57.264924029125005],[14,2,53.33296140800001],[14,3,49.86404046912501],[14,4,47.100920320000014],[14,5,45.257486328125005],[14,6,44.497094816000015],[14,7,44.91656696612501],[14,8,46.535831936000015],[14,9,49.29321918312502],[14,10,53.04640000000001],[14,11,57.578978259125016],[14,12,62.612730368000015],[14,13,67.82549443412502],[14,14,72.87470864000001],[14,15,77.42659882812501],[14,16,81.19101529600002],[14,17,83.96191880112494],[14,18,85.66351577599998],[14,19,86.40204275312492],[14,20,86.52320000000002],[15,0,57.763671875],[15,1,53.312397229003906],[15,2,49.06741484375],[15,3,45.27069145507813],[15,4,42.17058125],[15,5,39.99156951904297],[15,6,38.910067578125],[15,7,39.03625895996093],[15,8,40.401996875],[15,9,42.95475294189453],[15,10,46.5576171875],[15,11,50.995349316406255],[15,12,55.98648125000001],[15,13,61.20147093505861],[15,14,66.286907421875],[15,15,70.89576721191406],[15,16,74.72372187500001],[15,17,77.55149693603508],[15,18,79.29328203124997],[15,19,80.05119233398428],[15,20,80.17578125],[16,0,54.633599999999994],[16,1,49.950476159999994],[16,2,45.45472614399999],[16,3,41.37986803199999],[16,4,37.974610943999984],[16,5,35.469999999999985],[16,6,34.052920319999984],[16,7,33.84596006399998],[16,8,34.89363251199998],[16,9,37.15495718399999],[16,10,40.50239999999998],[16,11,44.727172479999986],[16,12,49.550889983999994],[16,13,54.643588992000005],[16,14,59.64810342399998],[16,15,64.21079999999999],[16,16,68.01867264],[16,17,70.84279590399991],[16,18,72.58813747199996],[16,19,73.34972966399988],[16,20,73.47519999999999],[17,0,52.26200937500006],[17,1,47.417614852445375],[17,2,42.73643318375007],[17,3,38.43829799326961],[17,4,34.767499282000074],[17,5,31.957741455078203],[17,6,30.20367171912508],[17,7,29.638978849433673],[17,8,30.32106232700008],[17,9,32.222271845398524],[17,10,35.227717187500076],[17,11,39.13964847203523],[17,12,43.68840677000008],[17,13,48.549945090906334],[17,14,53.36991973887506],[17,15,57.79435203857428],[17,16,61.506860431000064],[17,17,64.27246293910154],[17,18,65.98795000325003],[17,19,66.73882768655074],[17,20,66.86283125000006],[18,0,50.770400000000016],[18,1,45.83042317175002],[18,2,41.02573452800002],[18,3,36.55840193375003],[18,4,32.66432614400002],[18,5,29.57643359375003],[18,6,27.494561408000028],[18,7,26.56203463175002],[18,8,26.84893568000003],[18,9,28.342066007750034],[18,10,30.941600000000026],[18,11,34.46443108175002],[18,12,38.654210048000024],[18,13,43.198075613750035],[18,14,47.75007718400001],[18,15,51.961289843750016],[18,16,55.51662156800003],[18,17,58.178312651749955],[18,18,59.83612735999999],[18,19,60.56423779774992],[18,20,60.68480000000002],[19,0,50.110021875000086],[19,1,45.127380337464935],[19,2,40.24985442175009],[19,3,35.65901485244542],[19,4,31.5795074100001],[19,5,28.24084722900401],[19,6,25.84595527912511],[19,7,24.546437028703227],[19,8,24.424603291000114],[19,9,25.482233253105584],[19,10,27.636079687500104],[19,11,30.720116346273546],[19,12,34.494527538000106],[19,13,38.661439887269644],[19,14,42.88739627687509],[19,15,46.832571972656346],[19,16,50.1867329310001],[19,17,52.71193628899612],[19,18,54.29197303725006],[19,19,54.98855287535156],[19,20,55.10423125000008],[20,0,50],[20,1,45.005790624999996],[20,2,40.0856],[20,3,35.399178125],[20,4,31.158399999999997],[20,5,27.587890625],[20,6,24.892400000000002],[20,7,23.230928125],[20,8,22.6976],[20,9,23.309290625000003],[20,10,25],[20,11,27.621978125000002],[20,12,30.9536],[20,13,34.713990625000015],[20,14,38.58439999999999],[20,15,42.236328125],[20,16,45.36640000000001],[20,17,47.73799062499994],[20,18,49.22959999999998],[20,19,49.889978124999914],[20,20,50]],\"emphasis\":{\"itemStyle\":{\"borderColor\":\"#333\",\"borderWidth\":1}},\"progressive\":1000,\"animation\":false}]};\n",
"name": "visual-map-heatmap",
"title": "热力图颜色分段映射",
"title-en": "Heatmap - Step Map"
}
]
},
"tooltip": {
"desc": "<p>Tooltip component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href=\"#grid.tooltip\">grid.tooltip</a>, <a href=\"#polar.tooltip\">polar.tooltip</a>, <a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href=\"#series.tooltip\">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code class=\"codespan\">series.data</code>: <a href=\"#series.data.tooltip\">series.data.tooltip</a></p>\n</li>\n</ul>\n<hr>\n\n\n\n",
"exampleBaseOptions": [
{
"code": "\nvar base = +new Date(2016, 9, 3);\nvar oneDay = 24 * 3600 * 1000;\nvar valueBase = Math.random() * 300;\nvar valueBase2 = Math.random() * 50;\nvar data = [];\nvar data2 = [];\n\nfor (var i = 1; i < 10; i++) {\n var now = new Date(base += oneDay);\n var dayStr = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-');\n\n valueBase = Math.round((Math.random() - 0.5) * 20 + valueBase);\n valueBase <= 0 && (valueBase = Math.random() * 300);\n data.push([dayStr, valueBase]);\n\n valueBase2 = Math.round((Math.random() - 0.5) * 20 + valueBase2);\n valueBase2 <= 0 && (valueBase2 = Math.random() * 50);\n data2.push([dayStr, valueBase2]);\n}\n\nconst option = {\n legend: {\n top: 'bottom',\n data: ['意向']\n },\n tooltip: {\n triggerOn: 'none',\n alwaysShowContent: true,\n position: function (pt) {\n return [pt[0], 130];\n }\n },\n xAxis: {\n type: 'time',\n // boundaryGap: [0, 0],\n axisPointer: {\n value: '2016-10-7',\n snap: true,\n label: {\n show: true,\n formatter: function (params) {\n return echarts.format.formatTime('yyyy-MM-dd', params.value);\n }\n },\n handle: {\n show: true\n }\n },\n splitLine: {\n show: false\n }\n },\n yAxis: {\n type: 'value',\n axisTick: {\n inside: true\n },\n splitLine: {\n show: false\n },\n axisLabel: {\n inside: true\n },\n z: 10\n },\n grid: {\n top: 110,\n left: 15,\n right: 15,\n height: 160\n },\n series: [\n {\n name: '模拟数据',\n type: 'line',\n smooth: true,\n symbol: 'circle',\n symbolSize: 5,\n sampling: 'average',\n itemStyle: {\n color: '#8ec6ad'\n },\n stack: 'a',\n areaStyle: {\n },\n data: data\n },\n {\n name: '模拟数据',\n type: 'line',\n smooth: true,\n stack: 'a',\n symbol: 'circle',\n symbolSize: 5,\n sampling: 'average',\n itemStyle: {\n color: '#d68262'\n },\n areaStyle: {\n },\n data: data2\n }\n\n ]\n};\n",
"name": "tooltip",
"title": "提示框",
"title-en": "Tooltip"
}
]
},
"axisPointer": {
"desc": "<p>This is the global configurations of axisPointer.</p>\n<hr>\n<p><code class=\"codespan\">axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1\" width=\"600\" height=\"450\"><iframe />\n\n\n<p>In the demo above, <a href=\"#axisPointer.link\">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>\n<p><code class=\"codespan\">axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=line-tooltip-touch&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=multiple-y-axis&edit=1&reset=1\" width=\"600\" height=\"300\"><iframe />\n\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=multiple-x-axis&edit=1&reset=1\" width=\"600\" height=\"300\"><iframe />\n\n\n\n<hr>\n<blockquote>\n<p><strong>Notice:</strong>\nGenerally, axisPointers is configured in each axes who need them (for example <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a>), or configured in <code class=\"codespan\">tooltip</code> (for example <a href=\"#tooltip.axisPointer\">tooltip.axisPointer</a>).</p>\n</blockquote>\n<blockquote>\n<p>But these configurations can only be configured in global axisPointer:\n<a href=\"#axisPointer.triggerOn\">axisPointer.triggerOn</a>, <a href=\"#axisPointer.link\">axisPointer.link</a>.</p>\n</blockquote>\n<hr>\n<hr>\n<p><strong>How to display axisPointer:</strong></p>\n<p>In <a href=\"#grid\">cartesian (grid)</a> and <a href=\"#single\">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>\n<p>Those axisPointer will not be displayed by default, utill configured as follows:</p>\n<ul>\n<li><p>Set <code class=\"codespan\">someAxis.axisPointer.show</code> (like <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.show</a>) as <code class=\"codespan\">true</code>. Then axisPointer of this axis will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.trigger\">tooltip.trigger</a> as <code class=\"codespan\">&#39;axis&#39;</code>, or set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as <code class=\"codespan\">&#39;cross&#39;</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code class=\"codespan\">axis.axisPointer</code> will override <code class=\"codespan\">tooltip.axisPointer</code> settings.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to display the label of axisPointer:</strong></p>\n<p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>\n<ul>\n<li><p>Set <code class=\"codespan\">someAxis.axisPointer.label.show</code> (for example <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.label.show</a>) as <code class=\"codespan\">true</code>. Then the label of the axisPointer will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as <code class=\"codespan\">&#39;cross&#39;</code>. Then the label of the crossed axisPointers will be displayed.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to configure axisPointer on touch device:</strong></p>\n<p>Set <code class=\"codespan\">someAxis.axisPointer.handle.show</code> (for example <a href=\"#xAxis.axisPointer.handle.show\">xAxis.axisPointer.handle.show</a> as <code class=\"codespan\">true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>\n<p><strong>Notice:</strong>\nIf tooltip does not work well in this case, try to set<a href=\"#tooltip.triggerOn\">tooltip.triggerOn</a> as <code class=\"codespan\">&#39;none&#39;</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href=\"#tooltip.alwaysShowContent\">tooltip.alwaysShowContent</a> as <code class=\"codespan\">true</code> (then tooltip will always be displayed).</p>\n<p>See the <a href=\"https://echarts.apache.org/next/examples/en/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n<hr>\n<p><strong>Snap to point</strong></p>\n<p>In value axis and time axis, if <a href=\"#xAxis.axisPointer.snap\">snap</a> is set as true, axisPointer will snap to point automatically.</p>\n<hr>\n<hr>\n",
"exampleBaseOptions": [
{
"code": "\nvar base = +new Date(2016, 9, 3);\nvar oneDay = 24 * 3600 * 1000;\nvar valueBase = Math.random() * 300;\nvar valueBase2 = Math.random() * 50;\nvar data = [];\nvar data2 = [];\n\nfor (var i = 1; i < 10; i++) {\n var now = new Date(base += oneDay);\n var dayStr = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-');\n\n valueBase = Math.round((Math.random() - 0.5) * 20 + valueBase);\n valueBase <= 0 && (valueBase = Math.random() * 300);\n data.push([dayStr, valueBase]);\n\n valueBase2 = Math.round((Math.random() - 0.5) * 20 + valueBase2);\n valueBase2 <= 0 && (valueBase2 = Math.random() * 50);\n data2.push([dayStr, valueBase2]);\n}\n\noption = {\n legend: {\n top: 'bottom',\n data: ['意向']\n },\n tooltip: {\n triggerOn: 'none',\n position: function (pt) {\n return [pt[0], 130];\n }\n },\n xAxis: {\n type: 'time',\n // boundaryGap: [0, 0],\n axisPointer: {\n value: '2016-10-7',\n snap: true,\n label: {\n show: true,\n formatter: function (params) {\n return echarts.format.formatTime('yyyy-MM-dd', params.value);\n }\n },\n handle: {\n show: true\n }\n },\n splitLine: {\n show: false\n }\n },\n yAxis: {\n type: 'value',\n axisTick: {\n inside: true\n },\n splitLine: {\n show: false\n },\n axisLabel: {\n inside: true,\n formatter: '{value}\\n'\n },\n z: 10\n },\n grid: {\n top: 110,\n left: 15,\n right: 15,\n height: 160\n },\n series: [\n {\n name: '模拟数据',\n type: 'line',\n smooth: true,\n symbol: 'circle',\n symbolSize: 5,\n sampling: 'lttb',\n itemStyle: {\n color: '#8ec6ad'\n },\n stack: 'a',\n areaStyle: {\n },\n data: data\n },\n {\n name: '模拟数据',\n type: 'line',\n smooth: true,\n stack: 'a',\n symbol: 'circle',\n symbolSize: 5,\n sampling: 'lttb',\n itemStyle: {\n color: '#d68262'\n },\n areaStyle: {\n },\n data: data2\n }\n\n ]\n};\n\n",
"name": "axis-pointer",
"title": "坐标轴指示器",
"title-en": "Axis Pointer"
}
]
},
"toolbox": {
"desc": "<p>A group of utility tools, which includes <a href=\"#toolbox.feature.saveAsImage\">export</a>, <a href=\"#toolbox.feature.dataView\">data view</a>, <a href=\"#toolbox.feature.magicType\">dynamic type switching</a>, <a href=\"#toolbox.feature.dataZoom\">data area zooming</a>, and <a href=\"#toolbox.feature.reset\">reset</a>.</p>\n<p><strong>Example: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=line-marker&reset=1&edit=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n",
"exampleBaseOptions": [
{
"code": "\noption = {\n toolbox: {\n show: true,\n feature: {\n dataZoom: {\n yAxisIndex: 'none'\n },\n dataView: {readOnly: false},\n magicType: {type: ['line', 'bar']},\n restore: {},\n saveAsImage: {}\n }\n },\n xAxis: {\n type: 'category',\n boundaryGap: false,\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {\n type: 'value',\n axisLabel: {\n formatter: '{value} °C'\n }\n },\n series: [\n {\n name: '最高气温',\n type: 'line',\n data: [11, 11, 15, 13, 12, 13, 10],\n markPoint: {\n data: [\n {type: 'max', name: 'Max'},\n {type: 'min', name: 'Min'}\n ]\n },\n markLine: {\n data: [\n {type: 'average', name: 'Avg'}\n ]\n }\n },\n {\n name: '最低气温',\n type: 'line',\n data: [1, -2, 2, 5, 3, 2, 0],\n markPoint: {\n data: [\n {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}\n ]\n },\n markLine: {\n data: [\n {type: 'average', name: 'Avg'},\n [{\n symbol: 'none',\n x: '90%',\n yAxis: 'max'\n }, {\n symbol: 'circle',\n label: {\n position: 'start',\n formatter: 'Max'\n },\n type: 'max',\n name: 'Top'\n }]\n ]\n }\n }\n ]\n};\n",
"title": "工具栏",
"title-en": "Toolbox"
}
]
},
"brush": {
"desc": "<p><code class=\"codespan\">brush</code> is an area-selecting component, with which user can select part of data from a chart to display in detail, or do calculations with them.</p>\n<p><br></p>\n<hr>\n<p><strong>Brush type and triggering button</strong></p>\n<p>Currently, supported <code class=\"codespan\">brush</code> types include: <code class=\"codespan\">scatter</code>, <code class=\"codespan\">bar</code>, <code class=\"codespan\">candlestick</code>. (Note that <code class=\"codespan\">parallel</code> contains brush function by itself, which is not provided by brush component.)</p>\n<p>Click the button in <code class=\"codespan\">toolbox</code> to enable operations like <em>area selecting</em>, or <em>canceling selecting</em>.</p>\n<p><br>\nExample of <code class=\"codespan\">horizontal brush</code>: (Click the button in <code class=\"codespan\">toolbox</code> to enable brushing.)</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=candlestick-brush&edit=1&reset=1\" width=\"800\" height=\"500\"><iframe />\n\n\n<p><br>\nExample of <code class=\"codespan\">brush</code> in <code class=\"codespan\">bar</code> charts:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=bar-brush&edit=1&reset=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n<p>Button for <code class=\"codespan\">brush</code> can be assigned in <a href=\"#toolbox.feature.brush.type\"><code class=\"codespan\">toolbox</code></a> or <a href=\"#brush.toolbox\"><code class=\"codespan\">brush</code> configuration</a>.</p>\n<p>The following types of brushes are supported: <code class=\"codespan\">rect</code>, <code class=\"codespan\">polygon</code>, <code class=\"codespan\">lineX</code>, <code class=\"codespan\">lineY</code>. See <a href=\"#brush.toolbox\">brush.toolbox</a> for more information.</p>\n<p><code class=\"codespan\">keep</code> button can be used to toggle a single or multiple selections.</p>\n<ul>\n<li>Only one select box is available in single selection mode, and the select-box can be removed by clicking on the blank area.</li>\n<li>Multiple select boxes are available in multiple selection mode, and the select-boxes cannot be removed by click on the blank area. Instead, you need to click the <em>clear</em> button.</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>Relationship between brush-selecting and coordinates</strong></p>\n<p><code class=\"codespan\">brush</code> can be set to be <em>global</em>, or <em>belonging to a particular coordinate</em>.</p>\n<p><strong>Global brushes</strong></p>\n<p>Selecting is enabled for everywhere in ECharts&#39;s instance in this case. This is the default situation, when brush is not set to be global.</p>\n<p><strong>Coordinate brushes</strong></p>\n<p>Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see <code class=\"codespan\">roam</code> and <code class=\"codespan\">dataZoom</code>).</p>\n<p>In practice, you may often find coordinate brush to be a more frequently made choice, particularly in <code class=\"codespan\">geo</code> charts.</p>\n<p>By assigning <a href=\"#brush.geoIndex\">brush.geoIndex</a>, or <a href=\"#brush.xAxisIndex\">brush.xAxisIndex</a>, or <a href=\"#brush.yAxisIndex\">brush.yAxisIndex</a>, brush selecting axes can be assigned, whose value can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;all&#39;</code>: for all axes;</li>\n<li><code class=\"codespan\">number</code>: like <code class=\"codespan\">0</code>, for a particular coordinate with that index;</li>\n<li><code class=\"codespan\">Array</code>: like <code class=\"codespan\">[0, 4, 2]</code>, for coordinates with those indexes;</li>\n<li><code class=\"codespan\">&#39;none&#39;</code>, or <code class=\"codespan\">null</code>, or <code class=\"codespan\">undefined</code>: for not assigning.</li>\n</ul>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n geo: {\n ...\n },\n brush: {\n geoIndex: &#39;all&#39;, // brush selecting is enabled only in all geo charts above\n ...\n }\n};\n</code></pre>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n grid: [\n {...}, // grid 0\n {...} // grid 1\n ],\n xAxis: [\n {gridIndex: 1, ...}, // xAxis 0 for grid 1\n {gridIndex: 0, ...} // xAxis 1 for grid 0\n ],\n yAxis: [\n {gridIndex: 1, ...}, // yAxis 0 for grid 1\n {gridIndex: 0, ...} // yAxis 1 for grid 0\n ],\n brush: {\n xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`\n ...\n }\n};\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>Control select-box with API</strong></p>\n<p><code class=\"codespan\">dispatchAction</code> can be used to render select-box programatically. For example:</p>\n<pre><code class=\"lang-javascript\">myChart.dispatchAction({\n type: &#39;brush&#39;,\n areas: [\n {\n geoIndex: 0,\n // Assign select-box type\n brushType: &#39;polygon&#39;,\n // Assign select-box shape\n coordRange: [[119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77]]\n }\n ]\n});\n</code></pre>\n<p>Please refer to <a href=\"api.html#action.brush\" target=\"_blank\">action.brush</a> for more information.</p>\n<p><br></p>\n<hr>\n<p><strong>brushLink</strong></p>\n<p>Links interaction between selected items in different series.</p>\n<p>Following is an example of enabling selected effect for <code class=\"codespan\">scatter</code> and <code class=\"codespan\">parallel</code> charts once a scatter chart is selected.</p>\n<p><code class=\"codespan\">brushLink</code> is an array of <code class=\"codespan\">seriesIndex</code>es, which assignes the series that can be interacted. For example, it can be:</p>\n<ul>\n<li><code class=\"codespan\">[3, 4, 5]</code> for interacting series with seriesIndex as <code class=\"codespan\">3</code>, <code class=\"codespan\">4</code>, or <code class=\"codespan\">5</code>;</li>\n<li><code class=\"codespan\">&#39;all&#39;</code> for interacting all series;</li>\n<li><code class=\"codespan\">&#39;none&#39;</code>, or <code class=\"codespan\">null</code>, or <code class=\"codespan\">undefined</code> for disabling <code class=\"codespan\">brushLink</code>.</li>\n</ul>\n<p><strong>Attention</strong></p>\n<p><code class=\"codespan\">brushLink</code> is a mapping of <code class=\"codespan\">dataIndex</code>. So <strong><code class=\"codespan\">data</code> of every series with <code class=\"codespan\">brushLink</code> should be guaranteed to correspond to the other</strong>.</p>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n brush: {\n brushLink: [0, 1]\n },\n series: [\n {\n type: &#39;bar&#39;\n data: [232, 4434, 545, 654] // data has 4 items\n },\n {\n type: &#39;parallel&#39;,\n data: [[4, 5], [3, 5], [66, 33], [99, 66]] // data also has 4 items, which correspond to the data above\n }\n ]\n};\n</code></pre>\n<p>Please refer to <a href=\"#brush.brushLink\">brush.brushLink</a>.</p>\n<p><br></p>\n<hr>\n<p><strong>throttle / debounce</strong></p>\n<p>By default, <code class=\"codespan\">brushSelected</code> is always triggered when selection-box is selected or moved, to tell the outside about the event.</p>\n<p>But efficiency problems may occur when events are triggered too frequently, or the animation result may be affected. So brush components provides <a href=\"#brush.throttleType\">brush.throttleType</a> and <a href=\"#brush.throttleDelay\">brush.throttleDelay</a> to solve this problem.</p>\n<p>Valid <code class=\"codespan\">throttleType</code> values can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;debounce&#39;</code>: for triggering events only when the action has been stopped (no action after some duration). Time threshold can be assigned with <a href=\"#brush.throttleDelay\">brush.throttleDelay</a>;</li>\n<li><code class=\"codespan\">&#39;fixRate&#39;</code>: for triggering event with a certain frequency. The frequency can be assigned with <a href=\"#brush.throttleDelay\">brush.throttleDelay</a>.</li>\n</ul>\n<p>In this <a href=\"https://echarts.apache.org/next/examples/en/view.html?c=scatter-map-brush&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>, <code class=\"codespan\">debounce</code> is used to make sure the bar chart is updated only when the user has stopped action. In other cases, the animation result may not be so good.</p>\n<p><br></p>\n<hr>\n<p><strong>Visual configurations of selected and unselected items</strong></p>\n<p>Refer to <a href=\"#brush.inBrush\">brush.inBrush</a> and <a href=\"#brush.outOfBrush\">brush.outOfBrush</a>.</p>\n<p><br></p>\n<hr>\n<p>Here is the configuration in detail.</p>\n"
},
"geo": {
"desc": "<p>Geographic coorinate system component.</p>\n<p>Geographic coorinate system component is used to draw maps, which also supports <a href=\"#series-scatter\">scatter series</a>, and <a href=\"#series-lines\">line series</a>.</p>\n<p>From <code class=\"codespan\">3.1.10</code>, geo component also supports mouse events, whose parameters are:</p>\n<pre><code class=\"lang-js\">{\n componentType: &#39;geo&#39;,\n // geo component&#39;s index in option\n geoIndex: number,\n // name of clicking area, e.g., Shanghai\n name: string,\n // clicking region object as input, see geo.regions\n region: Object\n}\n</code></pre>\n<p><strong>Tip:</strong>\nThe region color can also be controlled by map series. See <a href=\"#series-map.geoIndex\">series-map.geoIndex</a>.</p>\n"
},
"parallel": {
"desc": "<p><br></p>\n<hr>\n<p><strong>Introduction about Parallel coordinates</strong></p>\n<p><a href=\"https://en.wikipedia.org/wiki/Parallel_coordinates\" target=\"_blank\">Parallel Coordinates</a> is a common way of visualizing high-dimensional geometry and analyzing multivariate data.</p>\n<p>For example, <a href=\"#series-parallel.data\">series-parallel.data</a> is the following data:</p>\n<pre><code class=\"lang-javascript\">[\n [1, 55, 9, 56, 0.46, 18, 6, &#39;good&#39;],\n [2, 25, 11, 21, 0.65, 34, 9, &#39;excellent&#39;],\n [3, 56, 7, 63, 0.3, 14, 5, &#39;good&#39;],\n [4, 33, 7, 29, 0.33, 16, 6, &#39;excellent&#39;],\n { // Data item can also be an Object, so that perticular settings of its line can be set here.\n value: [5, 42, 24, 44, 0.76, 40, 16, &#39;excellent&#39;]\n lineStyle: {...},\n }\n ...\n]\n</code></pre>\n<p>In data above, each row is a &quot;data item&quot;, and each column represents a &quot;dimension&quot;. For example, the meanings of columns above are: &quot;data&quot;, &quot;AQI&quot;, &quot;PM2.5&quot;, &quot;PM10&quot;, &quot;carbon monoxide level&quot;, &quot;nitrogen dioxide level&quot;, and &quot;sulfur dioxide level&quot;.</p>\n<p>Parallel coordinates are often used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=doc-example/parallel-all&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<hr>\n<p><strong>Brief about Configuration</strong></p>\n<p>Basic configuration parallel coordinates is shown as follow:</p>\n<pre><code class=\"lang-javascript\">option = {\n parallelAxis: [ // Definitions of axes.\n {dim: 0, name: schema[0].text}, // Each axis has a &#39;dim&#39; attribute, representing dimension index in data.\n {dim: 1, name: schema[1].text},\n {dim: 2, name: schema[2].text},\n {dim: 3, name: schema[3].text},\n {dim: 4, name: schema[4].text},\n {dim: 5, name: schema[5].text},\n {dim: 6, name: schema[6].text},\n {dim: 7, name: schema[7].text,\n type: &#39;category&#39;, // Also supports category data.\n data: [&#39;Excellent&#39;, &#39;good&#39;, &#39;light pollution&#39;, &#39;moderate pollution&#39;, &#39;heavy pollution&#39;, &#39;severe pollution&#39;]\n }\n ],\n parallel: { // Definition of a parallel coordinate system.\n left: &#39;5%&#39;, // Location of parallel coordinate system.\n right: &#39;13%&#39;,\n bottom: &#39;10%&#39;,\n top: &#39;20%&#39;,\n parallelAxisDefault: { // A pattern for axis definition, which can avoid repeating in `parallelAxis`.\n type: &#39;value&#39;,\n nameLocation: &#39;end&#39;,\n nameGap: 20\n }\n },\n series: [ // Here the three series sharing the same parallel coordinate system.\n {\n name: &#39;Beijing&#39;,\n type: &#39;parallel&#39;, // The type of this series is &#39;parallel&#39;\n data: [\n [1, 55, 9, 56, 0.46, 18, 6, &#39;good&#39;],\n [2, 25, 11, 21, 0.65, 34, 9, &#39;excellent&#39;],\n ...\n ]\n },\n {\n name: &#39;Shanghai&#39;,\n type: &#39;parallel&#39;,\n data: [\n [3, 56, 7, 63, 0.3, 14, 5, &#39;good&#39;],\n [4, 33, 7, 29, 0.33, 16, 6, &#39;excellent&#39;],\n ...\n ]\n },\n {\n name: &#39;Guangzhou&#39;,\n type: &#39;parallel&#39;,\n data: [\n [4, 33, 7, 29, 0.33, 16, 6, &#39;excellent&#39;],\n [5, 42, 24, 44, 0.76, 40, 16, &#39;excellent&#39;],\n ...\n ]\n }\n ]\n};\n</code></pre>\n<p>Three components are involved here: <a href=\"#parallel\">parallel</a>, <a href=\"#parallelAxis\">parallelAxis</a>, <a href=\"#series-parallel\">series-parallel</a></p>\n<ul>\n<li><p><a href=\"#parallel\">parallel</a></p>\n<p> This component is the coordinate system. One or more series (like &quot;Beijing&quot;, &quot;Shanghai&quot;, and &quot;Guangzhou&quot; in the above example) can share one coordinate system.</p>\n<p> Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.</p>\n<p> Position setting is also carried out here.</p>\n</li>\n<li><p><a href=\"#parallelAxis\">parallelAxis</a></p>\n<p> This is axis configuration. Multiple axes are needed in parallel coordinates.</p>\n<p> <a href=\"#parallelAxis.parallelIndex\">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n<li><p><a href=\"#series-parallel\">series-parallel</a></p>\n<p> This is the definition of parallel series, which will be drawn on parallel coordinate system.</p>\n<p> <a href=\"#parallelAxis.parallelIndex\">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>Notes and Best Practices</strong></p>\n<p>When configuring multiple <a href=\"#parallelAxis\">parallelAxis</a>, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a>. Before initializing axis, configurations in <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a> will be merged into <a href=\"#parallelAxis\">parallelAxis</a> to generate the final axis configuration.</p>\n<p><strong>If data is too large and cause bad performance</strong></p>\n<p>It is suggested to set <a href=\"#series-parallel.lineStyle.width\">series-parallel.lineStyle.width</a> to be <code class=\"codespan\">0.5</code> (or less), which may improve performance significantly.</p>\n<p><br></p>\n<hr>\n<p><strong>Display High-Dimension Data</strong></p>\n<p>When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.</p>\n<p>In this case, you may use <a href=\"#parallel.axisExpandable\">parallel.axisExpandable</a> to improve the display. See this example:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=map-parallel-prices&edit=1&reset=1\" width=\"600\" height=\"460\"><iframe />\n\n\n\n\n\n\n\n\n\n\n<p><br>\n<br></p>\n",
"exampleBaseOptions": [
{
"code": "\nconst dataBJ = [\n [1,55,9,56,0.46,18,6,\"良\"],\n [2,25,11,21,0.65,34,9,\"优\"],\n [3,56,7,63,0.3,14,5,\"良\"],\n [4,33,7,29,0.33,16,6,\"优\"],\n [5,42,24,44,0.76,40,16,\"优\"],\n [6,82,58,90,1.77,68,33,\"良\"],\n [7,74,49,77,1.46,48,27,\"良\"],\n [8,78,55,80,1.29,59,29,\"良\"],\n [9,267,216,280,4.8,108,64,\"重度污染\"],\n [10,185,127,216,2.52,61,27,\"中度污染\"],\n [11,39,19,38,0.57,31,15,\"优\"],\n [12,41,11,40,0.43,21,7,\"优\"],\n [13,64,38,74,1.04,46,22,\"良\"],\n [14,108,79,120,1.7,75,41,\"轻度污染\"],\n [15,108,63,116,1.48,44,26,\"轻度污染\"],\n [16,33,6,29,0.34,13,5,\"优\"],\n [17,94,66,110,1.54,62,31,\"良\"],\n [18,186,142,192,3.88,93,79,\"中度污染\"],\n [19,57,31,54,0.96,32,14,\"良\"],\n [20,22,8,17,0.48,23,10,\"优\"],\n [21,39,15,36,0.61,29,13,\"优\"],\n [22,94,69,114,2.08,73,39,\"良\"],\n [23,99,73,110,2.43,76,48,\"良\"],\n [24,31,12,30,0.5,32,16,\"优\"],\n [25,42,27,43,1,53,22,\"优\"],\n [26,154,117,157,3.05,92,58,\"中度污染\"],\n [27,234,185,230,4.09,123,69,\"重度污染\"],\n [28,160,120,186,2.77,91,50,\"中度污染\"],\n [29,134,96,165,2.76,83,41,\"轻度污染\"],\n [30,52,24,60,1.03,50,21,\"良\"],\n [31,46,5,49,0.28,10,6,\"优\"]\n];\n\nconst dataGZ = [\n [1,26,37,27,1.163,27,13,\"优\"],\n [2,85,62,71,1.195,60,8,\"良\"],\n [3,78,38,74,1.363,37,7,\"良\"],\n [4,21,21,36,0.634,40,9,\"优\"],\n [5,41,42,46,0.915,81,13,\"优\"],\n [6,56,52,69,1.067,92,16,\"良\"],\n [7,64,30,28,0.924,51,2,\"良\"],\n [8,55,48,74,1.236,75,26,\"良\"],\n [9,76,85,113,1.237,114,27,\"良\"],\n [10,91,81,104,1.041,56,40,\"良\"],\n [11,84,39,60,0.964,25,11,\"良\"],\n [12,64,51,101,0.862,58,23,\"良\"],\n [13,70,69,120,1.198,65,36,\"良\"],\n [14,77,105,178,2.549,64,16,\"良\"],\n [15,109,68,87,0.996,74,29,\"轻度污染\"],\n [16,73,68,97,0.905,51,34,\"良\"],\n [17,54,27,47,0.592,53,12,\"良\"],\n [18,51,61,97,0.811,65,19,\"良\"],\n [19,91,71,121,1.374,43,18,\"良\"],\n [20,73,102,182,2.787,44,19,\"良\"],\n [21,73,50,76,0.717,31,20,\"良\"],\n [22,84,94,140,2.238,68,18,\"良\"],\n [23,93,77,104,1.165,53,7,\"良\"],\n [24,99,130,227,3.97,55,15,\"良\"],\n [25,146,84,139,1.094,40,17,\"轻度污染\"],\n [26,113,108,137,1.481,48,15,\"轻度污染\"],\n [27,81,48,62,1.619,26,3,\"良\"],\n [28,56,48,68,1.336,37,9,\"良\"],\n [29,82,92,174,3.29,0,13,\"良\"],\n [30,106,116,188,3.628,101,16,\"轻度污染\"],\n [31,118,50,0,1.383,76,11,\"轻度污染\"]\n];\n\nconst dataSH = [\n [1,91,45,125,0.82,34,23,\"良\"],\n [2,65,27,78,0.86,45,29,\"良\"],\n [3,83,60,84,1.09,73,27,\"良\"],\n [4,109,81,121,1.28,68,51,\"轻度污染\"],\n [5,106,77,114,1.07,55,51,\"轻度污染\"],\n [6,109,81,121,1.28,68,51,\"轻度污染\"],\n [7,106,77,114,1.07,55,51,\"轻度污染\"],\n [8,89,65,78,0.86,51,26,\"良\"],\n [9,53,33,47,0.64,50,17,\"良\"],\n [10,80,55,80,1.01,75,24,\"良\"],\n [11,117,81,124,1.03,45,24,\"轻度污染\"],\n [12,99,71,142,1.1,62,42,\"良\"],\n [13,95,69,130,1.28,74,50,\"良\"],\n [14,116,87,131,1.47,84,40,\"轻度污染\"],\n [15,108,80,121,1.3,85,37,\"轻度污染\"],\n [16,134,83,167,1.16,57,43,\"轻度污染\"],\n [17,79,43,107,1.05,59,37,\"良\"],\n [18,71,46,89,0.86,64,25,\"良\"],\n [19,97,71,113,1.17,88,31,\"良\"],\n [20,84,57,91,0.85,55,31,\"良\"],\n [21,87,63,101,0.9,56,41,\"良\"],\n [22,104,77,119,1.09,73,48,\"轻度污染\"],\n [23,87,62,100,1,72,28,\"良\"],\n [24,168,128,172,1.49,97,56,\"中度污染\"],\n [25,65,45,51,0.74,39,17,\"良\"],\n [26,39,24,38,0.61,47,17,\"优\"],\n [27,39,24,39,0.59,50,19,\"优\"],\n [28,93,68,96,1.05,79,29,\"良\"],\n [29,188,143,197,1.66,99,51,\"中度污染\"],\n [30,174,131,174,1.55,108,50,\"中度污染\"],\n [31,187,143,201,1.39,89,53,\"中度污染\"]\n];\n\nconst schema = [\n {name: 'date', index: 0, text: '日期'},\n {name: 'AQIindex', index: 1, text: 'AQI'},\n {name: 'PM25', index: 2, text: 'PM2.5'},\n {name: 'PM10', index: 3, text: 'PM10'},\n {name: 'CO', index: 4, text: ' CO'},\n {name: 'NO2', index: 5, text: 'NO2'},\n {name: 'SO2', index: 6, text: 'SO2'},\n {name: '等级', index: 7, text: '等级'}\n];\n\nconst option = {\n color: [\n '#c23531', '#91c7ae', '#dd8668'\n ],\n legend: {\n top: 10,\n data: ['北京', '上海', '广州'],\n itemGap: 20\n },\n parallelAxis: [\n {dim: 0, name: schema[0].text, inverse: true, max: 31, nameLocation: 'start'},\n {dim: 1, name: schema[1].text},\n {dim: 2, name: schema[2].text},\n {dim: 3, name: schema[3].text},\n {dim: 4, name: schema[4].text},\n {dim: 5, name: schema[5].text},\n {dim: 6, name: schema[6].text},\n {dim: 7, name: schema[7].text,\n type: 'category', data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']}\n ],\n parallel: {\n left: '5%',\n right: '13%',\n bottom: '10%',\n top: '20%',\n parallelAxisDefault: {\n type: 'value',\n name: 'AQI指数',\n nameLocation: 'end',\n nameGap: 20,\n nameTextStyle: {\n fontSize: 12\n }\n }\n },\n series: [\n {\n name: '北京',\n type: 'parallel',\n data: dataBJ\n },\n {\n name: '上海',\n type: 'parallel',\n data: dataSH\n },\n {\n name: '广州',\n type: 'parallel',\n data: dataGZ\n }\n ]\n};\n",
"name": "parallel",
"title": "平行坐标",
"title-en": "Parallel"
},
{
"code": "\n\nvar geoCoordMap = {\n \"Amsterdam\": [4.895168,52.370216],\n \"Athens\": [-83.357567,33.951935],\n \"Auckland\": [174.763332,-36.84846],\n \"Bangkok\": [100.501765,13.756331],\n \"Barcelona\": [2.173403,41.385064],\n \"Beijing\": [116.407395,39.904211],\n \"Berlin\": [13.404954,52.520007],\n \"Bogotá\": [-74.072092,4.710989],\n \"Bratislava\": [17.107748,48.148596],\n \"Brussels\": [4.35171,50.85034],\n \"Budapest\": [19.040235,47.497912],\n \"Buenos Aires\": [-58.381559,-34.603684],\n \"Bucharest\": [26.102538,44.426767],\n \"Caracas\": [-66.903606,10.480594],\n \"Chicago\": [-87.629798,41.878114],\n \"Delhi\": [77.209021,28.613939],\n \"Doha\": [51.53104,25.285447],\n \"Dubai\": [55.270783,25.204849],\n \"Dublin\": [-6.26031,53.349805],\n \"Frankfurt\": [8.682127,50.110922],\n \"Geneva\": [6.143158,46.204391],\n \"Helsinki\": [24.938379,60.169856],\n \"Hong Kong\": [114.109497,22.396428],\n \"Istanbul\": [28.978359,41.008238],\n \"Jakarta\": [106.845599,-6.208763],\n \"Johannesburg\": [28.047305,-26.204103],\n \"Cairo\": [31.235712,30.04442],\n \"Kiev\": [30.5234,50.4501],\n \"Copenhagen\": [12.568337,55.676097],\n \"Kuala Lumpur\": [101.686855,3.139003],\n \"Lima\": [-77.042793,-12.046374],\n \"Lisbon\": [-9.139337,38.722252],\n \"Ljubljana\": [14.505751,46.056947],\n \"London\": [-0.127758,51.507351],\n \"Los Angeles\": [-118.243685,34.052234],\n \"Luxembourg\": [6.129583,49.815273],\n \"Lyon\": [4.835659,45.764043],\n \"Madrid\": [-3.70379,40.416775],\n \"Milan\": [9.185924,45.465422],\n \"Manama\": [50.58605,26.228516],\n \"Manila\": [120.984219,14.599512],\n \"Mexico City\": [-99.133208,19.432608],\n \"Miami\": [-80.19179,25.76168],\n \"Montreal\": [-73.567256,45.501689],\n \"Moscow\": [37.6173,55.755826],\n \"Mumbai\": [72.877656,19.075984],\n \"Munich\": [11.581981,48.135125],\n \"Nairobi\": [36.821946,-1.292066],\n \"New York\": [-74.005941,40.712784],\n \"Nicosia\": [33.382276,35.185566],\n \"Oslo\": [10.752245,59.913869],\n \"Paris\": [2.352222,48.856614],\n \"Prague\": [14.4378,50.075538],\n \"Riga\": [24.105186,56.949649],\n \"Rio de Janeiro\": [-43.172896,-22.906847],\n \"Rome\": [12.496366,41.902783],\n \"Santiago de Chile\": [-70.669265,-33.44889],\n \"São Paulo\": [-46.633309,-23.55052],\n \"Seoul\": [126.977969,37.566535],\n \"Shanghai\": [121.473701,31.230416],\n \"Singapore\": [103.819836,1.352083],\n \"Sofia\": [23.321868,42.697708],\n \"Stockholm\": [18.068581,59.329323],\n \"Sydney\": [151.209296,-33.86882],\n \"Taipei\": [121.565418,25.032969],\n \"Tallinn\": [24.753575,59.436961],\n \"Tel Aviv\": [34.781768,32.0853],\n \"Tokyo\": [139.691706,35.689487],\n \"Toronto\": [-79.383184,43.653226],\n \"Vilnius\": [25.279651,54.687156],\n \"Warsaw\": [21.012229,52.229676],\n \"Vienna\": [16.373819,48.208174],\n \"Zurich\": [8.541694,47.376887]\n};\n\nvar schema = [\n \"Cities\",\n \"Gross purchasing power\",\n \"Net purchasing power\",\n \"Prices (excl. rent)\",\n \"Prices (incl. rent)\",\n \"Gross wages\",\n \"Net wages\",\n \"Working time [hours per year]\",\n \"Vacation [paid working days per year]\",\n \"Time required for 1 Big Mac [minutes]\",\n \"Time required for 1 kg of bread [minutes]\",\n \"Time required for 1 kg of rice [minutes]\",\n \"Time required for 1 iPhone 4S, 16 GB [hours]\",\n \"City break\",\n \"Inflation 2006\",\n \"Inflation 2007\",\n \"Inflation 2008\",\n \"Inflation 2009\",\n \"Inflation 2010\",\n \"Inflation 2011\",\n \"Prices (incl. rent)\",\n \"Food basket\",\n \"Services\",\n \"Normal local rent medium [USD per month]\",\n \"Household appliances\",\n \"Bus or tram or underground\",\n \"Train\",\n \"Taxi [USD per 5 km trip]\",\n \"Medium-sized cars price\",\n \"Medium-sized cars tax\",\n \"Medium-sized cars gas\",\n \"Restaurant [USD per dinner]\",\n \"Hotel *** [USD per night]\",\n \"Hotel ***** [USD per night]\",\n \"Women's medium clothing\",\n \"Men's medium clothing\",\n \"Furnished medium 4-room apartment [USD per month]\",\n \"Unfurnished medium 3-room apartment [USD per month]\",\n \"Net hourly wages [USD per hour]\",\n \"Gross hourly wages [USD per hour]\",\n \"Taxes and social security contributions\",\n \"Primary school teacher [USD per year]\",\n \"Bus driver [USD per year]\",\n \"Automobile mechanic [USD per year]\",\n \"Building labourer [USD per year]\",\n \"Skilled industrial worker [USD per year]\",\n \"Cook [USD per year]\",\n \"Departement head [USD per year]\",\n \"Product manager [USD per year]\",\n \"Engineer [USD per year]\",\n \"Bank credit clerk [USD per year]\",\n \"Secretary [USD per year]\",\n \"Saleswoman [USD per year]\",\n \"Female industrial worker [USD per year]\",\n \"Female call center worker [USD per year]\",\n \"Financial analyst [USD per year]\",\n \"Financial analyst [USD pro Jahr]\"\n];\n\nvar rawData = [\n [\"Amsterdam\",101.6,90.1,77.1,69.1,78.3,69.4,1755,24,15,7,9,44,720,1.651,1.59,2.205,0.974,0.93,2.477,67.4,364,690,1113,4960,3.19,30.05,16.34,24000,689,1.8,50,200,390,690,1040,2331,1580,17.5,25.5,30,48400,39200,26300,30200,55400,39800,104400,58700,64600,49200,40300,31100,40300,27700,66700,66700 ],\n [\"Athens\",62.6,60.5,66.2,58.2,41.4,40,1822,22,29,13,25,86,590,3.314,2.991,4.236,1.349,4.701,3.1,56.8,390,580,880,4620,1.81,13.81,5.5,24900,389,2.02,54,100,210,630,1110,1489,647,10.1,13.5,24,26200,23300,18500,17100,24500,24200,57200,44000,34100,30700,21000,17700,15400,16300,34400,34400 ],\n [\"Auckland\",77.9,82.9,76.7,67.8,59.8,63.5,1852,20,15,16,7,51,580,3.362,2.377,3.959,2.116,2.303,4.027,66.1,496,630,1023,4450,2.57,40.86,13.62,23900,226,1.33,45,190,280,560,670,1644,1333,16,19.5,17,35700,31500,36500,28500,41800,31100,61300,55000,56300,37300,33400,26900,27200,27500,64900,64900 ],\n [\"Bangkok\",26.4,31.4,55.4,48.2,14.6,17.4,2312,7,36,25,20,165,550,4.637,2.242,5.468,-0.845,3.272,3.807,47,422,440,414,4370,0.75,3.47,2.47,29600,103,1,56,90,320,400,600,1463,932,4.4,4.8,5,8300,8400,11100,3000,10900,10900,32200,22400,24600,14500,7800,6000,5800,6500,19400,19400 ],\n [\"Barcelona\",79.7,78.6,74.7,65.6,59.6,58.7,1760,29,18,11,6,52,740,3.563,2.844,4.13,-0.238,2.043,3.052,64,393,750,984,5000,2.59,41.96,10.36,26900,177,1.77,51,170,330,580,1110,1269,1087,14.8,19.4,23,41300,34100,29100,29800,31500,32100,40800,67000,43100,38900,28900,25500,25000,28000,58300,58300 ],\n [\"Beijing\",28.2,29.9,60.3,51.8,17,18,1979,9,34,27,16,184,730,1.467,4.767,5.852,-0.683,3.325,5.417,50.6,463,420,310,4370,0.26,14.25,3.64,23800,67,1.24,41,160,400,660,700,1554,660,4.5,5.6,17,11400,7000,8500,7600,6200,11900,13300,11700,10700,18300,17100,8900,5400,7600,19800,19800 ],\n [\"Berlin\",109.7,97.1,72.2,64.1,79.2,70.1,1742,28,16,11,9,56,720,1.784,2.276,2.754,0.234,1.15,2.483,62.5,389,530,841,4670,2.98,80.3,10.79,35600,246,2.1,34,120,230,570,710,2395,1178,17.7,25.8,30,56900,38600,35500,28500,47400,57600,84200,74500,72100,51700,38100,28200,32000,28100,81700,81700 ],\n [\"Bogotá\",41.4,40.7,53.1,47,22.3,22,1981,15,52,34,17,142,540,4.296,5.544,6.998,4.202,2.27,3.416,45.8,363,410,634,4170,0.84,null,2.81,20200,303,1.24,25,140,300,310,440,1554,841,5.5,7.3,12,11100,7600,8400,7000,7300,11900,27600,65800,19700,14600,12300,7400,4100,5300,31900,31900 ],\n [\"Bratislava\",51.3,50.7,53.9,47.1,27.7,27.3,1884,23,31,20,19,126,490,4.264,1.89,3.935,0.925,0.697,4.079,45.9,344,330,414,4740,1.08,22.97,5.61,26700,65,1.93,28,120,230,250,340,1683,841,6.9,9,22,11300,14100,11300,10000,16300,18900,20300,43300,22800,15800,16100,9600,12600,16400,48300,48300 ],\n [\"Brussels\",107.5,78.5,75.8,68.8,81.5,59.5,1729,20,19,10,11,54,730,2.337,1.814,4.493,-0.009,2.332,3.469,67.1,433,690,1243,4580,2.42,26.03,15.71,23200,500,1.91,63,130,280,630,800,2538,1839,15,26.5,42,44000,36500,38200,34200,52100,43600,97000,73700,67100,56900,42300,35200,33500,36000,78200,78200 ],\n [\"Budapest\",35.5,32,56.7,50.4,20.1,18.1,1912,22,49,13,26,206,740,3.878,7.934,6.067,4.209,4.85,3.9,49.1,340,390,556,5270,1.43,15.96,7.64,22600,76,1.95,28,130,410,580,920,2123,1165,4.6,6.6,28,8900,11500,9300,7000,10900,16800,25600,21100,23300,21400,11100,8200,6500,8900,29300,29300 ],\n [\"Buenos Aires\",42.9,46.2,55,47.7,23.6,25.4,1830,13,45,12,16,187,620,10.898,8.83,8.585,6.27,10.461,9.775,46.5,310,380,401,5170,0.28,null,7.97,20200,307,1.27,25,160,280,400,660,1359,738,6.4,7.7,16,8700,16300,11900,10200,11400,15800,34300,17600,19200,17100,15800,14600,7500,10400,15400,15400 ],\n [\"Bucharest\",37.1,34,39.8,34.8,14.8,13.5,1836,26,57,21,26,230,370,6.552,4.84,7.848,5.581,6.101,5.812,33.9,244,270,388,3830,0.75,9.43,3.17,11700,36,1.9,25,100,190,180,300,984,530,3.4,4.8,29,5600,7500,9500,7900,7400,14900,13900,22000,11400,8800,6000,8200,5800,5300,13200,13200 ],\n [\"Caracas\",21.9,25.7,91.1,85.4,20,23.4,1878,17,80,59,13,272,830,13.654,18.703,30.37,27.081,28.187,26.09,83.3,689,690,2098,8460,0.35,null,11.65,49000,18,0.01,68,190,400,520,950,3820,2784,5.9,6.5,7,10500,5400,10900,6100,9700,25400,16800,30600,22800,15800,8400,9500,5400,6700,12400,12400 ],\n [\"Chicago\",105.3,101.9,79.1,72.9,83.3,80.6,1853,12,11,15,9,32,540,3.222,2.86,3.798,-0.321,1.641,3.142,71.1,460,780,1398,4270,2.25,34.99,12.5,22100,95,1.11,38,200,270,740,1200,3535,2214,20.3,27.1,25,49300,52100,44000,49000,58500,48300,79300,88500,88200,40300,42600,23200,33800,38700,103500,103500 ],\n [\"Delhi\",23,25,33.2,29.5,7.6,8.3,2264,13,65,15,40,370,370,6.177,6.372,8.349,10.882,11.99,8.628,28.8,208,210,466,4590,0.25,10.58,1.95,15300,93,0.77,18,100,250,260,410,867,556,2.1,2.5,11,4500,2500,1900,1300,4800,10200,13500,11100,9600,6700,5400,3000,1800,4000,14100,14100 ],\n [\"Doha\",38.8,50.2,68.6,66.9,26.6,34.4,2165,25,20,12,15,82,690,11.828,13.764,15.049,-4.865,-2.433,2,65.3,355,870,1735,3790,1.14,null,4.12,17000,27,0.24,63,200,360,340,470,4869,3004,8.7,8.7,0,22300,10400,9800,4100,20600,13700,49500,47000,32900,27100,19800,10900,3200,11500,23100,23100 ],\n [\"Dubai\",63.5,82,78.2,77.2,49.6,64.2,2095,24,11,10,14,46,1120,9.272,11.115,11.454,1.56,0.878,0.882,75.3,484,790,2447,4550,0.54,null,8.17,23100,94,1.01,95,200,680,1270,1450,4882,3483,16.2,16.2,0,35900,16300,14200,3600,38300,58100,116800,91400,64800,26200,22900,13600,9800,19600,80000,80000 ],\n [\"Dublin\",101.9,103.3,76.3,69.7,77.7,78.8,1707,21,14,7,10,39,580,2.7,2.873,3.108,-1.683,-1.557,1.139,68,454,720,1554,5160,2.74,34.53,14.89,32000,427,2.01,55,130,260,470,600,2331,1592,19.8,25.3,20,57100,45500,38300,28200,42600,42100,88800,86100,54300,45800,31700,25300,28200,28800,85000,85000 ],\n [\"Frankfurt\",102.2,90.5,86.3,77.2,88.2,78.1,1731,28,14,8,10,42,950,1.784,2.276,2.754,0.234,1.15,2.483,75.3,439,710,1282,5510,3.24,86.77,16.23,36800,78,1.89,68,130,370,840,890,2370,1644,19.7,28.7,30,60900,33300,40400,34100,48800,40000,83300,77700,77700,61600,50600,37900,34100,29100,104100,104100 ],\n [\"Geneva\",116,111.8,106.6,96.8,123.6,119.2,1893,20,14,6,7,24,1220,1.047,0.732,2.43,-0.476,0.685,0.228,94.5,714,1080,1567,5330,3.67,58.23,27.78,25200,135,2.04,99,270,620,850,1150,4701,2434,30,40.2,24,89600,77400,61900,58900,78400,76500,105800,113300,89400,110900,64900,49200,55400,61800,171100,171100 ],\n [\"Helsinki\",93,86,86.5,82.3,80.2,74.2,1712,28,16,13,6,44,960,1.279,1.584,3.9,1.635,1.686,3.323,80.3,497,840,1437,5400,3.28,34.83,12.71,34600,152,1.97,44,200,450,610,1200,8677,1437,18.7,26.1,27,48000,42200,38200,38700,40500,41200,89900,60500,69200,44700,38600,34600,33500,35600,74500,74500 ],\n [\"Hong Kong\",58.5,68.1,73.1,75.2,42.8,49.8,2295,11,9,23,9,53,970,2.018,2.027,4.285,0.588,2.312,5.281,73.4,651,520,1800,4770,1.33,20.48,3.99,23800,509,1.65,58,290,610,390,620,9661,4222,12.5,13.9,9,52500,20100,20100,18900,23100,40800,64400,63700,44600,22300,25100,22100,14000,19000,62600,62600 ],\n [\"Istanbul\",39,39.4,71.5,65.6,27.9,28.2,2139,19,42,9,14,166,720,9.597,8.756,10.444,6.251,8.567,6.472,64,430,630,1282,5490,0.95,15.84,8.94,34600,1189,2.37,44,240,420,630,880,3147,1476,7.1,9.1,20,14800,14600,13500,9500,20300,51300,38600,39100,34100,19300,13500,9500,9200,9300,33500,33500 ],\n [\"Jakarta\",14.7,17.2,53.7,48.6,7.9,9.2,2111,11,62,100,27,348,500,13.104,6.034,9.777,4.813,5.133,5.357,47.4,369,330,673,4460,0.38,2.64,2.93,47800,717,0.76,19,160,320,190,390,2719,1087,2.3,2.6,7,2700,2600,2200,1300,10100,4400,17000,13000,10700,5300,4800,2700,1400,3200,15800,15800 ],\n [\"Johannesburg\",80.6,75.5,52.1,47.3,41.5,38.9,1886,15,26,9,10,94,490,4.688,7.09,11.504,7.125,4.27,4.999,46.1,310,400,738,3800,1.25,15.59,4.07,35500,56,1.45,28,100,320,310,400,2162,1295,9.8,13.5,21,17700,11900,21000,7500,41800,18000,51500,36800,74900,11900,22400,10500,15900,6600,65900,65900 ],\n [\"Cairo\",26.2,28.7,42.4,36.3,11,12.1,2331,15,67,8,19,290,420,4.198,10.952,11.704,16.244,11.703,11.068,35.4,300,300,168,4220,0.19,5.24,1.49,21500,50,0.15,27,100,200,380,430,1113,492,3,3.6,15,1600,1400,2700,2600,6600,48800,27700,20500,9600,3200,6200,5400,1900,3100,10900,10900 ],\n [\"Kiev\",19.5,20.9,53.1,46.9,10.5,11.2,1850,24,45,18,29,266,930,9.009,12.843,25.201,15.9,9.365,7.958,45.7,263,450,556,4140,0.25,12.15,4.56,24900,null,1.22,42,150,530,430,600,1631,854,2.8,3.4,16,3800,5300,6500,4900,7000,10500,11100,14100,6700,10000,4900,4100,4000,3900,13300,13300 ],\n [\"Copenhagen\",122,92.6,100.9,88.8,123.1,93.4,1674,29,15,9,6,36,1060,1.9,1.712,3.399,1.319,2.298,2.757,86.7,567,960,1100,5060,4.88,59.92,17.33,63400,641,1.99,72,270,490,950,1150,2616,1735,23.5,40.1,41,86500,56300,68400,58500,68900,61000,86400,94500,89200,72900,61900,46000,64800,42200,109200,109200 ],\n [\"Kuala Lumpur\",41.1,42,52.1,46.2,21.5,22,1986,15,25,20,21,129,500,3.609,2.027,5.4,0.6,1.7,3.2,45.1,346,400,777,4300,0.68,7.06,2.44,25700,91,0.59,58,120,220,230,540,1256,621,5.5,7,17,10400,8300,10700,6100,12800,17100,44000,31200,23600,11400,13200,7400,5100,7100,22700,22700 ],\n [\"Lima\",43.6,45.5,50.8,44.5,22.2,23.1,2107,27,21,20,15,162,600,2.004,1.78,5.788,2.936,1.53,3.369,43.4,303,410,492,4480,0.47,null,4.52,19300,95,1.36,36,130,400,310,470,1502,543,5.8,7.2,15,6300,6200,7600,5400,15900,12200,37300,40700,24300,10100,18900,6700,7600,8300,29400,29400 ],\n [\"Lisbon\",65.3,63.2,67.5,60.2,44,42.6,1695,22,22,13,8,96,720,3.043,2.423,2.646,-0.903,1.391,3.558,58.7,310,570,1100,5180,1.83,27.63,11.5,38100,181,1.95,45,80,390,390,510,1308,1178,10.7,14.3,22,32000,22500,19700,13900,25900,33700,33700,35200,36100,32400,17500,15000,18500,14900,63100,63100 ],\n [\"Ljubljana\",57.5,50.5,63.3,55.2,36.4,32,1792,22,25,22,38,101,550,2.458,3.611,5.7,0.855,1.834,1.828,53.8,368,490,479,4970,2.03,18.49,7.25,24600,140,1.71,32,140,240,560,1000,1774,1023,8.1,11.9,30,29000,15000,18100,13000,17900,28000,56600,41700,35000,23400,16300,12800,12400,17900,27800,27800 ],\n [\"London\",91.2,86.2,87.2,83,79.5,75.2,1786,22,15,6,13,42,930,2.3,2.346,3.629,2.12,3.339,4.454,81,436,770,1981,4910,3.7,81.95,23.03,28000,217,2.4,50,200,440,480,800,4830,3263,19,25.9,26,55700,44400,40900,39100,51700,36400,80300,75000,65900,46600,40700,26300,37600,27100,64200,64200 ],\n [\"Los Angeles\",113.8,106.7,75.8,68.7,86.3,80.9,1942,12,11,18,6,33,520,3.222,2.86,3.798,-0.321,1.641,3.142,67,501,580,1204,3590,1.5,34.33,25.06,30100,296,1.13,37,170,270,710,1240,2564,1877,20.4,28.1,28,55700,60200,42100,47000,62300,51900,58500,69200,90500,46100,44900,36500,47300,45700,80300,80300 ],\n [\"Luxembourg\",111.6,116.2,94.4,85.5,105.4,109.7,1788,25,11,9,9,30,970,2.667,2.313,3.383,0.37,2.274,3.409,83.4,524,860,1813,4660,1.94,54.13,19.43,31100,118,1.6,81,140,380,960,1440,2305,1839,27.6,34.3,18,113300,93900,38900,28500,45300,35500,126300,58300,66800,93900,45700,28500,29900,37200,89400,89400 ],\n [\"Lyon\",81.8,82.5,78.4,68.8,64.2,64.7,1641,26,16,10,12,52,740,1.912,1.607,3.159,0.103,1.735,2.294,67.2,477,700,945,4540,2.07,40.02,13.08,30400,null,1.84,29,180,310,740,1180,1554,1217,16.3,20.9,21,33900,30300,26200,24000,29400,43500,81500,70600,45100,55200,26000,22500,23800,24700,100900,100900 ],\n [\"Madrid\",83.6,85,69.7,61.7,57,57.9,1733,30,18,9,6,53,590,3.563,2.844,4.13,-0.238,2.043,3.052,60.2,432,630,1049,4940,1.94,44.51,13.27,21600,177,1.76,53,170,240,580,910,1295,1061,14.6,18.5,19,29100,25400,20500,23200,27300,35900,39200,63500,52700,53500,26900,17500,19900,25600,65100,65100 ],\n [\"Milan\",88.2,77.2,79.7,72.2,70.3,61.5,1753,23,17,14,15,55,770,2.217,2.038,3.5,0.764,1.639,2.903,70.4,487,710,1256,4790,1.94,34.75,16.84,18800,186,2.24,73,170,320,870,1170,2862,1813,15.5,22.9,31,32800,36500,29400,28900,36900,51000,68000,60400,57900,43500,32000,29700,28800,23200,58700,58700 ],\n [\"Manama\",56.4,71.9,54,49.5,30.5,38.8,1989,22,19,5,9,72,530,2.041,3.252,3.533,2.786,1.969,1,48.3,278,510,906,3810,0.8,null,11.52,18600,93,0.93,18,170,350,390,510,2486,1282,9.8,9.9,1,19800,10900,9200,7600,24000,11500,57900,33700,34400,15000,15300,19900,11800,14400,27800,27800 ],\n [\"Manila\",19.2,19.5,41.5,35.9,8,8.1,2245,10,72,70,27,435,450,6.234,2.8,9.299,4.191,3.793,4.761,35,292,300,194,5630,0.34,5.58,2.88,17400,47,1.02,18,160,300,140,270,1437,505,2,2.6,19,3400,2500,2700,2700,3600,8900,10900,18800,9800,3500,4000,3100,2800,4800,9700,9700 ],\n [\"Mexico City\",26.8,29.5,51.2,45.7,13.7,15.1,2375,6,48,25,21,220,440,3.629,3.967,5.125,5.297,4.155,3.403,44.6,259,480,738,4580,0.37,null,3.6,19400,28,0.81,31,130,210,620,930,1398,984,3.8,4.5,12,8400,3800,3400,3100,4800,19800,21400,21200,13600,7100,15500,4800,3100,14600,28000,28000 ],\n [\"Miami\",106.2,103.7,77,70.7,81.8,79.9,1938,12,12,12,5,32,560,3.222,2.86,3.798,-0.321,1.641,3.142,69,499,610,1515,3580,1.83,27.33,15.32,32400,98,1.05,28,160,330,630,880,2693,1929,20.1,26.6,23,63500,30600,40700,40100,56500,46200,70300,101500,95100,49300,46800,30700,33800,37700,71500,71500 ],\n [\"Montreal\",93.1,80.9,81.8,73.7,76.2,66.2,1782,13,19,14,14,44,720,2.018,2.123,2.385,0.3,1.776,2.891,71.9,519,690,1359,4610,2.87,70.58,12.98,21400,308,1.33,51,210,310,630,1100,2266,1735,16.7,24.8,32,56700,48700,43800,27600,42500,44600,59700,65100,61600,58900,40800,25900,35400,32000,56300,56300 ],\n [\"Moscow\",45.1,50.3,66.2,61.3,30.4,33.8,1799,25,18,7,12,119,970,9.679,9.007,14.117,11.654,6.854,8.443,59.8,314,690,854,5050,0.85,10.56,13.24,21200,73,0.93,73,200,530,820,1040,3639,2784,8.5,9.9,14,11900,18600,15800,13000,15900,30300,28800,29500,25500,19200,16800,12200,11800,10000,46100,46100 ],\n [\"Mumbai\",24.9,27.3,34.1,31,8.5,9.3,2251,19,56,29,30,338,400,6.177,6.372,8.349,10.882,11.99,8.628,30.3,186,210,453,3610,0.13,2.72,1.76,11500,754,0.91,24,160,280,320,540,1683,802,2.3,2.8,11,3800,3200,2100,1300,3100,7900,19800,21100,15400,7500,3800,2700,1400,4800,18000,18000 ],\n [\"Munich\",108.3,89.9,84.6,75.1,91.5,76,1755,25,14,11,11,42,800,1.784,2.276,2.754,0.234,1.15,2.483,73.3,500,720,971,4770,3.24,71.23,18.04,38400,150,1.86,53,170,340,830,1130,2499,1813,19.2,29.8,34,51200,40000,37300,28000,51700,55200,105900,115500,79500,78200,50100,40300,31500,30200,105900,105900 ],\n [\"Nairobi\",21.4,21,48.6,43.7,10.4,10.2,2196,21,83,27,41,292,490,14.455,9.76,13.1,10.552,4.087,13.998,42.7,291,370,479,4340,0.54,35.8,7.16,23900,null,1.29,22,170,220,220,280,2382,1230,2.6,3.4,24,4000,3100,2600,2500,4400,16200,11400,16600,21000,7500,4300,3400,2800,4900,14200,14200 ],\n [\"New York\",100,100,100,100,100,100,2061,13,9,12,5,28,1180,3.222,2.86,3.798,-0.321,1.641,3.142,97.6,552,1000,3354,3960,2.42,85.98,8.5,20500,100,1.15,71,340,730,570,980,7239,4299,25.2,32.6,22,62900,57200,50000,69300,79100,85500,118200,119300,107400,68400,54800,42300,41300,41700,120600,120600 ],\n [\"Nicosia\",95,107.1,64,57,60.8,68.5,1778,22,11,7,8,54,490,2.245,2.165,4.377,0.174,2.564,3.486,55.6,370,490,919,5480,1.45,null,9.31,24600,74,1.67,33,140,270,630,950,1877,932,17.3,19.8,11,47400,24700,28600,24500,33800,52700,62800,48600,47700,45600,23100,20200,21000,21100,107000,107000 ],\n [\"Oslo\",102.7,83.9,116,104.5,119.1,97.4,1749,25,17,11,12,36,1000,2.332,0.729,3.766,2.166,2.4,1.301,102,599,1270,1968,5190,5.12,48.58,23.22,42700,574,2.37,98,220,410,840,1450,3250,2214,24.5,38.8,36,61500,60000,78200,62800,72900,59800,123400,97400,79400,69300,64900,49500,63700,46500,144000,144000 ],\n [\"Paris\",94.8,89.4,83.9,77.5,78.1,73.6,1557,29,15,14,12,44,1100,1.912,1.607,3.159,0.103,1.735,2.294,75.6,522,770,1670,5030,2.16,42.87,9.39,33700,486,1.89,64,210,600,1020,1410,3250,2279,18.5,25.4,26,38700,32800,28000,25900,32100,36800,71000,71100,67100,80700,34700,25300,25400,25600,86900,86900 ],\n [\"Prague\",45.1,46.2,54.3,48,24.5,25.1,1829,20,34,13,16,132,740,2.543,2.862,6.339,1.034,1.464,1.929,46.8,295,460,725,4900,1.37,12.78,8.05,27800,116,1.88,58,120,350,250,530,1230,867,6.3,8,20,13200,16200,13600,9100,15400,17100,24500,25300,21000,20100,13200,12200,9200,10500,21900,21900 ],\n [\"Riga\",44.3,39.2,54.5,47.2,24.2,21.4,1806,23,33,22,22,168,580,6.571,10.083,15.252,3.259,-1.224,4.223,46,316,410,466,4460,1.3,9.23,6.34,29700,98,1.76,36,110,300,440,570,932,841,5.4,7.9,31,8400,13700,15500,14600,15300,14400,23300,30400,16800,18900,13700,8700,9300,13000,33000,33000 ],\n [\"Rio de Janeiro\",44.4,45,61.2,55.5,27.2,27.5,1895,30,45,33,11,160,710,4.196,3.638,5.672,4.888,5.039,6.636,54.2,354,530,764,5400,1.56,null,7.29,16100,357,0.88,23,180,440,230,350,3198,1320,6.9,8.9,15,13700,9800,14200,8400,18600,21200,62400,33300,37600,10900,10700,6600,6300,7500,70300,70300 ],\n [\"Rome\",69.6,60.9,79.2,73.8,55.1,48.2,1898,22,23,17,19,70,650,2.217,2.038,3.5,0.764,1.639,2.903,72,497,690,1813,5190,1.94,36.69,9.38,32400,389,2.27,36,210,320,910,830,3237,2033,12.1,17.9,31,30600,33500,22900,19600,31300,74200,53100,65100,28000,34300,34800,22100,16200,13200,94500,94500 ],\n [\"Santiago de Chile\",42.8,40.6,52.9,47.6,22.6,21.5,2034,15,55,22,21,157,630,3.392,4.408,8.716,1.485,1.408,3.34,46.5,348,460,673,4520,1.17,6.49,7.13,13400,255,1.24,33,140,410,360,610,2344,1023,5.4,7.4,23,15400,10000,11000,6700,12200,12300,28100,36700,32000,21600,11300,8200,7400,8500,30600,30600 ],\n [\"São Paulo\",48.7,49.4,61.7,56.1,30.1,30.5,1809,30,39,27,7,106,770,4.196,3.638,5.672,4.888,5.039,6.636,54.8,379,540,854,5010,1.53,null,6.83,23700,485,1.28,42,310,470,300,600,2810,1580,7.7,9.8,16,10600,11300,12600,6600,12600,25500,61900,67000,28200,14600,13900,8700,7100,4800,19900,19900 ],\n [\"Seoul\",80.8,74,67.9,66.3,54.8,50.2,2308,13,16,14,10,56,780,1.467,4.767,5.852,2.757,2.938,4.026,64.7,629,590,2175,4790,0.9,17.54,3.4,26000,523,1.56,60,240,510,220,300,3444,2641,12.7,17.9,23,65400,43600,11700,13000,41600,69800,65400,52300,82900,34100,27100,21800,10500,24500,130800,130800 ],\n [\"Shanghai\",37.2,38.4,56.2,49.7,20.9,21.6,1966,9,28,43,8,142,740,2.242,2.535,4.674,-0.683,3.325,5.417,48.5,404,470,712,3950,0.58,10.4,3.64,29400,76,1.26,64,250,440,400,960,1424,919,5.4,6.8,17,12200,8500,9300,6700,9200,23700,39600,24700,15800,28900,12300,7400,8200,7600,53200,53200 ],\n [\"Singapore\",50.8,53.3,94.9,89.2,48.2,50.7,2036,14,18,21,12,58,920,0.973,2.096,6.514,0.589,2.824,5.247,87.1,589,710,1994,5120,1.36,null,8.65,124900,966,1.25,88,180,410,530,840,4455,3496,12.8,15.7,18,41200,21900,19600,15000,27200,30400,82600,77600,46800,27800,28200,19000,14500,21600,86800,86800 ],\n [\"Sofia\",32.6,32.1,42.4,36.5,13.8,13.6,1894,22,36,20,28,248,420,7.417,7.571,11.95,2.473,3.036,3.389,35.6,265,290,336,3890,0.66,6.62,2,27700,119,1.71,19,80,220,270,430,764,453,3.4,4.5,23,4700,7300,7500,5700,9300,11100,18100,15200,10400,10700,7400,7400,5100,10900,21900,21900 ],\n [\"Stockholm\",90.2,84.9,92,81.7,82.9,78.1,1795,26,17,18,11,45,810,1.498,1.677,3.298,1.989,1.907,1.366,79.7,553,900,1178,4950,4.52,41.6,24.64,36400,334,2.14,68,180,340,760,1240,2525,1826,19.7,27,26,46600,41300,41300,43300,44300,45800,88800,81900,72500,48600,41100,37400,37900,41700,83400,83400 ],\n [\"Sydney\",112.5,117.1,83.7,77.8,94.1,98,1846,15,11,9,6,32,690,3.538,2.332,4.353,1.82,2.845,3.389,75.9,508,680,1644,5210,3.43,39.35,9.75,22200,245,1.5,45,220,350,580,820,4183,2175,24.7,30.6,18,57400,41800,39400,39200,72000,55900,111000,93400,79000,52200,50500,40400,50500,36800,110300,110300 ],\n [\"Taipei\",52,61.4,63.9,58,33.3,39.3,2115,11,15,9,11,79,650,0.598,1.798,3.527,-0.872,0.963,1.422,56.6,448,490,945,4290,0.68,11.25,4.37,22400,382,1.1,63,120,350,980,1070,2434,1696,9.9,10.8,8,25600,23200,16700,20100,24700,41300,61500,44400,29300,20600,15500,12700,11000,14800,36000,36000 ],\n [\"Tallinn\",47.9,48.6,58.3,50.2,28,28.3,1760,28,27,20,15,139,490,4.43,6.598,10.366,-0.085,2.894,5.121,49,333,380,453,5200,1.81,9.79,5.86,21200,null,1.72,34,160,250,610,830,984,712,7.1,9.1,20,11400,17700,21200,10600,17900,21400,51000,16600,27300,11800,14200,8800,10600,13600,27800,27800 ],\n [\"Tel Aviv\",57,57.6,75.4,68.5,43,43.5,1966,16,17,9,20,100,600,2.107,0.516,4.745,3.342,2.686,3.45,66.8,476,620,1282,5740,1.72,16.95,13.57,33900,413,2.14,40,180,360,440,580,2577,1709,11,14,18,20700,26500,18900,21000,25000,33500,48700,56200,56200,28900,18400,12300,15200,19700,83000,83000 ],\n [\"Tokyo\",84.7,82.9,109,100.1,92.4,90.4,2012,16,8,14,15,35,1190,0.3,0,1.396,-1.347,-0.72,-0.283,97.7,927,940,1631,4820,2.46,44.72,21.42,26300,495,1.62,72,370,730,1220,1880,6177,2486,22.8,30.1,24,78200,56300,54000,47000,77700,70200,89400,102100,77200,79400,48800,35100,48000,44700,144000,144000 ],\n [\"Toronto\",103.4,92.4,74.3,67.2,76.8,68.6,1847,14,10,11,9,38,680,2.018,2.123,2.385,0.3,1.776,2.891,65.6,453,750,1087,4520,3.08,35.62,13.31,15000,75,1.25,71,150,340,310,840,2564,2020,17.3,25,27,82900,36700,33300,46200,44300,53000,66600,47300,84800,32900,26300,28000,29700,37400,74600,74600 ],\n [\"Vilnius\",42.6,41.6,50.9,43.6,21.7,21.2,1789,24,32,19,33,168,410,3.788,5.772,11.138,4.164,1.19,4.124,42.5,284,360,323,4770,0.94,13.73,4.63,23700,null,1.72,22,90,220,480,510,984,492,5.3,7.1,23,10500,12200,13900,9800,17700,21900,23600,18500,16600,20200,10400,6500,8500,8000,38500,38500 ],\n [\"Warsaw\",44.3,40.8,53.7,48,23.8,21.9,1792,23,35,13,24,141,650,1.033,2.493,4.215,3.45,2.514,4.268,46.8,291,420,712,4410,0.79,14.62,3.15,25000,55,1.76,31,110,280,580,950,1618,1204,5.5,7.7,28,11900,10000,12600,9700,13200,20500,20900,27600,17900,11900,11700,11000,8400,7600,24900,24900 ],\n [\"Vienna\",100.6,88.8,81.3,72.1,80.2,70.8,1786,25,13,8,8,46,830,1.686,2.203,3.223,0.401,1.69,3.6,70.3,503,680,945,5560,2.59,42.03,17.27,29800,453,1.8,47,140,360,980,1040,2486,1424,17.8,26.1,29,44700,42900,34100,29500,56200,49000,96100,82900,69800,49100,49900,30000,25400,32600,72500,72500 ],\n [\"Zurich\",119.1,120.3,110,102.5,131.1,132.4,1887,23,12,5,5,22,1250,1.047,0.732,2.43,-0.476,0.685,0.228,100,704,1130,2551,5130,4.66,68.47,28.93,45200,426,2.01,90,280,630,1100,1190,4481,2499,33.4,42.7,21,104600,90700,68900,61800,79800,69900,137200,130000,115700,96900,71100,61400,53200,58900,140400,140400 ]\n];\n\n\n\nfunction makeMapData(rawData) {\n var mapData = [];\n for (var i = 0; i < rawData.length; i++) {\n var geoCoord = geoCoordMap[rawData[i][0]];\n if (geoCoord) {\n mapData.push({\n name: rawData[i][0],\n value: geoCoord.concat(rawData[i].slice(1))\n });\n }\n }\n return mapData;\n};\n\nfunction makeParallelAxis(schema) {\n var parallelAxis = [];\n for (var i = 1; i < schema.length; i++) {\n parallelAxis.push({dim: i, name: schema[i]});\n }\n return parallelAxis;\n}\n\n\nconst option = {\n parallel: {\n axisExpandable: true,\n axisExpandCenter: 15,\n axisExpandCount: 10,\n axisExpandWidth: 60\n },\n parallelAxis: makeParallelAxis(schema),\n series: [\n {\n name: 'parallel',\n type: 'parallel',\n smooth: true,\n lineStyle: {\n color: '#577ceb',\n width: 0.5,\n opacity: 0.6\n },\n z: 100,\n blendMode: 'lighter',\n data: rawData\n }\n ]\n};\n\n",
"name": "parallel-large",
"title": "大数据量平行坐标"
}
]
},
"parallelAxis": {
"desc": "<p>This component is the coordinate axis for parallel coordinate.</p>\n<p><br></p>\n<hr>\n<p><strong>Introduction about Parallel coordinates</strong></p>\n<p><a href=\"https://en.wikipedia.org/wiki/Parallel_coordinates\" target=\"_blank\">Parallel Coordinates</a> is a common way of visualizing high-dimensional geometry and analyzing multivariate data.</p>\n<p>For example, <a href=\"#series-parallel.data\">series-parallel.data</a> is the following data:</p>\n<pre><code class=\"lang-javascript\">[\n [1, 55, 9, 56, 0.46, 18, 6, &#39;good&#39;],\n [2, 25, 11, 21, 0.65, 34, 9, &#39;excellent&#39;],\n [3, 56, 7, 63, 0.3, 14, 5, &#39;good&#39;],\n [4, 33, 7, 29, 0.33, 16, 6, &#39;excellent&#39;],\n { // Data item can also be an Object, so that perticular settings of its line can be set here.\n value: [5, 42, 24, 44, 0.76, 40, 16, &#39;excellent&#39;]\n lineStyle: {...},\n }\n ...\n]\n</code></pre>\n<p>In data above, each row is a &quot;data item&quot;, and each column represents a &quot;dimension&quot;. For example, the meanings of columns above are: &quot;data&quot;, &quot;AQI&quot;, &quot;PM2.5&quot;, &quot;PM10&quot;, &quot;carbon monoxide level&quot;, &quot;nitrogen dioxide level&quot;, and &quot;sulfur dioxide level&quot;.</p>\n<p>Parallel coordinates are often used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=doc-example/parallel-all&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<hr>\n<p><strong>Brief about Configuration</strong></p>\n<p>Basic configuration parallel coordinates is shown as follow:</p>\n<pre><code class=\"lang-javascript\">option = {\n parallelAxis: [ // Definitions of axes.\n {dim: 0, name: schema[0].text}, // Each axis has a &#39;dim&#39; attribute, representing dimension index in data.\n {dim: 1, name: schema[1].text},\n {dim: 2, name: schema[2].text},\n {dim: 3, name: schema[3].text},\n {dim: 4, name: schema[4].text},\n {dim: 5, name: schema[5].text},\n {dim: 6, name: schema[6].text},\n {dim: 7, name: schema[7].text,\n type: &#39;category&#39;, // Also supports category data.\n data: [&#39;Excellent&#39;, &#39;good&#39;, &#39;light pollution&#39;, &#39;moderate pollution&#39;, &#39;heavy pollution&#39;, &#39;severe pollution&#39;]\n }\n ],\n parallel: { // Definition of a parallel coordinate system.\n left: &#39;5%&#39;, // Location of parallel coordinate system.\n right: &#39;13%&#39;,\n bottom: &#39;10%&#39;,\n top: &#39;20%&#39;,\n parallelAxisDefault: { // A pattern for axis definition, which can avoid repeating in `parallelAxis`.\n type: &#39;value&#39;,\n nameLocation: &#39;end&#39;,\n nameGap: 20\n }\n },\n series: [ // Here the three series sharing the same parallel coordinate system.\n {\n name: &#39;Beijing&#39;,\n type: &#39;parallel&#39;, // The type of this series is &#39;parallel&#39;\n data: [\n [1, 55, 9, 56, 0.46, 18, 6, &#39;good&#39;],\n [2, 25, 11, 21, 0.65, 34, 9, &#39;excellent&#39;],\n ...\n ]\n },\n {\n name: &#39;Shanghai&#39;,\n type: &#39;parallel&#39;,\n data: [\n [3, 56, 7, 63, 0.3, 14, 5, &#39;good&#39;],\n [4, 33, 7, 29, 0.33, 16, 6, &#39;excellent&#39;],\n ...\n ]\n },\n {\n name: &#39;Guangzhou&#39;,\n type: &#39;parallel&#39;,\n data: [\n [4, 33, 7, 29, 0.33, 16, 6, &#39;excellent&#39;],\n [5, 42, 24, 44, 0.76, 40, 16, &#39;excellent&#39;],\n ...\n ]\n }\n ]\n};\n</code></pre>\n<p>Three components are involved here: <a href=\"#parallel\">parallel</a>, <a href=\"#parallelAxis\">parallelAxis</a>, <a href=\"#series-parallel\">series-parallel</a></p>\n<ul>\n<li><p><a href=\"#parallel\">parallel</a></p>\n<p> This component is the coordinate system. One or more series (like &quot;Beijing&quot;, &quot;Shanghai&quot;, and &quot;Guangzhou&quot; in the above example) can share one coordinate system.</p>\n<p> Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.</p>\n<p> Position setting is also carried out here.</p>\n</li>\n<li><p><a href=\"#parallelAxis\">parallelAxis</a></p>\n<p> This is axis configuration. Multiple axes are needed in parallel coordinates.</p>\n<p> <a href=\"#parallelAxis.parallelIndex\">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n<li><p><a href=\"#series-parallel\">series-parallel</a></p>\n<p> This is the definition of parallel series, which will be drawn on parallel coordinate system.</p>\n<p> <a href=\"#parallelAxis.parallelIndex\">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>Notes and Best Practices</strong></p>\n<p>When configuring multiple <a href=\"#parallelAxis\">parallelAxis</a>, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a>. Before initializing axis, configurations in <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a> will be merged into <a href=\"#parallelAxis\">parallelAxis</a> to generate the final axis configuration.</p>\n<p><strong>If data is too large and cause bad performance</strong></p>\n<p>It is suggested to set <a href=\"#series-parallel.lineStyle.width\">series-parallel.lineStyle.width</a> to be <code class=\"codespan\">0.5</code> (or less), which may improve performance significantly.</p>\n<p><br></p>\n<hr>\n<p><strong>Display High-Dimension Data</strong></p>\n<p>When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.</p>\n<p>In this case, you may use <a href=\"#parallel.axisExpandable\">parallel.axisExpandable</a> to improve the display. See this example:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=map-parallel-prices&edit=1&reset=1\" width=\"600\" height=\"460\"><iframe />\n\n\n\n\n\n\n\n\n\n\n<p><br>\n<br></p>\n",
"exampleBaseOptions": [
{
"code": "\nconst dataBJ = [\n [1,55,9,56,0.46,18,6,\"良\"],\n [2,25,11,21,0.65,34,9,\"优\"],\n [3,56,7,63,0.3,14,5,\"良\"],\n [4,33,7,29,0.33,16,6,\"优\"],\n [5,42,24,44,0.76,40,16,\"优\"],\n [6,82,58,90,1.77,68,33,\"良\"],\n [7,74,49,77,1.46,48,27,\"良\"],\n [8,78,55,80,1.29,59,29,\"良\"],\n [9,267,216,280,4.8,108,64,\"重度污染\"],\n [10,185,127,216,2.52,61,27,\"中度污染\"],\n [11,39,19,38,0.57,31,15,\"优\"],\n [12,41,11,40,0.43,21,7,\"优\"],\n [13,64,38,74,1.04,46,22,\"良\"],\n [14,108,79,120,1.7,75,41,\"轻度污染\"],\n [15,108,63,116,1.48,44,26,\"轻度污染\"],\n [16,33,6,29,0.34,13,5,\"优\"],\n [17,94,66,110,1.54,62,31,\"良\"],\n [18,186,142,192,3.88,93,79,\"中度污染\"],\n [19,57,31,54,0.96,32,14,\"良\"],\n [20,22,8,17,0.48,23,10,\"优\"],\n [21,39,15,36,0.61,29,13,\"优\"],\n [22,94,69,114,2.08,73,39,\"良\"],\n [23,99,73,110,2.43,76,48,\"良\"],\n [24,31,12,30,0.5,32,16,\"优\"],\n [25,42,27,43,1,53,22,\"优\"],\n [26,154,117,157,3.05,92,58,\"中度污染\"],\n [27,234,185,230,4.09,123,69,\"重度污染\"],\n [28,160,120,186,2.77,91,50,\"中度污染\"],\n [29,134,96,165,2.76,83,41,\"轻度污染\"],\n [30,52,24,60,1.03,50,21,\"良\"],\n [31,46,5,49,0.28,10,6,\"优\"]\n];\n\nconst dataGZ = [\n [1,26,37,27,1.163,27,13,\"优\"],\n [2,85,62,71,1.195,60,8,\"良\"],\n [3,78,38,74,1.363,37,7,\"良\"],\n [4,21,21,36,0.634,40,9,\"优\"],\n [5,41,42,46,0.915,81,13,\"优\"],\n [6,56,52,69,1.067,92,16,\"良\"],\n [7,64,30,28,0.924,51,2,\"良\"],\n [8,55,48,74,1.236,75,26,\"良\"],\n [9,76,85,113,1.237,114,27,\"良\"],\n [10,91,81,104,1.041,56,40,\"良\"],\n [11,84,39,60,0.964,25,11,\"良\"],\n [12,64,51,101,0.862,58,23,\"良\"],\n [13,70,69,120,1.198,65,36,\"良\"],\n [14,77,105,178,2.549,64,16,\"良\"],\n [15,109,68,87,0.996,74,29,\"轻度污染\"],\n [16,73,68,97,0.905,51,34,\"良\"],\n [17,54,27,47,0.592,53,12,\"良\"],\n [18,51,61,97,0.811,65,19,\"良\"],\n [19,91,71,121,1.374,43,18,\"良\"],\n [20,73,102,182,2.787,44,19,\"良\"],\n [21,73,50,76,0.717,31,20,\"良\"],\n [22,84,94,140,2.238,68,18,\"良\"],\n [23,93,77,104,1.165,53,7,\"良\"],\n [24,99,130,227,3.97,55,15,\"良\"],\n [25,146,84,139,1.094,40,17,\"轻度污染\"],\n [26,113,108,137,1.481,48,15,\"轻度污染\"],\n [27,81,48,62,1.619,26,3,\"良\"],\n [28,56,48,68,1.336,37,9,\"良\"],\n [29,82,92,174,3.29,0,13,\"良\"],\n [30,106,116,188,3.628,101,16,\"轻度污染\"],\n [31,118,50,0,1.383,76,11,\"轻度污染\"]\n];\n\nconst dataSH = [\n [1,91,45,125,0.82,34,23,\"良\"],\n [2,65,27,78,0.86,45,29,\"良\"],\n [3,83,60,84,1.09,73,27,\"良\"],\n [4,109,81,121,1.28,68,51,\"轻度污染\"],\n [5,106,77,114,1.07,55,51,\"轻度污染\"],\n [6,109,81,121,1.28,68,51,\"轻度污染\"],\n [7,106,77,114,1.07,55,51,\"轻度污染\"],\n [8,89,65,78,0.86,51,26,\"良\"],\n [9,53,33,47,0.64,50,17,\"良\"],\n [10,80,55,80,1.01,75,24,\"良\"],\n [11,117,81,124,1.03,45,24,\"轻度污染\"],\n [12,99,71,142,1.1,62,42,\"良\"],\n [13,95,69,130,1.28,74,50,\"良\"],\n [14,116,87,131,1.47,84,40,\"轻度污染\"],\n [15,108,80,121,1.3,85,37,\"轻度污染\"],\n [16,134,83,167,1.16,57,43,\"轻度污染\"],\n [17,79,43,107,1.05,59,37,\"良\"],\n [18,71,46,89,0.86,64,25,\"良\"],\n [19,97,71,113,1.17,88,31,\"良\"],\n [20,84,57,91,0.85,55,31,\"良\"],\n [21,87,63,101,0.9,56,41,\"良\"],\n [22,104,77,119,1.09,73,48,\"轻度污染\"],\n [23,87,62,100,1,72,28,\"良\"],\n [24,168,128,172,1.49,97,56,\"中度污染\"],\n [25,65,45,51,0.74,39,17,\"良\"],\n [26,39,24,38,0.61,47,17,\"优\"],\n [27,39,24,39,0.59,50,19,\"优\"],\n [28,93,68,96,1.05,79,29,\"良\"],\n [29,188,143,197,1.66,99,51,\"中度污染\"],\n [30,174,131,174,1.55,108,50,\"中度污染\"],\n [31,187,143,201,1.39,89,53,\"中度污染\"]\n];\n\nconst schema = [\n {name: 'date', index: 0, text: '日期'},\n {name: 'AQIindex', index: 1, text: 'AQI'},\n {name: 'PM25', index: 2, text: 'PM2.5'},\n {name: 'PM10', index: 3, text: 'PM10'},\n {name: 'CO', index: 4, text: ' CO'},\n {name: 'NO2', index: 5, text: 'NO2'},\n {name: 'SO2', index: 6, text: 'SO2'},\n {name: '等级', index: 7, text: '等级'}\n];\n\nconst option = {\n color: [\n '#c23531', '#91c7ae', '#dd8668'\n ],\n legend: {\n top: 10,\n data: ['北京', '上海', '广州'],\n itemGap: 20\n },\n parallelAxis: [\n {dim: 0, name: schema[0].text, inverse: true, max: 31, nameLocation: 'start'},\n {dim: 1, name: schema[1].text},\n {dim: 2, name: schema[2].text},\n {dim: 3, name: schema[3].text},\n {dim: 4, name: schema[4].text},\n {dim: 5, name: schema[5].text},\n {dim: 6, name: schema[6].text},\n {dim: 7, name: schema[7].text,\n type: 'category', data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']}\n ],\n parallel: {\n left: '5%',\n right: '13%',\n bottom: '10%',\n top: '20%',\n parallelAxisDefault: {\n type: 'value',\n name: 'AQI指数',\n nameLocation: 'end',\n nameGap: 20,\n nameTextStyle: {\n fontSize: 12\n }\n }\n },\n series: [\n {\n name: '北京',\n type: 'parallel',\n data: dataBJ\n },\n {\n name: '上海',\n type: 'parallel',\n data: dataSH\n },\n {\n name: '广州',\n type: 'parallel',\n data: dataGZ\n }\n ]\n};\n",
"name": "parallel-axis",
"title": "平行坐标",
"title-en": "Parallel"
}
]
},
"singleAxis": {
"desc": "<p>An axis with a single dimension. It can be used to display data in one dimension. For example:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=scatter-single-axis&edit=1&reset=1\" width=\"700\" height=\"500\"><iframe />\n\n\n\n"
},
"timeline": {
"desc": "<p><code class=\"codespan\">timeline</code> component, which provides functions like switching and playing between multiple ECharts <code class=\"codespan\">options</code>.</p>\n<p>Here is an example:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=doc-example/mix-timeline-all&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<p>Different from other components, <code class=\"codespan\">timeline</code> component requires multiple options. If the traditional way of ECharts option is called <em>atomic option</em>, then, the option used along with timeline should be call a <em>compound option</em> composed with multiple atomic options. For example:</p>\n<pre><code class=\"lang-javascript\">// In the following example, baseOption is an *atomic option*, so as each item in options array.\n// Each of the atomic option follows configuration introduced in this document.\nmyChart.setOption(\n {\n baseOption: {\n timeline: {\n ...,\n data: [&#39;2002-01-01&#39;, &#39;2003-01-01&#39;, &#39;2004-01-01&#39;]\n },\n title: {\n subtext: &#39; Data is from National Bureau of Statistics &#39;\n },\n grid: {...},\n xAxis: [...],\n yAxis: [...],\n series: [\n { // other configurations of series 1\n type: &#39;bar&#39;,\n ...\n },\n { // other configurations of series 2\n type: &#39;line&#39;,\n ...\n },\n { // other configurations of series 3\n type: &#39;pie&#39;,\n ...\n }\n ]\n },\n options: [\n { // it is an option corresponding to &#39;2002-01-01&#39;\n title: {\n text: &#39;the statistics of the year 2002&#39;\n },\n series: [\n {data: []}, // the data of series 1\n {data: []}, // the data of series 2\n {data: []} // the data of series 3\n ]\n },\n { // it is an option corresponding to &#39;2003-01-01&#39;\n title: {\n text: &#39;the statistics of the year 2003&#39;\n },\n series: [\n {data: []},\n {data: []},\n {data: []}\n ]\n },\n { // it is an option corresponding to &#39;2004-01-01&#39;\n title: {\n text: &#39;the statistics of the year 2004&#39;\n },\n series: [\n {data: []},\n {data: []},\n {data: []}\n ]\n }\n ]\n }\n);\n</code></pre>\n<p>In the above example, each item in <code class=\"codespan\">timeline.data</code> corresponds to each <code class=\"codespan\">option</code> of <code class=\"codespan\">options</code> array.</p>\n<p><br>\n<strong>Attention and Best Practice: </strong></p>\n<ul>\n<li><p>Shared configuration items are recommended to be set in <code class=\"codespan\">baseOption</code>. When switching in <code class=\"codespan\">timeline</code>, <code class=\"codespan\">option</code> in corresponding <code class=\"codespan\">options</code> array will be merged with <code class=\"codespan\">baseOption</code> to form the final <code class=\"codespan\">option</code>.</p>\n</li>\n<li><p>In <code class=\"codespan\">options</code> array, if an attribute is configured in one of the options, then, it should also be configured in other options. Otherwise, this attribute will be ignored.</p>\n</li>\n<li><p><code class=\"codespan\">options</code> in <em>compound option</em> doesn&#39;t support merge.</p>\n<p> That is to say, when calling <code class=\"codespan\">chart.setOption(rawOption)</code> after the first time, if <code class=\"codespan\">rawOption</code> is a <em>compound option</em> (meaning that it contains an array of <code class=\"codespan\">options</code>), then the new <code class=\"codespan\">rawOption.options</code> will replace the old one, instead of merging with it. Of course, <code class=\"codespan\">rawOption.baseOption</code> will be merged with that of old option normally.</p>\n</li>\n</ul>\n<p><br>\n<strong>Compatibility with ECharts 2: </strong></p>\n<ul>\n<li><p>ECharts3 doesn&#39;t support <code class=\"codespan\">timeline.notMerge</code> parameter any more, which implies <em>notMerge mode</em> is no longer supported. If you need this function, you may manage the option in your own program before passing to <code class=\"codespan\">setOption(option, true)</code>.</p>\n</li>\n<li><p>Comparing ECharts 3 with ECharts 2, the definition location of timeline attributes are different. The one in ECharts 3 is moved to <code class=\"codespan\">baseOption</code> and is regarded as a seperate component, which is also compatible with the timeline definition location of ECharts 2. But it is not recommended to do so.</p>\n</li>\n</ul>\n",
"exampleBaseOptions": [
{
"code": "\nvar dataMap = {};\nfunction dataFormatter(obj) {\n var pList = ['北京','天津','河北','山西','内蒙古','辽宁','吉林','黑龙江','上海','江苏','浙江','安徽','福建','江西','山东','河南','湖北','湖南','广东','广西','海南','重庆','四川','贵州','云南','西藏','陕西','甘肃','青海','宁夏','新疆'];\n var temp;\n for (var year = 2002; year <= 2011; year++) {\n var max = 0;\n var sum = 0;\n temp = obj[year];\n for (var i = 0, l = temp.length; i < l; i++) {\n max = Math.max(max, temp[i]);\n sum += temp[i];\n obj[year][i] = {\n name : pList[i],\n value : temp[i]\n }\n }\n obj[year + 'max'] = Math.floor(max / 100) * 100;\n obj[year + 'sum'] = sum;\n }\n return obj;\n}\n\ndataMap.dataGDP = dataFormatter({\n //max : 60000,\n 2011:[16251.93,11307.28,24515.76,11237.55,14359.88,22226.7,10568.83,12582,19195.69,49110.27,32318.85,15300.65,17560.18,11702.82,45361.85,26931.03,19632.26,19669.56,53210.28,11720.87,2522.66,10011.37,21026.68,5701.84,8893.12,605.83,12512.3,5020.37,1670.44,2102.21,6610.05],\n 2010:[14113.58,9224.46,20394.26,9200.86,11672,18457.27,8667.58,10368.6,17165.98,41425.48,27722.31,12359.33,14737.12,9451.26,39169.92,23092.36,15967.61,16037.96,46013.06,9569.85,2064.5,7925.58,17185.48,4602.16,7224.18,507.46,10123.48,4120.75,1350.43,1689.65,5437.47],\n 2009:[12153.03,7521.85,17235.48,7358.31,9740.25,15212.49,7278.75,8587,15046.45,34457.3,22990.35,10062.82,12236.53,7655.18,33896.65,19480.46,12961.1,13059.69,39482.56,7759.16,1654.21,6530.01,14151.28,3912.68,6169.75,441.36,8169.8,3387.56,1081.27,1353.31,4277.05],\n 2008:[11115,6719.01,16011.97,7315.4,8496.2,13668.58,6426.1,8314.37,14069.87,30981.98,21462.69,8851.66,10823.01,6971.05,30933.28,18018.53,11328.92,11555,36796.71,7021,1503.06,5793.66,12601.23,3561.56,5692.12,394.85,7314.58,3166.82,1018.62,1203.92,4183.21],\n 2007:[9846.81,5252.76,13607.32,6024.45,6423.18,11164.3,5284.69,7104,12494.01,26018.48,18753.73,7360.92,9248.53,5800.25,25776.91,15012.46,9333.4,9439.6,31777.01,5823.41,1254.17,4676.13,10562.39,2884.11,4772.52,341.43,5757.29,2703.98,797.35,919.11,3523.16],\n 2006:[8117.78,4462.74,11467.6,4878.61,4944.25,9304.52,4275.12,6211.8,10572.24,21742.05,15718.47,6112.5,7583.85,4820.53,21900.19,12362.79,7617.47,7688.67,26587.76,4746.16,1065.67,3907.23,8690.24,2338.98,3988.14,290.76,4743.61,2277.35,648.5,725.9,3045.26],\n 2005:[6969.52,3905.64,10012.11,4230.53,3905.03,8047.26,3620.27,5513.7,9247.66,18598.69,13417.68,5350.17,6554.69,4056.76,18366.87,10587.42,6590.19,6596.1,22557.37,3984.1,918.75,3467.72,7385.1,2005.42,3462.73,248.8,3933.72,1933.98,543.32,612.61,2604.19],\n 2004:[6033.21,3110.97,8477.63,3571.37,3041.07,6672,3122.01,4750.6,8072.83,15003.6,11648.7,4759.3,5763.35,3456.7,15021.84,8553.79,5633.24,5641.94,18864.62,3433.5,819.66,3034.58,6379.63,1677.8,3081.91,220.34,3175.58,1688.49,466.1,537.11,2209.09],\n 2003:[5007.21,2578.03,6921.29,2855.23,2388.38,6002.54,2662.08,4057.4,6694.23,12442.87,9705.02,3923.11,4983.67,2807.41,12078.15,6867.7,4757.45,4659.99,15844.64,2821.11,713.96,2555.72,5333.09,1426.34,2556.02,185.09,2587.72,1399.83,390.2,445.36,1886.35],\n 2002:[4315,2150.76,6018.28,2324.8,1940.94,5458.22,2348.54,3637.2,5741.03,10606.85,8003.67,3519.72,4467.55,2450.48,10275.5,6035.48,4212.82,4151.54,13502.42,2523.73,642.73,2232.86,4725.01,1243.43,2312.82,162.04,2253.39,1232.03,340.65,377.16,1612.6]\n});\n\ndataMap.dataPI = dataFormatter({\n //max : 4000,\n 2011:[136.27,159.72,2905.73,641.42,1306.3,1915.57,1277.44,1701.5,124.94,3064.78,1583.04,2015.31,1612.24,1391.07,3973.85,3512.24,2569.3,2768.03,2665.2,2047.23,659.23,844.52,2983.51,726.22,1411.01,74.47,1220.9,678.75,155.08,184.14,1139.03],\n 2010:[124.36,145.58,2562.81,554.48,1095.28,1631.08,1050.15,1302.9,114.15,2540.1,1360.56,1729.02,1363.67,1206.98,3588.28,3258.09,2147,2325.5,2286.98,1675.06,539.83,685.38,2482.89,625.03,1108.38,68.72,988.45,599.28,134.92,159.29,1078.63],\n 2009:[118.29,128.85,2207.34,477.59,929.6,1414.9,980.57,1154.33,113.82,2261.86,1163.08,1495.45,1182.74,1098.66,3226.64,2769.05,1795.9,1969.69,2010.27,1458.49,462.19,606.8,2240.61,550.27,1067.6,63.88,789.64,497.05,107.4,127.25,759.74],\n 2008:[112.83,122.58,2034.59,313.58,907.95,1302.02,916.72,1088.94,111.8,2100.11,1095.96,1418.09,1158.17,1060.38,3002.65,2658.78,1780,1892.4,1973.05,1453.75,436.04,575.4,2216.15,539.19,1020.56,60.62,753.72,462.27,105.57,118.94,691.07],\n 2007:[101.26,110.19,1804.72,311.97,762.1,1133.42,783.8,915.38,101.84,1816.31,986.02,1200.18,1002.11,905.77,2509.14,2217.66,1378,1626.48,1695.57,1241.35,361.07,482.39,2032,446.38,837.35,54.89,592.63,387.55,83.41,97.89,628.72],\n 2006:[88.8,103.35,1461.81,276.77,634.94,939.43,672.76,750.14,93.81,1545.05,925.1,1011.03,865.98,786.14,2138.9,1916.74,1140.41,1272.2,1532.17,1032.47,323.48,386.38,1595.48,382.06,724.4,50.9,484.81,334,67.55,79.54,527.8],\n 2005:[88.68,112.38,1400,262.42,589.56,882.41,625.61,684.6,90.26,1461.51,892.83,966.5,827.36,727.37,1963.51,1892.01,1082.13,1100.65,1428.27,912.5,300.75,463.4,1481.14,368.94,661.69,48.04,435.77,308.06,65.34,72.07,509.99],\n 2004:[87.36,105.28,1370.43,276.3,522.8,798.43,568.69,605.79,83.45,1367.58,814.1,950.5,786.84,664.5,1778.45,1649.29,1020.09,1022.45,1248.59,817.88,278.76,428.05,1379.93,334.5,607.75,44.3,387.88,286.78,60.7,65.33,461.26],\n 2003:[84.11,89.91,1064.05,215.19,420.1,615.8,488.23,504.8,81.02,1162.45,717.85,749.4,692.94,560,1480.67,1198.7,798.35,886.47,1072.91,658.78,244.29,339.06,1128.61,298.69,494.6,40.7,302.66,237.91,48.47,55.63,412.9],\n 2002:[82.44,84.21,956.84,197.8,374.69,590.2,446.17,474.2,79.68,1110.44,685.2,783.66,664.78,535.98,1390,1288.36,707,847.25,1015.08,601.99,222.89,317.87,1047.95,281.1,463.44,39.75,282.21,215.51,47.31,52.95,305]\n});\n\ndataMap.dataSI = dataFormatter({\n //max : 26600,\n 2011:[3752.48,5928.32,13126.86,6635.26,8037.69,12152.15,5611.48,5962.41,7927.89,25203.28,16555.58,8309.38,9069.2,6390.55,24017.11,15427.08,9815.94,9361.99,26447.38,5675.32,714.5,5543.04,11029.13,2194.33,3780.32,208.79,6935.59,2377.83,975.18,1056.15,3225.9],\n 2010:[3388.38,4840.23,10707.68,5234,6367.69,9976.82,4506.31,5025.15,7218.32,21753.93,14297.93,6436.62,7522.83,5122.88,21238.49,13226.38,7767.24,7343.19,23014.53,4511.68,571,4359.12,8672.18,1800.06,3223.49,163.92,5446.1,1984.97,744.63,827.91,2592.15],\n 2009:[2855.55,3987.84,8959.83,3993.8,5114,7906.34,3541.92,4060.72,6001.78,18566.37,11908.49,4905.22,6005.3,3919.45,18901.83,11010.5,6038.08,5687.19,19419.7,3381.54,443.43,3448.77,6711.87,1476.62,2582.53,136.63,4236.42,1527.24,575.33,662.32,1929.59],\n 2008:[2626.41,3709.78,8701.34,4242.36,4376.19,7158.84,3097.12,4319.75,6085.84,16993.34,11567.42,4198.93,5318.44,3554.81,17571.98,10259.99,5082.07,5028.93,18502.2,3037.74,423.55,3057.78,5823.39,1370.03,2452.75,115.56,3861.12,1470.34,557.12,609.98,2070.76],\n 2007:[2509.4,2892.53,7201.88,3454.49,3193.67,5544.14,2475.45,3695.58,5571.06,14471.26,10154.25,3370.96,4476.42,2975.53,14647.53,8282.83,4143.06,3977.72,16004.61,2425.29,364.26,2368.53,4648.79,1124.79,2038.39,98.48,2986.46,1279.32,419.03,455.04,1647.55],\n 2006:[2191.43,2457.08,6110.43,2755.66,2374.96,4566.83,1915.29,3365.31,4969.95,12282.89,8511.51,2711.18,3695.04,2419.74,12574.03,6724.61,3365.08,3187.05,13469.77,1878.56,308.62,1871.65,3775.14,967.54,1705.83,80.1,2452.44,1043.19,331.91,351.58,1459.3],\n 2005:[2026.51,2135.07,5271.57,2357.04,1773.21,3869.4,1580.83,2971.68,4381.2,10524.96,7164.75,2245.9,3175.92,1917.47,10478.62,5514.14,2852.12,2612.57,11356.6,1510.68,240.83,1564,3067.23,821.16,1426.42,63.52,1951.36,838.56,264.61,281.05,1164.79],\n 2004:[1853.58,1685.93,4301.73,1919.4,1248.27,3061.62,1329.68,2487.04,3892.12,8437.99,6250.38,1844.9,2770.49,1566.4,8478.69,4182.1,2320.6,2190.54,9280.73,1253.7,205.6,1376.91,2489.4,681.5,1281.63,52.74,1553.1,713.3,211.7,244.05,914.47],\n 2003:[1487.15,1337.31,3417.56,1463.38,967.49,2898.89,1098.37,2084.7,3209.02,6787.11,5096.38,1535.29,2340.82,1204.33,6485.05,3310.14,1956.02,1777.74,7592.78,984.08,175.82,1135.31,2014.8,569.37,1047.66,47.64,1221.17,572.02,171.92,194.27,719.54],\n 2002:[1249.99,1069.08,2911.69,1134.31,754.78,2609.85,943.49,1843.6,2622.45,5604.49,4090.48,1337.04,2036.97,941.77,5184.98,2768.75,1709.89,1523.5,6143.4,846.89,148.88,958.87,1733.38,481.96,934.88,32.72,1007.56,501.69,144.51,153.06,603.15]\n});\n\ndataMap.dataTI = dataFormatter({\n //max : 25000,\n 2011:[12363.18,5219.24,8483.17,3960.87,5015.89,8158.98,3679.91,4918.09,11142.86,20842.21,14180.23,4975.96,6878.74,3921.2,17370.89,7991.72,7247.02,7539.54,24097.7,3998.33,1148.93,3623.81,7014.04,2781.29,3701.79,322.57,4355.81,1963.79,540.18,861.92,2245.12],\n 2010:[10600.84,4238.65,7123.77,3412.38,4209.03,6849.37,3111.12,4040.55,9833.51,17131.45,12063.82,4193.69,5850.62,3121.4,14343.14,6607.89,6053.37,6369.27,20711.55,3383.11,953.67,2881.08,6030.41,2177.07,2892.31,274.82,3688.93,1536.5,470.88,702.45,1766.69],\n 2009:[9179.19,3405.16,6068.31,2886.92,3696.65,5891.25,2756.26,3371.95,8930.85,13629.07,9918.78,3662.15,5048.49,2637.07,11768.18,5700.91,5127.12,5402.81,18052.59,2919.13,748.59,2474.44,5198.8,1885.79,2519.62,240.85,3143.74,1363.27,398.54,563.74,1587.72],\n 2008:[8375.76,2886.65,5276.04,2759.46,3212.06,5207.72,2412.26,2905.68,7872.23,11888.53,8799.31,3234.64,4346.4,2355.86,10358.64,5099.76,4466.85,4633.67,16321.46,2529.51,643.47,2160.48,4561.69,1652.34,2218.81,218.67,2699.74,1234.21,355.93,475,1421.38],\n 2007:[7236.15,2250.04,4600.72,2257.99,2467.41,4486.74,2025.44,2493.04,6821.11,9730.91,7613.46,2789.78,3770,1918.95,8620.24,4511.97,3812.34,3835.4,14076.83,2156.76,528.84,1825.21,3881.6,1312.94,1896.78,188.06,2178.2,1037.11,294.91,366.18,1246.89],\n 2006:[5837.55,1902.31,3895.36,1846.18,1934.35,3798.26,1687.07,2096.35,5508.48,7914.11,6281.86,2390.29,3022.83,1614.65,7187.26,3721.44,3111.98,3229.42,11585.82,1835.12,433.57,1649.2,3319.62,989.38,1557.91,159.76,1806.36,900.16,249.04,294.78,1058.16],\n 2005:[4854.33,1658.19,3340.54,1611.07,1542.26,3295.45,1413.83,1857.42,4776.2,6612.22,5360.1,2137.77,2551.41,1411.92,5924.74,3181.27,2655.94,2882.88,9772.5,1560.92,377.17,1440.32,2836.73,815.32,1374.62,137.24,1546.59,787.36,213.37,259.49,929.41],\n 2004:[4092.27,1319.76,2805.47,1375.67,1270,2811.95,1223.64,1657.77,4097.26,5198.03,4584.22,1963.9,2206.02,1225.8,4764.7,2722.4,2292.55,2428.95,8335.3,1361.92,335.3,1229.62,2510.3,661.8,1192.53,123.3,1234.6,688.41,193.7,227.73,833.36],\n 2003:[3435.95,1150.81,2439.68,1176.65,1000.79,2487.85,1075.48,1467.9,3404.19,4493.31,3890.79,1638.42,1949.91,1043.08,4112.43,2358.86,2003.08,1995.78,7178.94,1178.25,293.85,1081.35,2189.68,558.28,1013.76,96.76,1063.89,589.91,169.81,195.46,753.91],\n 2002:[2982.57,997.47,2149.75,992.69,811.47,2258.17,958.88,1319.4,3038.9,3891.92,3227.99,1399.02,1765.8,972.73,3700.52,1978.37,1795.93,1780.79,6343.94,1074.85,270.96,956.12,1943.68,480.37,914.5,89.56,963.62,514.83,148.83,171.14,704.5]\n});\n\ndataMap.dataEstate = dataFormatter({\n //max : 3600,\n 2011:[1074.93,411.46,918.02,224.91,384.76,876.12,238.61,492.1,1019.68,2747.89,1677.13,634.92,911.16,402.51,1838.14,987,634.67,518.04,3321.31,465.68,208.71,396.28,620.62,160.3,222.31,17.44,398.03,134.25,29.05,79.01,176.22],\n 2010:[1006.52,377.59,697.79,192,309.25,733.37,212.32,391.89,1002.5,2600.95,1618.17,532.17,679.03,340.56,1622.15,773.23,564.41,464.21,2813.95,405.79,188.33,266.38,558.56,139.64,223.45,14.54,315.95,110.02,25.41,60.53,143.44],\n 2009:[1062.47,308.73,612.4,173.31,286.65,605.27,200.14,301.18,1237.56,2025.39,1316.84,497.94,656.61,305.9,1329.59,622.98,546.11,400.11,2470.63,348.98,121.76,229.09,548.14,136.15,205.14,13.28,239.92,101.37,23.05,47.56,115.23],\n 2008:[844.59,227.88,513.81,166.04,273.3,500.81,182.7,244.47,939.34,1626.13,1052.03,431.27,506.98,281.96,1104.95,512.42,526.88,340.07,2057.45,282.96,95.6,191.21,453.63,104.81,195.48,15.08,193.27,93.8,19.96,38.85,89.79],\n 2007:[821.5,183.44,467.97,134.12,191.01,410.43,153.03,225.81,958.06,1365.71,981.42,366.57,511.5,225.96,953.69,447.44,409.65,301.8,2029.77,239.45,67.19,196.06,376.84,93.19,193.59,13.24,153.98,83.52,16.98,29.49,91.28],\n 2006:[658.3,156.64,397.14,117.01,136.5,318.54,131.01,194.7,773.61,1017.91,794.41,281.98,435.22,184.67,786.51,348.7,294.73,254.81,1722.07,192.2,44.45,158.2,336.2,80.24,165.92,11.92,125.2,73.21,15.17,25.53,68.9],\n 2005:[493.73,122.67,330.87,106,98.75,256.77,112.29,163.34,715.97,799.73,688.86,231.66,331.8,171.88,664.9,298.19,217.17,215.63,1430.37,165.05,38.2,143.88,286.23,76.38,148.69,10.02,108.62,63.78,14.1,22.97,55.79],\n 2004:[436.11,106.14,231.08,95.1,73.81,203.1,97.93,137.74,666.3,534.17,587.83,188.28,248.44,167.2,473.27,236.44,204.8,191.5,1103.75,122.52,30.64,129.12,264.3,68.3,116.54,5.8,95.9,56.84,13,20.78,53.55],\n 2003:[341.88,92.31,185.19,78.73,61.05,188.49,91.99,127.2,487.82,447.47,473.16,162.63,215.84,138.02,418.21,217.58,176.8,186.49,955.66,100.93,25.14,113.69,231.72,59.86,103.79,4.35,83.9,48.09,11.41,16.85,47.84],\n 2002:[298.02,73.04,140.89,65.83,51.48,130.94,76.11,118.7,384.86,371.09,360.63,139.18,188.09,125.27,371.13,199.31,145.17,165.29,808.16,82.83,21.45,90.48,210.82,53.49,95.68,3.42,77.68,41.52,9.74,13.46,43.04]\n});\n\ndataMap.dataFinancial = dataFormatter({\n //max : 3200,\n 2011:[2215.41,756.5,746.01,519.32,447.46,755.57,207.65,370.78,2277.4,2600.11,2730.29,503.85,862.41,357.44,1640.41,868.2,674.57,501.09,2916.13,445.37,105.24,704.66,868.15,297.27,456.23,31.7,432.11,145.05,62.56,134.18,288.77],\n 2010:[1863.61,572.99,615.42,448.3,346.44,639.27,190.12,304.59,1950.96,2105.92,2326.58,396.17,767.58,241.49,1361.45,697.68,561.27,463.16,2658.76,384.53,78.12,496.56,654.7,231.51,375.08,27.08,384.75,100.54,54.53,97.87,225.2],\n 2009:[1603.63,461.2,525.67,361.64,291.1,560.2,180.83,227.54,1804.28,1596.98,1899.33,359.6,612.2,165.1,1044.9,499.92,479.11,402.57,2283.29,336.82,65.73,389.97,524.63,194.44,351.74,23.17,336.21,88.27,45.63,75.54,198.87],\n 2008:[1519.19,368.1,420.74,290.91,219.09,455.07,147.24,177.43,1414.21,1298.48,1653.45,313.81,497.65,130.57,880.28,413.83,393.05,334.32,1972.4,249.01,47.33,303.01,411.14,151.55,277.66,22.42,287.16,72.49,36.54,64.8,171.97],\n 2007:[1302.77,288.17,347.65,218.73,148.3,386.34,126.03,155.48,1209.08,1054.25,1251.43,223.85,385.84,101.34,734.9,302.31,337.27,260.14,1705.08,190.73,34.43,247.46,359.11,122.25,168.55,11.51,231.03,61.6,27.67,51.05,149.22],\n 2006:[982.37,186.87,284.04,169.63,108.21,303.41,100.75,74.17,825.2,653.25,906.37,166.01,243.9,79.75,524.94,219.72,174.99,204.72,899.91,129.14,16.37,213.7,299.5,89.43,143.62,6.44,152.25,50.51,23.69,36.99,99.25],\n 2005:[840.2,147.4,213.47,135.07,72.52,232.85,83.63,35.03,675.12,492.4,686.32,127.05,186.12,69.55,448.36,181.74,127.32,162.37,661.81,91.93,13.16,185.18,262.26,73.67,130.5,7.57,127.58,44.73,20.36,32.25,80.34],\n 2004:[713.79,136.97,209.1,110.29,55.89,188.04,77.17,32.2,612.45,440.5,523.49,94.1,171,65.1,343.37,170.82,118.85,118.64,602.68,74,11.56,162.38,236.5,60.3,118.4,5.4,90.1,42.99,19,27.92,70.3],\n 2003:[635.56,112.79,199.87,118.48,55.89,145.38,73.15,32.2,517.97,392.11,451.54,87.45,150.09,64.31,329.71,165.11,107.31,99.35,534.28,61.59,10.68,147.04,206.24,48.01,105.48,4.74,77.87,42.31,17.98,24.8,64.92],\n 2002:[561.91,76.86,179.6,124.1,48.39,137.18,75.45,31.6,485.25,368.86,347.53,81.85,138.28,76.51,310.07,158.77,96.95,92.43,454.65,35.86,10.08,134.52,183.13,41.45,102.39,2.81,67.3,42.08,16.75,21.45,52.18]\n});\n\n\nconst option = {\n baseOption: {\n timeline: {\n axisType: 'category',\n autoPlay: false,\n data: [\n '2002-01-01','2003-01-01','2004-01-01',\n {\n value: '2005-01-01',\n tooltip: {\n formatter: '{b} GDP达到一个高度'\n },\n symbol: 'diamond',\n symbolSize: 16\n },\n '2006-01-01', '2007-01-01','2008-01-01','2009-01-01','2010-01-01',\n {\n value: '2011-01-01',\n tooltip: {\n formatter: function (params) {\n return params.name + 'GDP达到又一个高度';\n }\n },\n symbol: 'diamond',\n symbolSize: 18\n },\n ],\n label: {\n formatter : function(s) {\n return (new Date(s)).getFullYear();\n }\n }\n },\n title: {\n subtext: '数据来自国家统计局'\n },\n tooltip: {},\n legend: {\n left: 'right',\n data: ['第一产业', '第二产业', '第三产业'],\n selected: {\n 'GDP': false, '金融': false, '房地产': false\n }\n },\n calculable : true,\n grid: {\n top: 80,\n bottom: 100\n },\n xAxis: [\n {\n 'type':'category',\n 'axisLabel':{'interval':0},\n 'data':[\n '北京','\\n天津','河北','\\n山西','内蒙古','\\n辽宁','吉林','\\n黑龙江',\n '上海','\\n江苏','浙江','\\n安徽','福建','\\n江西','山东','\\n河南',\n '湖北','\\n湖南','广东','\\n广西','海南','\\n重庆','四川','\\n贵州',\n '云南','\\n西藏','陕西','\\n甘肃','青海','\\n宁夏','新疆'\n ],\n splitLine: {show: false}\n }\n ],\n yAxis: [\n {\n type: 'value',\n name: 'GDP（亿元）',\n // max: 53500\n max: 30000\n }\n ],\n series: [\n {name: 'GDP', type: 'bar'},\n {name: '金融', type: 'bar'},\n {name: '房地产', type: 'bar'},\n {name: '第一产业', type: 'bar'},\n {name: '第二产业', type: 'bar'},\n {name: '第三产业', type: 'bar'},\n {\n name: 'GDP占比',\n type: 'pie',\n center: ['75%', '35%'],\n radius: '28%'\n }\n ]\n },\n options: [\n {\n title: {text: '2002全国宏观经济指标'},\n series: [\n {data: dataMap.dataGDP['2002']},\n {data: dataMap.dataFinancial['2002']},\n {data: dataMap.dataEstate['2002']},\n {data: dataMap.dataPI['2002']},\n {data: dataMap.dataSI['2002']},\n {data: dataMap.dataTI['2002']},\n {data: [\n {name: '第一产业', value: dataMap.dataPI['2002sum']},\n {name: '第二产业', value: dataMap.dataSI['2002sum']},\n {name: '第三产业', value: dataMap.dataTI['2002sum']}\n ]}\n ]\n },\n {\n title : {text: '2003全国宏观经济指标'},\n series : [\n {data: dataMap.dataGDP['2003']},\n {data: dataMap.dataFinancial['2003']},\n {data: dataMap.dataEstate['2003']},\n {data: dataMap.dataPI['2003']},\n {data: dataMap.dataSI['2003']},\n {data: dataMap.dataTI['2003']},\n {data: [\n {name: '第一产业', value: dataMap.dataPI['2003sum']},\n {name: '第二产业', value: dataMap.dataSI['2003sum']},\n {name: '第三产业', value: dataMap.dataTI['2003sum']}\n ]}\n ]\n },\n {\n title : {text: '2004全国宏观经济指标'},\n series : [\n {data: dataMap.dataGDP['2004']},\n {data: dataMap.dataFinancial['2004']},\n {data: dataMap.dataEstate['2004']},\n {data: dataMap.dataPI['2004']},\n {data: dataMap.dataSI['2004']},\n {data: dataMap.dataTI['2004']},\n {data: [\n {name: '第一产业', value: dataMap.dataPI['2004sum']},\n {name: '第二产业', value: dataMap.dataSI['2004sum']},\n {name: '第三产业', value: dataMap.dataTI['2004sum']}\n ]}\n ]\n },\n {\n title : {text: '2005全国宏观经济指标'},\n series : [\n {data: dataMap.dataGDP['2005']},\n {data: dataMap.dataFinancial['2005']},\n {data: dataMap.dataEstate['2005']},\n {data: dataMap.dataPI['2005']},\n {data: dataMap.dataSI['2005']},\n {data: dataMap.dataTI['2005']},\n {data: [\n {name: '第一产业', value: dataMap.dataPI['2005sum']},\n {name: '第二产业', value: dataMap.dataSI['2005sum']},\n {name: '第三产业', value: dataMap.dataTI['2005sum']}\n ]}\n ]\n },\n {\n title : {text: '2006全国宏观经济指标'},\n series : [\n {data: dataMap.dataGDP['2006']},\n {data: dataMap.dataFinancial['2006']},\n {data: dataMap.dataEstate['2006']},\n {data: dataMap.dataPI['2006']},\n {data: dataMap.dataSI['2006']},\n {data: dataMap.dataTI['2006']},\n {data: [\n {name: '第一产业', value: dataMap.dataPI['2006sum']},\n {name: '第二产业', value: dataMap.dataSI['2006sum']},\n {name: '第三产业', value: dataMap.dataTI['2006sum']}\n ]}\n ]\n },\n {\n title : {text: '2007全国宏观经济指标'},\n series : [\n {data: dataMap.dataGDP['2007']},\n {data: dataMap.dataFinancial['2007']},\n {data: dataMap.dataEstate['2007']},\n {data: dataMap.dataPI['2007']},\n {data: dataMap.dataSI['2007']},\n {data: dataMap.dataTI['2007']},\n {data: [\n {name: '第一产业', value: dataMap.dataPI['2007sum']},\n {name: '第二产业', value: dataMap.dataSI['2007sum']},\n {name: '第三产业', value: dataMap.dataTI['2007sum']}\n ]}\n ]\n },\n {\n title : {text: '2008全国宏观经济指标'},\n series : [\n {data: dataMap.dataGDP['2008']},\n {data: dataMap.dataFinancial['2008']},\n {data: dataMap.dataEstate['2008']},\n {data: dataMap.dataPI['2008']},\n {data: dataMap.dataSI['2008']},\n {data: dataMap.dataTI['2008']},\n {data: [\n {name: '第一产业', value: dataMap.dataPI['2008sum']},\n {name: '第二产业', value: dataMap.dataSI['2008sum']},\n {name: '第三产业', value: dataMap.dataTI['2008sum']}\n ]}\n ]\n },\n {\n title : {text: '2009全国宏观经济指标'},\n series : [\n {data: dataMap.dataGDP['2009']},\n {data: dataMap.dataFinancial['2009']},\n {data: dataMap.dataEstate['2009']},\n {data: dataMap.dataPI['2009']},\n {data: dataMap.dataSI['2009']},\n {data: dataMap.dataTI['2009']},\n {data: [\n {name: '第一产业', value: dataMap.dataPI['2009sum']},\n {name: '第二产业', value: dataMap.dataSI['2009sum']},\n {name: '第三产业', value: dataMap.dataTI['2009sum']}\n ]}\n ]\n },\n {\n title : {text: '2010全国宏观经济指标'},\n series : [\n {data: dataMap.dataGDP['2010']},\n {data: dataMap.dataFinancial['2010']},\n {data: dataMap.dataEstate['2010']},\n {data: dataMap.dataPI['2010']},\n {data: dataMap.dataSI['2010']},\n {data: dataMap.dataTI['2010']},\n {data: [\n {name: '第一产业', value: dataMap.dataPI['2010sum']},\n {name: '第二产业', value: dataMap.dataSI['2010sum']},\n {name: '第三产业', value: dataMap.dataTI['2010sum']}\n ]}\n ]\n },\n {\n title : {text: '2011全国宏观经济指标'},\n series : [\n {data: dataMap.dataGDP['2011']},\n {data: dataMap.dataFinancial['2011']},\n {data: dataMap.dataEstate['2011']},\n {data: dataMap.dataPI['2011']},\n {data: dataMap.dataSI['2011']},\n {data: dataMap.dataTI['2011']},\n {data: [\n {name: '第一产业', value: dataMap.dataPI['2011sum']},\n {name: '第二产业', value: dataMap.dataSI['2011sum']},\n {name: '第三产业', value: dataMap.dataTI['2011sum']}\n ]}\n ]\n }\n ]\n};\n",
"name": "timeline",
"title": "时间轴",
"title-en": "Timeline"
}
]
},
"graphic": {
"desc": "<p><code class=\"codespan\">graphic</code> component enables creating graphic elements in ECharts.</p>\n<p>Those graphic type are supported.</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n<p>This example shows how to make a watermark and text block:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=line-graphic&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<p>This example use hidden graphic elements to implement dragging:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=line-draggable&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n\n<p><br></p>\n<hr>\n<p><strong>Graphic Component Configuration</strong></p>\n<p>A simple way to define a graphic element:</p>\n<pre><code class=\"lang-javascript\">myChart.setOption({\n ...,\n graphic: {\n type: &#39;image&#39;,\n ...\n }\n});\n</code></pre>\n<p>Define multiple graphic elements:</p>\n<pre><code class=\"lang-javascript\">myChart.setOption({\n ...,\n graphic: [\n { // A &#39;image&#39; element.\n type: &#39;image&#39;,\n ...\n },\n { // A &#39;text&#39; element, with id specified.\n type: &#39;text&#39;,\n id: &#39;text1&#39;,\n ...\n },\n { // A &#39;group&#39; element, in which children can be defined.\n type: &#39;group&#39;,\n children: [\n {\n type: &#39;rect&#39;,\n id: &#39;rect1&#39;,\n ...\n },\n {\n type: &#39;image&#39;,\n ...\n },\n ...\n ]\n }\n ...\n ]\n});\n\n</code></pre>\n<p>How to remove or replace existing elements by <code class=\"codespan\">setOption</code>:</p>\n<pre><code class=\"lang-javascript\">myChart.setOption({\n ...,\n graphic: [\n { // Remove the element &#39;text1&#39; defined above.\n id: &#39;text1&#39;,\n $action: &#39;remove&#39;,\n ...\n },\n { // Replace the element &#39;rect1&#39; to a new circle element.\n // Note, although in the sample above &#39;rect1&#39; is a children of a group,\n // it is not necessary to consider level relationship when setOption\n // again if you use id to specify them.\n id: &#39;rect1&#39;,\n $action: &#39;replace&#39;,\n type: &#39;circle&#39;,\n ...\n }\n ]\n});\n</code></pre>\n<p>Notice, when using <code class=\"codespan\">setOption</code> to modify existing elements, if id is not specified, new options will be mapped to existing elements by their order, which might bring unexpected result sometimes. So, generally, using id is recommended.</p>\n<p><br></p>\n<hr>\n<p><strong>Graphic Element Configuration</strong></p>\n<p>Different types of graphic elements has their own configuration respectively, but they have these common configuration below:</p>\n<pre><code class=\"lang-javascript\">{\n // id is used to specifying element when willing to update it.\n // id can be ignored if you do not need it.\n id: &#39;xxx&#39;,\n\n // Specify element type. Can not be ignored when define a element at the first time.\n type: &#39;image&#39;,\n\n // All of the properties below can be ignored and a default value will be assigned.\n\n // Specify the operation should be performed to the element when calling `setOption`.\n // Default value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.\n $action: &#39;replace&#39;,\n\n // These four properties is used to locating the element. Each property can be absolute\n // value (like 10, means 10 pixel) or precent (like &#39;12%&#39;) or &#39;center&#39;/&#39;middle&#39;.\n left: 10,\n // right: 10,\n top: &#39;center&#39;,\n // bottom: &#39;10%&#39;,\n\n shape: {\n // Here are configurations for shape, like `x`, `y`, `cx`, `cy`, `width`,\n // `height`, `r`, `points`, ...\n // Note, if `left`/`right`/`top`/`bottom` has been set, `x`/`y`/`cx`/`cy`\n // do not work here.\n },\n\n style: {\n // Here are configurations for style of the element, like `fill`, `stroke`,\n // `lineWidth`, `shadowBlur`, ...\n },\n\n // z value of the elements.\n z: 10,\n // Whether response to mouse events / touch events.\n silent: true,\n // Whether the element is visible.\n invisible: false,\n // Used to specify whether the entire transformed element (containing children if is group)\n // is confined in its container. Optional values: &#39;raw&#39;, &#39;all&#39;.\n bounding: &#39;raw&#39;,\n // Can be dragged or not.\n draggable: false,\n // Event handler, can also be onmousemove, ondrag, ... (listed below)\n onclick: function () {...}\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>Event Handlers of Graphic Element</strong></p>\n<p>These events are supported:\n<code class=\"codespan\">onclick</code>, <code class=\"codespan\">onmouseover</code>, <code class=\"codespan\">onmouseout</code>, <code class=\"codespan\">onmousemove</code>, <code class=\"codespan\">onmousewheel</code>, <code class=\"codespan\">onmousedown</code>, <code class=\"codespan\">onmouseup</code>, <code class=\"codespan\">ondrag</code>, <code class=\"codespan\">ondragstart</code>, <code class=\"codespan\">ondragend</code>, <code class=\"codespan\">ondragenter</code>, <code class=\"codespan\">ondragleave</code>, <code class=\"codespan\">ondragover</code>, <code class=\"codespan\">ondrop</code>.</p>\n<p><br></p>\n<hr>\n<p><strong>Hierarchy of Graphic Elements</strong></p>\n<p>Only <code class=\"codespan\">group</code> element has children, which enable a group of elements to be positioned and transformed together.</p>\n<p><br></p>\n<hr>\n<p><strong>Shape Configuration of Graphic Element</strong></p>\n<p>Elements with different types have different shape setting repectively. For example:</p>\n<pre><code class=\"lang-javascript\">{\n type: &#39;rect&#39;,\n shape: {\n x: 10,\n y: 10,\n width: 100,\n height: 200\n }\n},\n{\n type: &#39;circle&#39;,\n shape: {\n cx: 20,\n cy: 30,\n r: 100\n }\n},\n{\n type: &#39;image&#39;,\n style: {\n image: &#39;http://xxx.xxx.xxx/a.png&#39;,\n x: 100,\n y: 200,\n width: 230,\n height: 400\n }\n},\n{\n type: &#39;text&#39;,\n style: {\n text: &#39;This text&#39;,\n x: 100,\n y: 200\n }\n\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>Transforming and Absolutely Positioning of Graphic Element</strong></p>\n<p>Element can be transformed (translation, rotation, scale). See <a href=\"#graphic.elements.position\">position</a>, <a href=\"#graphic.elements.rotation\">rotation</a>, <a href=\"#graphic.elements.scale\">scale</a>, <a href=\"#graphic.elements.origin\">origin</a></p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n type: &#39;rect&#39;, // or any other types.\n\n // Translation, using [0, 0] by default.\n position: [100, 200],\n\n // Scale, using [1, 1] by default.\n scale: [2, 4],\n\n // Rotation, using 0 by default. Negative value means rotating clockwise.\n rotation: Math.PI / 4,\n\n // Origin point of rotation and scale, using [0, 0] by default.\n origin: [10, 20],\n\n shape: {\n // ...\n }\n}\n</code></pre>\n<ul>\n<li><p>Each element is transformed in the coordinate system of its parent, namely, transform of a element and its parent can be &quot;stacked&quot;.</p>\n</li>\n<li><p>Transformation is performed by this order:</p>\n<ol>\n<li>Translate [-el.origin[0], -el.origin[1]].</li>\n<li>Scale according to el.scale.</li>\n<li>Rotate according to el.rotation.</li>\n<li>Translate back according to el.origin.</li>\n<li>Translate according to el.position.</li>\n</ol>\n</li>\n<li>Namely, scaling and rotating firstly, and then translate. By this mechanism, translation does not affect origin of scale and rotation.</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>Relatively Positioning</strong></p>\n<p>In real application, size of a container is always not fixed. So mechanism of relative position is required. In <code class=\"codespan\">graphic</code> component, <a href=\"#graphic.elements.left\">left</a> / <a href=\"#graphic.elements.right\">right</a> / <a href=\"#graphic.elements.top\">top</a> / <a href=\"#graphic.elements.bottom\">bottom</a> / <a href=\"#graphic.elements.width\">width</a> / <a href=\"#graphic.elements.height\">height</a> are used to position element relatively.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{ // Position the image at the bottom center of its container.\n type: &#39;image&#39;,\n left: &#39;center&#39;, // Position at the center horizontally.\n bottom: &#39;10%&#39;, // Position beyond the bottom boundary 10%.\n style: {\n image: &#39;http://xxx.xxx.xxx/a.png&#39;,\n width: 45,\n height: 45\n }\n},\n{ // Position the entire rotated group at the right-bottom corner of its container.\n type: &#39;group&#39;,\n right: 0, // Position at the right boundary.\n bottom: 0, // Position at the bottom boundary.\n rotation: Math.PI / 4,\n children: [\n {\n type: &#39;rect&#39;,\n left: &#39;center&#39;, // Position at horizontal center according to its parent.\n top: &#39;middle&#39;, // Position at vertical center according to its parent.\n shape: {\n width: 190,\n height: 90\n },\n style: {\n fill: &#39;#fff&#39;,\n stroke: &#39;#999&#39;,\n lineWidth: 2,\n shadowBlur: 8,\n shadowOffsetX: 3,\n shadowOffsetY: 3,\n shadowColor: &#39;rgba(0,0,0,0.3)&#39;\n }\n },\n {\n type: &#39;text&#39;,\n left: &#39;center&#39;, // Position at horizontal center according to its parent.\n top: &#39;middle&#39;, // Position at vertical center according to its parent.\n style: {\n fill: &#39;#777&#39;,\n text: [\n &#39;This is text&#39;,\n &#39;This is text&#39;,\n &#39;Print some text&#39;\n ].join(&#39;\\n&#39;),\n font: &#39;14px Microsoft YaHei&#39;\n }\n }\n ]\n}\n</code></pre>\n<p>Note, <a href=\"graphic.elements.bounding\" target=\"_blank\">bounding</a> can be used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n"
},
"calendar": {
"desc": "<p>Calendar coordinates.</p>\n<p>In ECharts, we are very creative to achieve the calendar chart, by using the calendar coordinates to achieve the calendar chart,\nas shown in the following example, we can use calendar coordinates in heatmap, scatter, effectScatter, and graph.</p>\n<p>Example of using heatmap in calendar coordinates:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=calendar-heatmap&edit=1&reset=1\" width=\"800\" height=\"400\"><iframe />\n\n\n<p>Example of using effectScatter in calendar coordinates:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=calendar-effectscatter&edit=1&reset=1\" width=\"800\" height=\"600\"><iframe />\n\n\n<p>Example of using graph in calendar coordinates:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=calendar-graph&edit=1&reset=1\" width=\"600\" height=\"600\"><iframe />\n\n\n<p>By combining calendar coordinate system and charts, you may be able to create more wonderful effects.</p>\n<p><a href=\"https://echarts.apache.org/next/examples/en/editor.html?c=calendar-lunar&amp;edit=1&amp;reset=1\" target=\"_blank\">Display Text in Calendar</a>,\n<a href=\"https://echarts.apache.org/next/examples/en/editor.html?c=calendar-pie&amp;edit=1&amp;reset=1\" target=\"_blank\">Display Pies in Calendar</a></p>\n<hr>\n<p><strong>Calendar layout</strong></p>\n<p>Calendar coordinate system can be placed horizontally or vertically. By convention, the heatmap calendar is horizontal. But if we need bigger cell size in other cases, the total width may be too wide. So <a href=\"#calendar.orient\">calendar.orient</a> can help in this case.</p>\n<hr>\n<p><strong>Adapt to container size</strong></p>\n<p>Calendar coordinate system can be configured to adapt to container size, which is useful when page size is not sure. First of all, like other components, those location and size configurations can be specified on canlendar: <a href=\"#calendar.left\">left</a> <a href=\"#calendar.right\">right</a> <a href=\"#calendar.top\">top</a> <a href=\"bottom\" target=\"_blank\">bottom</a> <a href=\"#calendar.width\">width</a> <a href=\"#calendar.height\">height</a>, which make calendar possible to modify its size according to container size. Besides, <a href=\"#calendar.cellSize\">cellSize</a> can be specified to fix the size of each cell of calendar.</p>\n<hr>\n",
"exampleBaseOptions": [
{
"code": "\nfunction getVirtulData(year) {\n year = year || '2017';\n var date = +new Date(year + '-01-01');\n var end = +new Date((+year + 1) + '-01-01');\n var dayTime = 3600 * 24 * 1000;\n var data = [];\n for (var time = date; time < end; time += dayTime) {\n data.push([\n time,\n Math.floor(Math.random() * 10000)\n ]);\n }\n return data;\n}\n\nconst option = {\n tooltip: {},\n visualMap: {\n min: 0,\n max: 10000,\n type: 'piecewise',\n orient: 'horizontal',\n left: 'center',\n top: 65,\n textStyle: {\n color: '#000'\n }\n },\n calendar: {\n top: 120,\n left: 30,\n right: 30,\n cellSize: ['auto', 13],\n range: '2016',\n itemStyle: {\n borderWidth: 0.5\n },\n yearLabel: {show: false}\n },\n series: {\n type: 'heatmap',\n coordinateSystem: 'calendar',\n data: getVirtulData(2016)\n }\n};\n",
"name": "calendar",
"title": "日历图",
"title-en": "Calendar"
}
]
},
"dataset": {
"desc": "<p><code class=\"codespan\">dataset</code> component is published since ECharts 4. <code class=\"codespan\">dataset</code> brings convenience in data management separated with styles and enables data reuse by different series. More importantly, it enables data encoding from data to visual, which brings convenience in some scenarios.</p>\n<p>More details about <code class=\"codespan\">dataset</code> can be checked in the <a href=\"tutorial.html#Dataset\" target=\"_blank\">tutorial</a>.</p>\n"
},
"aria": {
"desc": "<p>W3C defined the Accessible Rich Internet Applications Suite (<a href=\"https://www.w3.org/WAI/intro/aria\" target=\"_blank\">WAI-ARIA</a>) to make Web content and Web applications more accessible to the disabled. From ECharts 4.0, we support ARIA by generating description for charts automatically.</p>\n<p>By default, ARIA is disabled. To enable it, you should set <a href=\"#aria.show\">aria.show</a> to be <code class=\"codespan\">true</code>. After enabling, it will generate descriptions based on charts, series, data, and so on. Users may change the generated description.</p>\n<p><strong>For example:</strong></p>\n<p>For config:</p>\n<pre><code class=\"lang-js\">option = {\n aria: {\n show: true\n },\n title: {\n text: &#39;Source of user access to a site&#39;,\n x: &#39;center&#39;\n },\n series: [\n {\n Name: &#39;access source&#39;,\n type: &#39;pie&#39;,\n data: [\n { value: 335, name: &#39;direct access&#39; },\n { value: 310, name: &#39;mail marketing&#39; },\n { value: 234, name: &#39;union ad&#39; },\n { value: 135, name: &#39;video ad&#39; },\n { value: 1548, name: &#39;search engine&#39; }\n ]\n }\n ]\n};\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=doc-example/aria-pie&edit=1&reset=1\" width=\"700\" height=\"300\"><iframe />\n\n\n<p>There should be an <code class=\"codespan\">aria-label</code> attribute on the chart DOM, which can help the disabled understand the content of charts with the help of certain devices. The value of the label is:</p>\n<pre><code>This is a chart of &quot;Source of user access to a site.&quot; The chart type is a pie chart that indicates the source of the visit. The data is - direct access data is 335, mail marketing data is 310, union ad data is 234, video ad data is 135, search engine data is 1548.\n</code></pre><p>The default language is in Chinese, but you can configure it with templates. The following document shows how to do it.</p>\n"
},
"series-line": {
"desc": "<p><strong>broken line chart</strong></p>\n<p>Broken line chart relates all the data points <a href=\"#series-line.symbol\">symbol</a> by broken lines, which is used to show the trend of data changing. It could be used in both <a href=\"#grid\">rectangular coordinate</a> and<a href=\"#polar\">polar coordinate</a>.</p>\n<p><strong>Tip:</strong> When <a href=\"#series-line.areaStyle\">areaStyle</a> is set, area chart will be drew.</p>\n<p><strong>Tip:</strong> With <a href=\"#visualMap-piecewise\">visualMap</a> component, Broken line / area chart can have different colors on different sections, as below:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=line-aqi&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n",
"exampleBaseOptions": [
{
"code": "\nconst option = {\n xAxis: {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {},\n series: [{\n data: [820, 932, 901, 934, 1290, 1330, 1320],\n type: 'line'\n }]\n};\n",
"name": "cartesian-line",
"title": "基础折线图",
"title-en": "Basic Line Chart"
},
{
"code": "\nconst option = {\n xAxis: {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {},\n series: [{\n data: [820, 932, 901, '-', 1290, 1330, 1320],\n type: 'line'\n }]\n};\n",
"name": "cartesian-line-empty-data",
"title": "有空数据的折线图",
"title-en": "Line with Empty Data"
}
]
},
"series-bar": {
"desc": "<p><strong>bar chart</strong></p>\n<p>Bar chart shows different data through the height of a bar, which is used in <a href=\"#grid\">rectangular coordinate</a> with at least 1 category axis.</p>\n",
"exampleBaseOptions": [
{
"code": "\nconst option = {\n tooltip: {},\n legend: {},\n xAxis: {\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {},\n series: [{\n name: 'Sale',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20, 4]\n }]\n};\n",
"name": "cartesian-bar",
"title": "直角坐标系上的柱状图",
"title-en": "Bar on Cartesian"
},
{
"code": "\nconst option = {\n angleAxis: {\n max: 30\n },\n radiusAxis: {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n z: 10\n },\n polar: {},\n series: [{\n name: 'Sale',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20, 4],\n coordinateSystem: 'polar'\n }],\n legend: {},\n};\n",
"name": "polar-bar",
"title": "极坐标系上的柱状图",
"title-en": "Bar on Polar"
},
{
"code": "\noption = {\n legend: {\n data: ['Food', 'Cloth', 'Book']\n },\n grid: {\n left: '3%',\n right: '4%',\n bottom: '3%',\n containLabel: true\n },\n xAxis: {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {\n type: 'value'\n },\n series: [\n {\n name: 'Food',\n type: 'bar',\n data: [320, 302, 301, 334, 390, 330, 320]\n },\n {\n name: 'Cloth',\n type: 'bar',\n data: [150, 212, 201, 154, 190, 330, 410]\n },\n {\n name: 'Book',\n type: 'bar',\n data: [820, 832, 901, 934, 1290, 1330, 1320]\n }\n ]\n};\n",
"name": "cartesian-bar-multiple-series",
"title": "多系列柱状图",
"title-en": "Multiple Series"
}
]
},
"series-pie": {
"desc": "<p><strong>pie chart</strong></p>\n<p>The pie chart is mainly used for showing proportion of different categories. Each arc length represents the proportion of data quantity.</p>\n<p><strong>Tip:</strong> The pie chart is more suitable for illustrating the numerical proportion. If you just to present the numerical differences of various categories, the <a href=\"bar\" target=\"_blank\">bar graph</a> chart is more suggested. Because compared to tiny length difference, people is less sensitive to the minor radian difference. Otherwise, it can also be shown as Nightingale chart by using the <a href=\"#series-pie.roseType\">roseType</a> to distinguish different data through radius.</p>\n<p>Since ECharts v4.6.0, we provide <code class=\"codespan\">&#39;labelLine&#39;</code> and <code class=\"codespan\">&#39;edge&#39;</code> two extra layouts. Check <a href=\"#series-pie.label.alignTo\">label.alignTo</a> for more information.</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=pie-alignTo&reset=1&edit=1\" width=\"900\" height=\"250\"><iframe />\n\n\n<p>For multiple pie series in a single chart, you may use <a href=\"#series-pie.left\">left</a>, <a href=\"#series-pie.right\">right</a>, <a href=\"#series-pie.top\">top</a>, <a href=\"#series-pie.bottom\">bottom</a>, <a href=\"#series-pie.width\">width</a>, and <a href=\"#series-pie.height\">height</a> to locate the pies. Percetage values like <a href=\"#series-pie.radius\">radius</a> or <a href=\"#series-pie.label.margin\">label.margin</a> are relative to the viewport defined by this setting.</p>\n<p><strong> The below example shows a customized Nightingale chart: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=pie-custom&edit=1&reset=1\" width=\"500\" height=\"400\"><iframe />\n\n",
"exampleBaseOptions": [
{
"code": "\nconst option = {\n legend: {\n orient: 'vertical',\n left: 'left',\n data: ['Apple', 'Grapes', 'Pineapples', 'Oranges', 'Bananas']\n },\n series: [\n {\n type: 'pie',\n data: [\n {value: 335, name: 'Apple'},\n {value: 310, name: 'Grapes'},\n {value: 234, name: 'Pineapples'},\n {value: 135, name: 'Oranges'},\n {value: 1548, name: 'Bananas'}\n ]\n }\n ]\n};\n\n",
"name": "pie",
"title": "基础饼图",
"title-en": "Basic Pie"
}
]
},
"series-scatter": {
"desc": "<p>Scatter (bubble) chart . The scatter chart in <a href=\"#grid\">rectangular coordinate</a> could be used to present the relation between <code class=\"codespan\">x</code> and <code class=\"codespan\">y</code>. If data have multiple dimensions, the values of the other dimensions can be visualized through <a href=\"#series-scatter.symbol\">symbol</a> with various sizes and colors, which becomes a bubble chart. These can be done by using with <a href=\"#visualMap\">visualMap</a> component.</p>\n<p>It could be used with <a href=\"#grid\">rectangular coordinate</a> and <a href=\"#polar\">polar coordinate</a> and <a href=\"#geo\">geographical coordinate</a>.</p>\n",
"exampleBaseOptions": [
{
"code": "\nconst option = {\n legend: {},\n grid: {\n left: '3%',\n right: '7%',\n bottom: '3%',\n containLabel: true\n },\n xAxis: {\n type: 'value',\n scale: true,\n axisLabel: {\n formatter: '{value} cm'\n },\n splitLine: {\n show: false\n }\n },\n yAxis: {\n type: 'value',\n scale: true,\n axisLabel: {\n formatter: '{value} kg'\n },\n splitLine: {\n show: false\n }\n },\n series: [\n {\n name: 'Male',\n type: 'scatter',\n data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],[181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],[180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],[184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],[176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],[178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],[183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],[170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],[186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],[182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],[169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],[163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],[177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],[167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],[171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],[174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],[180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],[180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],[175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],[176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],[184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],[157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],[165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],[185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],[177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],[188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],[166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],[185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],[190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],[176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],[172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],[167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],[172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],[193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],[167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],[188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],[171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],[182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],[188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],[175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],[177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],[174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],[167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],[175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],[177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],[174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],[174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],[180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],[170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],[180.3, 83.2], [180.3, 83.2]\n ]\n }\n ]\n};\n",
"name": "scatter",
"title": "基础散点图",
"title-en": "Basic Scatter"
},
{
"code": "\nconst option = {\n title: {\n text: '1990 与 2015 年各国家人均寿命与 GDP'\n },\n legend: {\n right: 10,\n data: ['1990', '2015']\n },\n xAxis: {},\n yAxis: {},\n series: [{\n name: '1990',\n type: 'scatter',\n data: [[28604,77,17096869,'Australia',1990],[31163,77.4,27662440,'Canada',1990],[1516,68,1154605773,'China',1990],[13670,74.7,10582082,'Cuba',1990],[28599,75,4986705,'Finland',1990],[29476,77.1,56943299,'France',1990],[31476,75.4,78958237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870601776,'India',1990],[29550,79.1,122249285,'Japan',1990],[2076,67.9,20194354,'North Korea',1990],[12087,72,42972254,'South Korea',1990],[24021,75.4,3397534,'New Zealand',1990],[43296,76.8,4240375,'Norway',1990],[10088,70.8,38195258,'Poland',1990],[19349,69.6,147568552,'Russia',1990],[10670,67.3,53994605,'Turkey',1990],[26424,75.7,57110117,'United Kingdom',1990],[37062,75.4,252847810,'United States',1990]],\n symbolSize: function (data) {\n return Math.sqrt(data[2]) / 5e2;\n }\n }, {\n name: '2015',\n data: [[44056,81.8,23968973,'Australia',2015],[43294,81.7,35939927,'Canada',2015],[13334,76.9,1376048943,'China',2015],[21291,78.5,11389562,'Cuba',2015],[38923,80.8,5503457,'Finland',2015],[37599,81.9,64395345,'France',2015],[44053,81.1,80688545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311050527,'India',2015],[36162,83.5,126573481,'Japan',2015],[1390,71.4,25155317,'North Korea',2015],[34644,80.7,50293439,'South Korea',2015],[34186,80.6,4528526,'New Zealand',2015],[64304,81.6,5210967,'Norway',2015],[24787,77.3,38611794,'Poland',2015],[23038,73.13,143456918,'Russia',2015],[19360,76.5,78665830,'Turkey',2015],[38225,81.4,64715810,'United Kingdom',2015],[53354,79.1,321773631,'United States',2015]],\n type: 'scatter',\n symbolSize: function (data) {\n return Math.sqrt(data[2]) / 5e2;\n }\n }]\n};\n",
"name": "scatter-bubble",
"title": "气泡图"
}
]
},
"series-effectScatter": {
"desc": "<p>The scatter (bubble) graph with ripple animation. The special animation effect can visually highlights some data.</p>\n<p><strong>Tip:</strong> The effects of map was achieved through markPoint in ECharts 2.x. However, in ECharts 3, effectScatter on geographic coordinate is recommended for achieving that effects of map.</p>\n",
"exampleBaseOptions": [
{
"code": "\nconst option = {\n xAxis: {},\n yAxis: {\n scale: true\n },\n series: [{\n name: '1990',\n type: 'effectScatter',\n data: [[28604,77,17096869,'Australia',1990],[31163,77.4,27662440,'Canada',1990],[1516,68,1154605773,'China',1990],[13670,74.7,10582082,'Cuba',1990],[28599,75,4986705,'Finland',1990],[29476,77.1,56943299,'France',1990],[31476,75.4,78958237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870601776,'India',1990],[29550,79.1,122249285,'Japan',1990],[2076,67.9,20194354,'North Korea',1990],[12087,72,42972254,'South Korea',1990],[24021,75.4,3397534,'New Zealand',1990],[43296,76.8,4240375,'Norway',1990],[10088,70.8,38195258,'Poland',1990],[19349,69.6,147568552,'Russia',1990],[10670,67.3,53994605,'Turkey',1990],[26424,75.7,57110117,'United Kingdom',1990],[37062,75.4,252847810,'United States',1990]],\n symbolSize: function (data) {\n return Math.sqrt(data[2]) / 5e2;\n }\n }]\n};\n",
"name": "effectScatter-bubble",
"title": "特效气泡图",
"title-en": "Bubble Chart with Effect"
}
]
},
"series-radar": {
"desc": "<p><strong>radar chart</strong></p>\n<p>Radar chart is mainly used to show multi-variable data, such as the analysis of a football player&#39;s varied attributes. It relies <a href=\"#radar\">radar</a> component.</p>\n<p>Here is the example of AQI data which is presented in radar chart.</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=radar-aqi&edit=1&reset=1\" width=\"600\" height=\"500\"><iframe />\n\n",
"exampleBaseOptions": [
{
"code": "\nconst option = {\n title: {\n text: '基础雷达图'\n },\n tooltip: {},\n legend: {\n data: ['Allocated Budget', 'Actual Spending']\n },\n radar: {\n indicator: [\n { name: 'sales', max: 6500},\n { name: 'Administration', max: 16000},\n { name: 'Information Techology', max: 30000},\n { name: 'Customer Support', max: 38000},\n { name: 'Development', max: 52000},\n { name: 'Marketing', max: 25000}\n ]\n },\n series: [{\n name: '预算 vs 开销（Budget vs spending）',\n type: 'radar',\n data: [\n {\n value: [4300, 10000, 28000, 35000, 50000, 19000],\n name: 'Allocated Budget'\n },\n {\n value: [5000, 14000, 28000, 31000, 42000, 21000],\n name: 'Actual Spending'\n }\n ]\n }]\n};\n",
"name": "radar",
"title": "基础雷达图",
"title-en": "Basic Radar"
}
]
},
"series-tree": {
"desc": "<p><strong>Tree Diagram</strong></p>\n<p>The tree diagram is mainly used to visualize the tree data structure, which is a special hierarchical type with a unique root node, left subtree, and right subtree.</p>\n<p><strong>Note: Forests are not currently supported directly in a single series, and can be implemented by configuring multiple series in an option</strong></p>\n<p><strong>Tree example：</strong></p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=tree-vertical&edit=1&reset=1\" width=\"900\" height=\"780\"><iframe />\n\n\n<p><strong>Multiple series are combined into forest：</strong></p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=tree-legend&edit=1&reset=1\" width=\"800\" height=\"680\"><iframe />\n\n",
"exampleBaseOptions": [
{
"code": "\nconst option = {\n series: [{\n type: 'tree',\n data: [{\n name: 'root',\n children: [{\n name: 'Child A',\n children: [{\n name: 'Leaf C'\n }, {\n name: 'Leaf D'\n }, {\n name: 'Leaf E'\n }, {\n name: 'Leaf F'\n }]\n }, {\n name: 'Child B',\n children: [{\n name: 'Leaf G'\n }, {\n name: 'Leaf H'\n }]\n }, {\n name: 'Child D'\n }, {\n name: 'Child F',\n children: [{\n name: 'Leaf J'\n }, {\n name: 'Leaf K'\n }]\n }]\n }],\n label: {\n position: 'right'\n }\n }]\n}\n",
"name": "tree",
"title": "基础树图",
"title-en": "Basic Tree"
}
]
},
"series-treemap": {
"desc": "<p><a href=\"https://en.wikipedia.org/wiki/Treemapping\" target=\"_blank\">Treemap</a> is a common way to present &quot;hierarchical data&quot; or &quot;tree data&quot;. It primarily highlights the important nodes at all hierarchies in 『Tree』with area.</p>\n<p><strong>Example:</strong></p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=treemap-obama&edit=1&reset=1\" width=\"700\" height=\"580\"><iframe />\n\n\n\n\n<p><strong>Visual Mapping:</strong></p>\n<p>treemap maps the numerical values to area.</p>\n<p>Moreover, it is able to map some dimensions of data to other visual channel, like colors, lightness of colors and etc.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><strong>Drill Down:</strong></p>\n<p>The feature <code class=\"codespan\">drill down</code> means: when clicking a tree node, this node will be set as root and its children will be shown. When <a href=\"#series-treemap.leafDepth\">leafDepth</a> is set, this feature is enabled.</p>\n<p><strong>An example about drill down:</strong></p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=treemap-drill-down&edit=1&reset=1\" width=\"800\" height=\"500\"><iframe />\n\n\n\n<p>Notice: There are some difference in treemap configuration between ECharts3 and ECharts2. Some immature configuration ways are no longer supported:</p>\n<ul>\n<li><p>The position method using <code class=\"codespan\">center/size</code> is no longer supported, and <code class=\"codespan\">left/top/bottom/right/width/height</code> are used to position treemap, as other components do.</p>\n</li>\n<li><p>The configuration item <code class=\"codespan\">breadcrumb</code> is moved outside <code class=\"codespan\">itemStyle/itemStyle.emphasis</code>, and it is in the same level with <code class=\"codespan\">itemStyle</code> now.</p>\n</li>\n<li><p>The configuration item <code class=\"codespan\">root</code> is not avaliable temporarily.User can zoom treemap to see some tiny or deep descendants, or using <a href=\"#series-treemap.leafDepth\">leafDepth</a> to enable the feature of &quot;drill down&quot;.</p>\n</li>\n<li><p>The configuration item <code class=\"codespan\">label</code> is moved outside the <code class=\"codespan\">itemStyle/itemStyle.emphasis</code>, and it is in the same level with <code class=\"codespan\">itemStyle</code> now.</p>\n</li>\n<li><p>The configuration items <code class=\"codespan\">itemStyle.childBorderWidth</code> and <code class=\"codespan\">itemStyle.childBorderColor</code> are not supported anymore (because in this way only 2 levels can be defined). <a href=\"#series-treemap.levels\">series-treemap.levels</a> is used to define all levels now.</p>\n</li>\n</ul>\n",
"exampleBaseOptions": [
{
"code": "\nconst data = [{\n name: 'Food',\n children: [{\n value: 3,\n name: 'Fruit',\n children: [{\n value: 1,\n name: 'Apple'\n }, {\n value: 2,\n name: 'Orange',\n children: [{\n name: 'Seville Orange',\n value: 1\n }, {\n name: 'Blood Orange',\n value: 1\n }]\n }]\n }, {\n value: 9,\n name: 'Meat',\n children: [{\n value: 6,\n name: 'Beaf',\n children: [{\n name: 'Sirloin',\n value: 1\n }, {\n name: 'Rib',\n value: 1\n }, {\n name: 'Chuck',\n value: 1\n }, {\n name: 'Shank',\n value: 1\n }]\n }, {\n value: 2,\n name: 'Chicken',\n children: [{\n name: 'Wings',\n value: 1\n }]\n }, {\n name: 'Breast',\n value: 1\n }]\n }]\n}, {\n value: 6,\n name: 'Drinks',\n children: [{\n value: 3,\n name: 'Wine',\n children: [{\n name: 'USA',\n value: 2\n }, {\n name: 'Europe',\n children: [{\n name: 'Germany',\n value: 1\n }]\n }]\n }, {\n name: 'Soft Drink',\n children: [{\n value: 3,\n name: 'Juice',\n children: [{\n name: 'Apple Juice',\n value: 1\n }, {\n name: 'Orange Juice',\n value: 2\n }]\n }]\n }]\n}, {\n value: 6,\n name: 'Fashion',\n children: [{\n name: 'Clothing',\n children: [{\n name: 'Shirts',\n value: 1\n }, {\n name: 'Jackets',\n value: 3,\n children: [{\n name: 'Men',\n value: 1\n }, {\n name: 'Woman',\n value: 1\n }]\n }, {\n value: 2,\n name: 'Coats',\n children: [{\n name: 'Men',\n value: 1\n }, {\n name: 'Woman',\n value: 1\n }]\n }]\n }]\n}, {\n name: 'Computers',\n children: [{\n name: 'Components',\n value: 4,\n children: [{\n name: 'Barebones',\n value: 1\n }, {\n value: 2,\n name: 'External',\n children: [{\n name: 'Hard Drives',\n value: 2\n }]\n }, {\n name: 'Monitors',\n value: 1\n }]\n }, {\n value: 3,\n name: 'Other',\n children: [{\n name: 'USB',\n value: 1,\n }, {\n name: 'Cases'\n }, {\n name: 'Sound Cards',\n value: 1\n }]\n }]\n}];\n\nconst option = {\n series: {\n type: 'treemap',\n data: data\n }\n};\n\n",
"name": "treemap",
"title": "基础矩形树图",
"title-en": "Basic Treemap"
}
]
},
"series-sunburst": {
"desc": "<p><a href=\"https://en.wikipedia.org/wiki/Pie_chart#Ring_chart_/_Sunburst_chart_/_Multilevel_pie_chart\" target=\"_blank\">Sunburst Chart</a> is composed of multiple pie charts. From the view of data structure, inner rings are the parent nodes of outer rings. Therefore, it can show the partial-overall relationship as <a href=\"#series-pie\">Pie</a> charts, and also level relation as <a href=\"#series-treemap\">Treemap</a> charts.</p>\n<p><strong>For example:</strong></p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=sunburst-monochrome&edit=1&reset=1\" width=\"700\" height=\"500\"><iframe />\n\n\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=sunburst-drink&edit=1&reset=1\" width=\"700\" height=\"700\"><iframe />\n\n\n<p><strong>Data mining</strong></p>\n<p>Sunburst charts support data mining by default. That means, when a user clicks a sector, it will be used as root node, and there will be a circle in the center for return to parent node. If data mining is not needed, it can be disabled by <a href=\"#series-treemap.nodeClick\">series-sunburst.nodeClick</a>.</p>\n",
"exampleBaseOptions": [
{
"code": "\nconst data = [{\n name: 'Food',\n children: [{\n value: 3,\n name: 'Fruit',\n children: [{\n value: 1,\n name: 'Apple'\n }, {\n value: 2,\n name: 'Orange',\n children: [{\n name: 'Seville Orange',\n value: 1\n }, {\n name: 'Blood Orange',\n value: 1\n }]\n }]\n }, {\n value: 9,\n name: 'Meat',\n children: [{\n value: 6,\n name: 'Beaf',\n children: [{\n name: 'Sirloin',\n value: 1\n }, {\n name: 'Rib',\n value: 1\n }, {\n name: 'Chuck',\n value: 1\n }, {\n name: 'Shank',\n value: 1\n }]\n }, {\n value: 2,\n name: 'Chicken',\n children: [{\n name: 'Wings',\n value: 1\n }]\n }, {\n name: 'Breast',\n value: 1\n }]\n }]\n}, {\n value: 6,\n name: 'Drinks',\n children: [{\n value: 3,\n name: 'Wine',\n children: [{\n name: 'USA',\n value: 2\n }, {\n name: 'Europe',\n children: [{\n name: 'Germany',\n value: 1\n }]\n }]\n }, {\n name: 'Soft Drink',\n children: [{\n value: 3,\n name: 'Juice',\n children: [{\n name: 'Apple Juice',\n value: 1\n }, {\n name: 'Orange Juice',\n value: 2\n }]\n }]\n }]\n}, {\n value: 6,\n name: 'Fashion',\n children: [{\n name: 'Clothing',\n children: [{\n name: 'Shirts',\n value: 1\n }, {\n name: 'Jackets',\n value: 3,\n children: [{\n name: 'Men',\n value: 1\n }, {\n name: 'Woman',\n value: 1\n }]\n }, {\n value: 2,\n name: 'Coats',\n children: [{\n name: 'Men',\n value: 1\n }, {\n name: 'Woman',\n value: 1\n }]\n }]\n }]\n}, {\n name: 'Computers',\n children: [{\n name: 'Components',\n value: 4,\n children: [{\n name: 'Barebones',\n value: 1\n }, {\n value: 2,\n name: 'External',\n children: [{\n name: 'Hard Drives',\n value: 2\n }]\n }, {\n name: 'Monitors',\n value: 1\n }]\n }, {\n value: 3,\n name: 'Other',\n children: [{\n name: 'USB',\n value: 1,\n }, {\n name: 'Cases'\n }, {\n name: 'Sound Cards',\n value: 1\n }]\n }]\n}];\n\nconst option = {\n series: {\n type: 'sunburst',\n data: data\n }\n};\n\n",
"name": "sunburst",
"title": "基础旭日图",
"title-en": "Basic Sunburst"
}
]
},
"series-boxplot": {
"desc": "<p><a href=\"https://en.wikipedia.org/wiki/Box_plot\" target=\"_blank\">Boxplot</a> is a convenient way of graphically depicting groups of numerical data through their quartiles.</p>\n<p><strong>Example:</strong></p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=boxplot-light-velocity&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<p><br>\nMultiple <code class=\"codespan\">series</code> can be displayed in the same coordinate system. Please refer to <a href=\"https://echarts.apache.org/next/examples/en/editor.html?c=boxplot-multi&amp;edit=1&amp;reset=1\" target=\"_blank\">this example</a>.</p>\n<p><br>\n<br></p>\n",
"exampleBaseOptions": [
{
"code": "\nconst option = {\n title: [{\n text: \"Michelson-Morley Experiment\",\n left: \"center\"\n }\n ],\n xAxis: {\n type: \"category\",\n data: [\"0\", \"1\", \"2\", \"3\", \"4\"],\n boundaryGap: true,\n nameGap: 30,\n splitArea: {\n show: false\n },\n axisLabel: {\n formatter: \"expr {value}\"\n },\n splitLine: {\n show: false\n },\n },\n yAxis: {\n type: \"value\",\n name: \"km/s minus 299,000\",\n splitArea: {\n show: true,\n },\n },\n series: [{\n name: \"boxplot\",\n type: \"boxplot\",\n data: [\n [655, 850, 940, 980, 1070],\n [760, 800, 845, 885, 960],\n [780, 840, 855, 880, 940],\n [720, 767.5, 815, 865, 920],\n [740, 807.5, 810, 870, 950],\n ]\n }]\n}\n",
"name": "boxplot",
"title": "盒须图",
"title-en": "Boxplot"
}
]
},
"series-candlestick": {
"desc": "<p>A <a href=\"https://en.wikipedia.org/wiki/Candlestick_chart\" target=\"_blank\">candlestick</a> chart (also called Japanese candlestick chart) is a style of financial chart used to describe price movements of a security, derivative, or currency.</p>\n<p>ECharts3 supports both <code class=\"codespan\">&#39;candlestick&#39;</code> and <code class=\"codespan\">&#39;k&#39;</code> in <a href=\"#(series.type\">series.type</a> (<code class=\"codespan\">&#39;k&#39;</code> would automatically turns into <code class=\"codespan\">&#39;candlestick&#39;</code>).</p>\n<p><strong>An example:</strong></p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=candlestick-sh&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n<p><br>\n<strong>About color of increase and decrease</strong></p>\n<p>Different countries or regions have different implications on the color of candle stick chart. It may use red to imply increasing with red and decreasing with blue (in China mainland, Taiwan, Japan, Koera, and so on), or to imply increasing with green and decreasing with red (in Europe, North America, Hong Kong, Singapore, and so on). Besides color, the increase and decrease of stock may also be represented with candle stick with or without filling colors.</p>\n<p>We use red to represent increasing and blue decreasing by default. If you want to change the configuration, you may change the following parameters.</p>\n<ul>\n<li><a href=\"#series-candlestick.itemStyle.color\">series-candlestick.itemStyle.color</a>: fill color for bullish candle stick (namely, increase)</li>\n<li><a href=\"#series-candlestick.itemStyle.color0\">series-candlestick.itemStyle.color0</a>: fill color for bearish candle stick (namely, decrease)</li>\n<li><a href=\"#series-candlestick.itemStyle.borderColor\">series-candlestick.itemStyle.borderColor</a>: border color for bullish candle stick (namely, increase)</li>\n<li><a href=\"series-candlestick.itemStyle.borderColor0\" target=\"_blank\">series-candlestick.itemStyle.borderColor0</a>: border color for bearish candle stick (namely, decrease)</li>\n</ul>\n<p><br>\n<br></p>\n",
"exampleBaseOptions": [
{
"code": "\nvar upColor = '#ec0000';\nvar upBorderColor = '#8A0000';\nvar downColor = '#00da3c';\nvar downBorderColor = '#008F28';\n\n\n// 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)\nvar data0 = splitData([\n ['2013/1/24', 2320.26,2320.26,2287.3,2362.94],\n ['2013/1/25', 2300,2291.3,2288.26,2308.38],\n ['2013/1/28', 2295.35,2346.5,2295.35,2346.92],\n ['2013/1/29', 2347.22,2358.98,2337.35,2363.8],\n ['2013/1/30', 2360.75,2382.48,2347.89,2383.76],\n ['2013/1/31', 2383.43,2385.42,2371.23,2391.82],\n ['2013/2/1', 2377.41,2419.02,2369.57,2421.15],\n ['2013/2/4', 2425.92,2428.15,2417.58,2440.38],\n ['2013/2/5', 2411,2433.13,2403.3,2437.42],\n ['2013/2/6', 2432.68,2434.48,2427.7,2441.73],\n ['2013/2/7', 2430.69,2418.53,2394.22,2433.89],\n ['2013/2/8', 2416.62,2432.4,2414.4,2443.03],\n ['2013/2/18', 2441.91,2421.56,2415.43,2444.8],\n ['2013/2/19', 2420.26,2382.91,2373.53,2427.07],\n ['2013/2/20', 2383.49,2397.18,2370.61,2397.94],\n ['2013/2/21', 2378.82,2325.95,2309.17,2378.82],\n ['2013/2/22', 2322.94,2314.16,2308.76,2330.88],\n ['2013/2/25', 2320.62,2325.82,2315.01,2338.78],\n ['2013/2/26', 2313.74,2293.34,2289.89,2340.71],\n ['2013/2/27', 2297.77,2313.22,2292.03,2324.63],\n ['2013/2/28', 2322.32,2365.59,2308.92,2366.16],\n ['2013/3/1', 2364.54,2359.51,2330.86,2369.65],\n ['2013/3/4', 2332.08,2273.4,2259.25,2333.54],\n ['2013/3/5', 2274.81,2326.31,2270.1,2328.14],\n ['2013/3/6', 2333.61,2347.18,2321.6,2351.44],\n ['2013/3/7', 2340.44,2324.29,2304.27,2352.02],\n ['2013/3/8', 2326.42,2318.61,2314.59,2333.67],\n ['2013/3/11', 2314.68,2310.59,2296.58,2320.96],\n ['2013/3/12', 2309.16,2286.6,2264.83,2333.29],\n ['2013/3/13', 2282.17,2263.97,2253.25,2286.33],\n ['2013/3/14', 2255.77,2270.28,2253.31,2276.22],\n ['2013/3/15', 2269.31,2278.4,2250,2312.08],\n ['2013/3/18', 2267.29,2240.02,2239.21,2276.05],\n ['2013/3/19', 2244.26,2257.43,2232.02,2261.31],\n ['2013/3/20', 2257.74,2317.37,2257.42,2317.86],\n ['2013/3/21', 2318.21,2324.24,2311.6,2330.81],\n ['2013/3/22', 2321.4,2328.28,2314.97,2332],\n ['2013/3/25', 2334.74,2326.72,2319.91,2344.89],\n ['2013/3/26', 2318.58,2297.67,2281.12,2319.99],\n ['2013/3/27', 2299.38,2301.26,2289,2323.48],\n ['2013/3/28', 2273.55,2236.3,2232.91,2273.55],\n ['2013/3/29', 2238.49,2236.62,2228.81,2246.87],\n ['2013/4/1', 2229.46,2234.4,2227.31,2243.95],\n ['2013/4/2', 2234.9,2227.74,2220.44,2253.42],\n ['2013/4/3', 2232.69,2225.29,2217.25,2241.34],\n ['2013/4/8', 2196.24,2211.59,2180.67,2212.59],\n ['2013/4/9', 2215.47,2225.77,2215.47,2234.73],\n ['2013/4/10', 2224.93,2226.13,2212.56,2233.04],\n ['2013/4/11', 2236.98,2219.55,2217.26,2242.48],\n ['2013/4/12', 2218.09,2206.78,2204.44,2226.26],\n ['2013/4/15', 2199.91,2181.94,2177.39,2204.99],\n ['2013/4/16', 2169.63,2194.85,2165.78,2196.43],\n ['2013/4/17', 2195.03,2193.8,2178.47,2197.51],\n ['2013/4/18', 2181.82,2197.6,2175.44,2206.03],\n ['2013/4/19', 2201.12,2244.64,2200.58,2250.11],\n ['2013/4/22', 2236.4,2242.17,2232.26,2245.12],\n ['2013/4/23', 2242.62,2184.54,2182.81,2242.62],\n ['2013/4/24', 2187.35,2218.32,2184.11,2226.12],\n ['2013/4/25', 2213.19,2199.31,2191.85,2224.63],\n ['2013/4/26', 2203.89,2177.91,2173.86,2210.58],\n ['2013/5/2', 2170.78,2174.12,2161.14,2179.65],\n ['2013/5/3', 2179.05,2205.5,2179.05,2222.81],\n ['2013/5/6', 2212.5,2231.17,2212.5,2236.07],\n ['2013/5/7', 2227.86,2235.57,2219.44,2240.26],\n ['2013/5/8', 2242.39,2246.3,2235.42,2255.21],\n ['2013/5/9', 2246.96,2232.97,2221.38,2247.86],\n ['2013/5/10', 2228.82,2246.83,2225.81,2247.67],\n ['2013/5/13', 2247.68,2241.92,2231.36,2250.85],\n ['2013/5/14', 2238.9,2217.01,2205.87,2239.93],\n ['2013/5/15', 2217.09,2224.8,2213.58,2225.19],\n ['2013/5/16', 2221.34,2251.81,2210.77,2252.87],\n ['2013/5/17', 2249.81,2282.87,2248.41,2288.09],\n ['2013/5/20', 2286.33,2299.99,2281.9,2309.39],\n ['2013/5/21', 2297.11,2305.11,2290.12,2305.3],\n ['2013/5/22', 2303.75,2302.4,2292.43,2314.18],\n ['2013/5/23', 2293.81,2275.67,2274.1,2304.95],\n ['2013/5/24', 2281.45,2288.53,2270.25,2292.59],\n ['2013/5/27', 2286.66,2293.08,2283.94,2301.7],\n ['2013/5/28', 2293.4,2321.32,2281.47,2322.1],\n ['2013/5/29', 2323.54,2324.02,2321.17,2334.33],\n ['2013/5/30', 2316.25,2317.75,2310.49,2325.72],\n ['2013/5/31', 2320.74,2300.59,2299.37,2325.53],\n ['2013/6/3', 2300.21,2299.25,2294.11,2313.43],\n ['2013/6/4', 2297.1,2272.42,2264.76,2297.1],\n ['2013/6/5', 2270.71,2270.93,2260.87,2276.86],\n ['2013/6/6', 2264.43,2242.11,2240.07,2266.69],\n ['2013/6/7', 2242.26,2210.9,2205.07,2250.63],\n ['2013/6/13', 2190.1,2148.35,2126.22,2190.1]\n]);\n\n\nfunction splitData(rawData) {\n var categoryData = [];\n var values = []\n for (var i = 0; i < rawData.length; i++) {\n categoryData.push(rawData[i].splice(0, 1)[0]);\n values.push(rawData[i])\n }\n return {\n categoryData: categoryData,\n values: values\n };\n}\n\nfunction calculateMA(dayCount) {\n var result = [];\n for (var i = 0, len = data0.values.length; i < len; i++) {\n if (i < dayCount) {\n result.push('-');\n continue;\n }\n var sum = 0;\n for (var j = 0; j < dayCount; j++) {\n sum += data0.values[i - j][1];\n }\n result.push(sum / dayCount);\n }\n return result;\n}\n\n\n\nconst option = {\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'cross'\n }\n },\n legend: {\n data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']\n },\n grid: {\n left: '10%',\n right: '10%',\n bottom: '15%'\n },\n xAxis: {\n type: 'category',\n data: data0.categoryData,\n scale: true,\n boundaryGap: false,\n axisLine: {onZero: false},\n splitLine: {show: false},\n splitNumber: 20,\n min: 'dataMin',\n max: 'dataMax'\n },\n yAxis: {\n scale: true,\n splitArea: {\n show: true\n }\n },\n dataZoom: [\n {\n type: 'inside',\n start: 50,\n end: 100\n },\n {\n show: true,\n type: 'slider',\n top: '90%',\n start: 50,\n end: 100\n }\n ],\n series: [\n {\n name: '日K',\n type: 'candlestick',\n data: data0.values\n }\n ]\n};\n\n\n",
"name": "candlestick",
"title": "K 线图",
"title-en": "Candlestick"
}
]
},
"series-heatmap": {
"desc": "<p><strong>heat map</strong></p>\n<p>Heat map mainly use colors to represent values, which must be used along with <a href=\"#visualMap\">visualMap</a> component.</p>\n<p>It can be used in either <a href=\"#grid\">rectangular coordinate</a> or <a href=\"#geo\">geographic coordinate</a>. But the behaviour on them are quite different. Rectangular coordinate must have two catagories to use it.</p>\n<p>Here are the examples using it in rectangular coordinate and geographic coordinate:</p>\n<p><strong>rectangular coordinate: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=heatmap-cartesian&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n",
"exampleBaseOptions": [
{
"code": "\nconst hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',\n '7a', '8a', '9a','10a','11a',\n '12p', '1p', '2p', '3p', '4p', '5p',\n '6p', '7p', '8p', '9p', '10p', '11p'];\nconst days = ['Saturday', 'Friday', 'Thursday',\n 'Wednesday', 'Tuesday', 'Monday', 'Sunday'];\n\nconst data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]].map(function (item) {\n return [item[1], item[0], item[2] || '-'];\n});\n\noption = {\n tooltip: {\n position: 'top'\n },\n animation: false,\n grid: {\n height: '50%',\n top: '10%'\n },\n xAxis: {\n type: 'category',\n data: hours,\n splitArea: {\n show: true\n }\n },\n yAxis: {\n type: 'category',\n data: days,\n splitArea: {\n show: true\n }\n },\n visualMap: {\n min: 0,\n max: 10,\n calculable: true,\n orient: 'horizontal',\n left: 'center',\n bottom: '15%'\n },\n series: [{\n name: 'Punch Card',\n type: 'heatmap',\n data: data\n }]\n};\n",
"name": "heatmap",
"title": "直角坐标系热力图",
"title-en": "Heatmap on Cartesian"
}
]
},
"series-map": {
"desc": "<p><strong>Map.</strong></p>\n<p>Map is mainly used in the visualization of geographic area data, which can be used with <a href=\"#visualMap\">visualMap</a> component to visualize the datas such as population distribution density in diffrent areas.</p>\n<p>Series of same <a href=\"#series-map.map\">map type</a> will show in one map. At this point, the configuration of the first series will be used for the map configuration.</p>\n"
},
"series-parallel": {
"desc": "<p>The series in parallel coordinate system.</p>\n<p><br></p>\n<hr>\n<p><strong>Introduction about Parallel coordinates</strong></p>\n<p><a href=\"https://en.wikipedia.org/wiki/Parallel_coordinates\" target=\"_blank\">Parallel Coordinates</a> is a common way of visualizing high-dimensional geometry and analyzing multivariate data.</p>\n<p>For example, <a href=\"#series-parallel.data\">series-parallel.data</a> is the following data:</p>\n<pre><code class=\"lang-javascript\">[\n [1, 55, 9, 56, 0.46, 18, 6, &#39;good&#39;],\n [2, 25, 11, 21, 0.65, 34, 9, &#39;excellent&#39;],\n [3, 56, 7, 63, 0.3, 14, 5, &#39;good&#39;],\n [4, 33, 7, 29, 0.33, 16, 6, &#39;excellent&#39;],\n { // Data item can also be an Object, so that perticular settings of its line can be set here.\n value: [5, 42, 24, 44, 0.76, 40, 16, &#39;excellent&#39;]\n lineStyle: {...},\n }\n ...\n]\n</code></pre>\n<p>In data above, each row is a &quot;data item&quot;, and each column represents a &quot;dimension&quot;. For example, the meanings of columns above are: &quot;data&quot;, &quot;AQI&quot;, &quot;PM2.5&quot;, &quot;PM10&quot;, &quot;carbon monoxide level&quot;, &quot;nitrogen dioxide level&quot;, and &quot;sulfur dioxide level&quot;.</p>\n<p>Parallel coordinates are often used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=doc-example/parallel-all&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<hr>\n<p><strong>Brief about Configuration</strong></p>\n<p>Basic configuration parallel coordinates is shown as follow:</p>\n<pre><code class=\"lang-javascript\">option = {\n parallelAxis: [ // Definitions of axes.\n {dim: 0, name: schema[0].text}, // Each axis has a &#39;dim&#39; attribute, representing dimension index in data.\n {dim: 1, name: schema[1].text},\n {dim: 2, name: schema[2].text},\n {dim: 3, name: schema[3].text},\n {dim: 4, name: schema[4].text},\n {dim: 5, name: schema[5].text},\n {dim: 6, name: schema[6].text},\n {dim: 7, name: schema[7].text,\n type: &#39;category&#39;, // Also supports category data.\n data: [&#39;Excellent&#39;, &#39;good&#39;, &#39;light pollution&#39;, &#39;moderate pollution&#39;, &#39;heavy pollution&#39;, &#39;severe pollution&#39;]\n }\n ],\n parallel: { // Definition of a parallel coordinate system.\n left: &#39;5%&#39;, // Location of parallel coordinate system.\n right: &#39;13%&#39;,\n bottom: &#39;10%&#39;,\n top: &#39;20%&#39;,\n parallelAxisDefault: { // A pattern for axis definition, which can avoid repeating in `parallelAxis`.\n type: &#39;value&#39;,\n nameLocation: &#39;end&#39;,\n nameGap: 20\n }\n },\n series: [ // Here the three series sharing the same parallel coordinate system.\n {\n name: &#39;Beijing&#39;,\n type: &#39;parallel&#39;, // The type of this series is &#39;parallel&#39;\n data: [\n [1, 55, 9, 56, 0.46, 18, 6, &#39;good&#39;],\n [2, 25, 11, 21, 0.65, 34, 9, &#39;excellent&#39;],\n ...\n ]\n },\n {\n name: &#39;Shanghai&#39;,\n type: &#39;parallel&#39;,\n data: [\n [3, 56, 7, 63, 0.3, 14, 5, &#39;good&#39;],\n [4, 33, 7, 29, 0.33, 16, 6, &#39;excellent&#39;],\n ...\n ]\n },\n {\n name: &#39;Guangzhou&#39;,\n type: &#39;parallel&#39;,\n data: [\n [4, 33, 7, 29, 0.33, 16, 6, &#39;excellent&#39;],\n [5, 42, 24, 44, 0.76, 40, 16, &#39;excellent&#39;],\n ...\n ]\n }\n ]\n};\n</code></pre>\n<p>Three components are involved here: <a href=\"#parallel\">parallel</a>, <a href=\"#parallelAxis\">parallelAxis</a>, <a href=\"#series-parallel\">series-parallel</a></p>\n<ul>\n<li><p><a href=\"#parallel\">parallel</a></p>\n<p> This component is the coordinate system. One or more series (like &quot;Beijing&quot;, &quot;Shanghai&quot;, and &quot;Guangzhou&quot; in the above example) can share one coordinate system.</p>\n<p> Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.</p>\n<p> Position setting is also carried out here.</p>\n</li>\n<li><p><a href=\"#parallelAxis\">parallelAxis</a></p>\n<p> This is axis configuration. Multiple axes are needed in parallel coordinates.</p>\n<p> <a href=\"#parallelAxis.parallelIndex\">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n<li><p><a href=\"#series-parallel\">series-parallel</a></p>\n<p> This is the definition of parallel series, which will be drawn on parallel coordinate system.</p>\n<p> <a href=\"#parallelAxis.parallelIndex\">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>Notes and Best Practices</strong></p>\n<p>When configuring multiple <a href=\"#parallelAxis\">parallelAxis</a>, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a>. Before initializing axis, configurations in <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a> will be merged into <a href=\"#parallelAxis\">parallelAxis</a> to generate the final axis configuration.</p>\n<p><strong>If data is too large and cause bad performance</strong></p>\n<p>It is suggested to set <a href=\"#series-parallel.lineStyle.width\">series-parallel.lineStyle.width</a> to be <code class=\"codespan\">0.5</code> (or less), which may improve performance significantly.</p>\n<p><br></p>\n<hr>\n<p><strong>Display High-Dimension Data</strong></p>\n<p>When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.</p>\n<p>In this case, you may use <a href=\"#parallel.axisExpandable\">parallel.axisExpandable</a> to improve the display. See this example:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=map-parallel-prices&edit=1&reset=1\" width=\"600\" height=\"460\"><iframe />\n\n\n\n\n\n\n\n\n\n\n\n",
"exampleBaseOptions": [
{
"code": "\nconst dataBJ = [\n [1,55,9,56,0.46,18,6,\"良\"],\n [2,25,11,21,0.65,34,9,\"优\"],\n [3,56,7,63,0.3,14,5,\"良\"],\n [4,33,7,29,0.33,16,6,\"优\"],\n [5,42,24,44,0.76,40,16,\"优\"],\n [6,82,58,90,1.77,68,33,\"良\"],\n [7,74,49,77,1.46,48,27,\"良\"],\n [8,78,55,80,1.29,59,29,\"良\"],\n [9,267,216,280,4.8,108,64,\"重度污染\"],\n [10,185,127,216,2.52,61,27,\"中度污染\"],\n [11,39,19,38,0.57,31,15,\"优\"],\n [12,41,11,40,0.43,21,7,\"优\"],\n [13,64,38,74,1.04,46,22,\"良\"],\n [14,108,79,120,1.7,75,41,\"轻度污染\"],\n [15,108,63,116,1.48,44,26,\"轻度污染\"],\n [16,33,6,29,0.34,13,5,\"优\"],\n [17,94,66,110,1.54,62,31,\"良\"],\n [18,186,142,192,3.88,93,79,\"中度污染\"],\n [19,57,31,54,0.96,32,14,\"良\"],\n [20,22,8,17,0.48,23,10,\"优\"],\n [21,39,15,36,0.61,29,13,\"优\"],\n [22,94,69,114,2.08,73,39,\"良\"],\n [23,99,73,110,2.43,76,48,\"良\"],\n [24,31,12,30,0.5,32,16,\"优\"],\n [25,42,27,43,1,53,22,\"优\"],\n [26,154,117,157,3.05,92,58,\"中度污染\"],\n [27,234,185,230,4.09,123,69,\"重度污染\"],\n [28,160,120,186,2.77,91,50,\"中度污染\"],\n [29,134,96,165,2.76,83,41,\"轻度污染\"],\n [30,52,24,60,1.03,50,21,\"良\"],\n [31,46,5,49,0.28,10,6,\"优\"]\n];\n\nconst dataGZ = [\n [1,26,37,27,1.163,27,13,\"优\"],\n [2,85,62,71,1.195,60,8,\"良\"],\n [3,78,38,74,1.363,37,7,\"良\"],\n [4,21,21,36,0.634,40,9,\"优\"],\n [5,41,42,46,0.915,81,13,\"优\"],\n [6,56,52,69,1.067,92,16,\"良\"],\n [7,64,30,28,0.924,51,2,\"良\"],\n [8,55,48,74,1.236,75,26,\"良\"],\n [9,76,85,113,1.237,114,27,\"良\"],\n [10,91,81,104,1.041,56,40,\"良\"],\n [11,84,39,60,0.964,25,11,\"良\"],\n [12,64,51,101,0.862,58,23,\"良\"],\n [13,70,69,120,1.198,65,36,\"良\"],\n [14,77,105,178,2.549,64,16,\"良\"],\n [15,109,68,87,0.996,74,29,\"轻度污染\"],\n [16,73,68,97,0.905,51,34,\"良\"],\n [17,54,27,47,0.592,53,12,\"良\"],\n [18,51,61,97,0.811,65,19,\"良\"],\n [19,91,71,121,1.374,43,18,\"良\"],\n [20,73,102,182,2.787,44,19,\"良\"],\n [21,73,50,76,0.717,31,20,\"良\"],\n [22,84,94,140,2.238,68,18,\"良\"],\n [23,93,77,104,1.165,53,7,\"良\"],\n [24,99,130,227,3.97,55,15,\"良\"],\n [25,146,84,139,1.094,40,17,\"轻度污染\"],\n [26,113,108,137,1.481,48,15,\"轻度污染\"],\n [27,81,48,62,1.619,26,3,\"良\"],\n [28,56,48,68,1.336,37,9,\"良\"],\n [29,82,92,174,3.29,0,13,\"良\"],\n [30,106,116,188,3.628,101,16,\"轻度污染\"],\n [31,118,50,0,1.383,76,11,\"轻度污染\"]\n];\n\nconst dataSH = [\n [1,91,45,125,0.82,34,23,\"良\"],\n [2,65,27,78,0.86,45,29,\"良\"],\n [3,83,60,84,1.09,73,27,\"良\"],\n [4,109,81,121,1.28,68,51,\"轻度污染\"],\n [5,106,77,114,1.07,55,51,\"轻度污染\"],\n [6,109,81,121,1.28,68,51,\"轻度污染\"],\n [7,106,77,114,1.07,55,51,\"轻度污染\"],\n [8,89,65,78,0.86,51,26,\"良\"],\n [9,53,33,47,0.64,50,17,\"良\"],\n [10,80,55,80,1.01,75,24,\"良\"],\n [11,117,81,124,1.03,45,24,\"轻度污染\"],\n [12,99,71,142,1.1,62,42,\"良\"],\n [13,95,69,130,1.28,74,50,\"良\"],\n [14,116,87,131,1.47,84,40,\"轻度污染\"],\n [15,108,80,121,1.3,85,37,\"轻度污染\"],\n [16,134,83,167,1.16,57,43,\"轻度污染\"],\n [17,79,43,107,1.05,59,37,\"良\"],\n [18,71,46,89,0.86,64,25,\"良\"],\n [19,97,71,113,1.17,88,31,\"良\"],\n [20,84,57,91,0.85,55,31,\"良\"],\n [21,87,63,101,0.9,56,41,\"良\"],\n [22,104,77,119,1.09,73,48,\"轻度污染\"],\n [23,87,62,100,1,72,28,\"良\"],\n [24,168,128,172,1.49,97,56,\"中度污染\"],\n [25,65,45,51,0.74,39,17,\"良\"],\n [26,39,24,38,0.61,47,17,\"优\"],\n [27,39,24,39,0.59,50,19,\"优\"],\n [28,93,68,96,1.05,79,29,\"良\"],\n [29,188,143,197,1.66,99,51,\"中度污染\"],\n [30,174,131,174,1.55,108,50,\"中度污染\"],\n [31,187,143,201,1.39,89,53,\"中度污染\"]\n];\n\nconst schema = [\n {name: 'date', index: 0, text: '日期'},\n {name: 'AQIindex', index: 1, text: 'AQI'},\n {name: 'PM25', index: 2, text: 'PM2.5'},\n {name: 'PM10', index: 3, text: 'PM10'},\n {name: 'CO', index: 4, text: ' CO'},\n {name: 'NO2', index: 5, text: 'NO2'},\n {name: 'SO2', index: 6, text: 'SO2'},\n {name: '等级', index: 7, text: '等级'}\n];\n\nconst option = {\n color: [\n '#c23531', '#91c7ae', '#dd8668'\n ],\n legend: {\n top: 10,\n data: ['北京', '上海', '广州'],\n itemGap: 20\n },\n parallelAxis: [\n {dim: 0, name: schema[0].text, inverse: true, max: 31, nameLocation: 'start'},\n {dim: 1, name: schema[1].text},\n {dim: 2, name: schema[2].text},\n {dim: 3, name: schema[3].text},\n {dim: 4, name: schema[4].text},\n {dim: 5, name: schema[5].text},\n {dim: 6, name: schema[6].text},\n {dim: 7, name: schema[7].text,\n type: 'category', data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']}\n ],\n parallel: {\n left: '5%',\n right: '13%',\n bottom: '10%',\n top: '20%',\n parallelAxisDefault: {\n type: 'value',\n name: 'AQI指数',\n nameLocation: 'end',\n nameGap: 20,\n nameTextStyle: {\n fontSize: 12\n }\n }\n },\n series: [\n {\n name: '北京',\n type: 'parallel',\n data: dataBJ\n },\n {\n name: '上海',\n type: 'parallel',\n data: dataSH\n },\n {\n name: '广州',\n type: 'parallel',\n data: dataGZ\n }\n ]\n};\n",
"name": "parallel-series",
"title": "平行坐标",
"title-en": "Parallel"
}
]
},
"series-lines": {
"desc": "<p><strong>Lines graph</strong></p>\n<p>It is used to draw the line data with the information about &quot;from&quot; and &quot;to&quot;; and it is applied fot drawing the air routes on map, which visualizes these routes.</p>\n<p>ECharts 2.x uses the <code class=\"codespan\">markLine</code> to draw the migrating effect, while in ECharts 3, the <code class=\"codespan\">lines</code> graph is recommended to be used.</p>\n"
},
"series-graph": {
"desc": "<p><strong>relation graph</strong></p>\n<p>Graph is a diagram to represent <a href=\"#series-graph.nodes\">nodes</a> and the <a href=\"#series-graph.links\">links</a> connecting nodes.</p>\n<p><strong>Example: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=graph&reset=1&edit=1\" width=\"600\" height=\"400\"><iframe />\n\n",
"exampleBaseOptions": [
{
"code": "\nconst option = {\"title\":{\"text\":\"Les Miserables\",\"subtext\":\"Default layout\",\"top\":\"bottom\",\"left\":\"right\"},\"tooltip\":{},\"legend\":[{\"data\":[\"类目0\",\"类目1\",\"类目2\",\"类目3\",\"类目4\",\"类目5\",\"类目6\",\"类目7\",\"类目8\"]}],\"animationDuration\":1500,\"animationEasingUpdate\":\"quinticInOut\",\"series\":[{\"name\":\"Les Miserables\",\"type\":\"graph\",\"layout\":\"none\",\"data\":[{\"id\":\"0\",\"name\":\"Myriel\",\"symbolSize\":19.12381,\"x\":-266.82776,\"y\":299.6904,\"value\":28.685715,\"category\":0},{\"id\":\"1\",\"name\":\"Napoleon\",\"symbolSize\":2.6666666666666665,\"x\":-418.08344,\"y\":446.8853,\"value\":4,\"category\":0},{\"id\":\"2\",\"name\":\"MlleBaptistine\",\"symbolSize\":6.323809333333333,\"x\":-212.76357,\"y\":245.29176,\"value\":9.485714,\"category\":1},{\"id\":\"3\",\"name\":\"MmeMagloire\",\"symbolSize\":6.323809333333333,\"x\":-242.82404,\"y\":235.26283,\"value\":9.485714,\"category\":1},{\"id\":\"4\",\"name\":\"CountessDeLo\",\"symbolSize\":2.6666666666666665,\"x\":-379.30386,\"y\":429.06424,\"value\":4,\"category\":0},{\"id\":\"5\",\"name\":\"Geborand\",\"symbolSize\":2.6666666666666665,\"x\":-417.26337,\"y\":406.03506,\"value\":4,\"category\":0},{\"id\":\"6\",\"name\":\"Champtercier\",\"symbolSize\":2.6666666666666665,\"x\":-332.6012,\"y\":485.16974,\"value\":4,\"category\":0},{\"id\":\"7\",\"name\":\"Cravatte\",\"symbolSize\":2.6666666666666665,\"x\":-382.69568,\"y\":475.09113,\"value\":4,\"category\":0},{\"id\":\"8\",\"name\":\"Count\",\"symbolSize\":2.6666666666666665,\"x\":-320.384,\"y\":387.17325,\"value\":4,\"category\":0},{\"id\":\"9\",\"name\":\"OldMan\",\"symbolSize\":2.6666666666666665,\"x\":-344.39832,\"y\":451.16772,\"value\":4,\"category\":0},{\"id\":\"10\",\"name\":\"Labarre\",\"symbolSize\":2.6666666666666665,\"x\":-89.34107,\"y\":234.56128,\"value\":4,\"category\":1},{\"id\":\"11\",\"name\":\"Valjean\",\"symbolSize\":66.66666666666667,\"x\":-87.93029,\"y\":-6.8120565,\"value\":100,\"category\":1},{\"id\":\"12\",\"name\":\"Marguerite\",\"symbolSize\":4.495239333333333,\"x\":-339.77908,\"y\":-184.69139,\"value\":6.742859,\"category\":1},{\"id\":\"13\",\"name\":\"MmeDeR\",\"symbolSize\":2.6666666666666665,\"x\":-194.31313,\"y\":178.55301,\"value\":4,\"category\":1},{\"id\":\"14\",\"name\":\"Isabeau\",\"symbolSize\":2.6666666666666665,\"x\":-158.05168,\"y\":201.99768,\"value\":4,\"category\":1},{\"id\":\"15\",\"name\":\"Gervais\",\"symbolSize\":2.6666666666666665,\"x\":-127.701546,\"y\":242.55057,\"value\":4,\"category\":1},{\"id\":\"16\",\"name\":\"Tholomyes\",\"symbolSize\":17.295237333333333,\"x\":-385.2226,\"y\":-393.5572,\"value\":25.942856,\"category\":2},{\"id\":\"17\",\"name\":\"Listolier\",\"symbolSize\":13.638097333333334,\"x\":-516.55884,\"y\":-393.98975,\"value\":20.457146,\"category\":2},{\"id\":\"18\",\"name\":\"Fameuil\",\"symbolSize\":13.638097333333334,\"x\":-464.79382,\"y\":-493.57944,\"value\":20.457146,\"category\":2},{\"id\":\"19\",\"name\":\"Blacheville\",\"symbolSize\":13.638097333333334,\"x\":-515.1624,\"y\":-456.9891,\"value\":20.457146,\"category\":2},{\"id\":\"20\",\"name\":\"Favourite\",\"symbolSize\":13.638097333333334,\"x\":-408.12122,\"y\":-464.5048,\"value\":20.457146,\"category\":2},{\"id\":\"21\",\"name\":\"Dahlia\",\"symbolSize\":13.638097333333334,\"x\":-456.44113,\"y\":-425.13303,\"value\":20.457146,\"category\":2},{\"id\":\"22\",\"name\":\"Zephine\",\"symbolSize\":13.638097333333334,\"x\":-459.1107,\"y\":-362.5133,\"value\":20.457146,\"category\":2},{\"id\":\"23\",\"name\":\"Fantine\",\"symbolSize\":28.266666666666666,\"x\":-313.42786,\"y\":-289.44803,\"value\":42.4,\"category\":2},{\"id\":\"24\",\"name\":\"MmeThenardier\",\"symbolSize\":20.95238266666667,\"x\":4.6313396,\"y\":-273.8517,\"value\":31.428574,\"category\":7},{\"id\":\"25\",\"name\":\"Thenardier\",\"symbolSize\":30.095235333333335,\"x\":82.80825,\"y\":-203.1144,\"value\":45.142853,\"category\":7},{\"id\":\"26\",\"name\":\"Cosette\",\"symbolSize\":20.95238266666667,\"x\":78.64646,\"y\":-31.512747,\"value\":31.428574,\"category\":6},{\"id\":\"27\",\"name\":\"Javert\",\"symbolSize\":31.923806666666668,\"x\":-81.46074,\"y\":-204.20204,\"value\":47.88571,\"category\":7},{\"id\":\"28\",\"name\":\"Fauchelevent\",\"symbolSize\":8.152382000000001,\"x\":-225.73984,\"y\":82.41631,\"value\":12.228573,\"category\":4},{\"id\":\"29\",\"name\":\"Bamatabois\",\"symbolSize\":15.466666666666667,\"x\":-385.6842,\"y\":-20.206686,\"value\":23.2,\"category\":3},{\"id\":\"30\",\"name\":\"Perpetue\",\"symbolSize\":4.495239333333333,\"x\":-403.92447,\"y\":-197.69823,\"value\":6.742859,\"category\":2},{\"id\":\"31\",\"name\":\"Simplice\",\"symbolSize\":8.152382000000001,\"x\":-281.4253,\"y\":-158.45137,\"value\":12.228573,\"category\":2},{\"id\":\"32\",\"name\":\"Scaufflaire\",\"symbolSize\":2.6666666666666665,\"x\":-122.41348,\"y\":210.37503,\"value\":4,\"category\":1},{\"id\":\"33\",\"name\":\"Woman1\",\"symbolSize\":4.495239333333333,\"x\":-234.6001,\"y\":-113.15067,\"value\":6.742859,\"category\":1},{\"id\":\"34\",\"name\":\"Judge\",\"symbolSize\":11.809524666666666,\"x\":-387.84915,\"y\":58.7059,\"value\":17.714287,\"category\":3},{\"id\":\"35\",\"name\":\"Champmathieu\",\"symbolSize\":11.809524666666666,\"x\":-338.2307,\"y\":87.48405,\"value\":17.714287,\"category\":3},{\"id\":\"36\",\"name\":\"Brevet\",\"symbolSize\":11.809524666666666,\"x\":-453.26874,\"y\":58.94648,\"value\":17.714287,\"category\":3},{\"id\":\"37\",\"name\":\"Chenildieu\",\"symbolSize\":11.809524666666666,\"x\":-386.44904,\"y\":140.05937,\"value\":17.714287,\"category\":3},{\"id\":\"38\",\"name\":\"Cochepaille\",\"symbolSize\":11.809524666666666,\"x\":-446.7876,\"y\":123.38005,\"value\":17.714287,\"category\":3},{\"id\":\"39\",\"name\":\"Pontmercy\",\"symbolSize\":6.323809333333333,\"x\":336.49738,\"y\":-269.55914,\"value\":9.485714,\"category\":6},{\"id\":\"40\",\"name\":\"Boulatruelle\",\"symbolSize\":2.6666666666666665,\"x\":29.187843,\"y\":-460.13132,\"value\":4,\"category\":7},{\"id\":\"41\",\"name\":\"Eponine\",\"symbolSize\":20.95238266666667,\"x\":238.36697,\"y\":-210.00926,\"value\":31.428574,\"category\":7},{\"id\":\"42\",\"name\":\"Anzelma\",\"symbolSize\":6.323809333333333,\"x\":189.69513,\"y\":-346.50662,\"value\":9.485714,\"category\":7},{\"id\":\"43\",\"name\":\"Woman2\",\"symbolSize\":6.323809333333333,\"x\":-187.00418,\"y\":-145.02663,\"value\":9.485714,\"category\":6},{\"id\":\"44\",\"name\":\"MotherInnocent\",\"symbolSize\":4.495239333333333,\"x\":-252.99521,\"y\":129.87549,\"value\":6.742859,\"category\":4},{\"id\":\"45\",\"name\":\"Gribier\",\"symbolSize\":2.6666666666666665,\"x\":-296.07935,\"y\":163.11964,\"value\":4,\"category\":4},{\"id\":\"46\",\"name\":\"Jondrette\",\"symbolSize\":2.6666666666666665,\"x\":550.3201,\"y\":522.4031,\"value\":4,\"category\":5},{\"id\":\"47\",\"name\":\"MmeBurgon\",\"symbolSize\":4.495239333333333,\"x\":488.13535,\"y\":356.8573,\"value\":6.742859,\"category\":5},{\"id\":\"48\",\"name\":\"Gavroche\",\"symbolSize\":41.06667066666667,\"x\":387.89572,\"y\":110.462326,\"value\":61.600006,\"category\":8},{\"id\":\"49\",\"name\":\"Gillenormand\",\"symbolSize\":13.638097333333334,\"x\":126.4831,\"y\":68.10622,\"value\":20.457146,\"category\":6},{\"id\":\"50\",\"name\":\"Magnon\",\"symbolSize\":4.495239333333333,\"x\":127.07365,\"y\":-113.05923,\"value\":6.742859,\"category\":6},{\"id\":\"51\",\"name\":\"MlleGillenormand\",\"symbolSize\":13.638097333333334,\"x\":162.63559,\"y\":117.6565,\"value\":20.457146,\"category\":6},{\"id\":\"52\",\"name\":\"MmePontmercy\",\"symbolSize\":4.495239333333333,\"x\":353.66415,\"y\":-205.89165,\"value\":6.742859,\"category\":6},{\"id\":\"53\",\"name\":\"MlleVaubois\",\"symbolSize\":2.6666666666666665,\"x\":165.43939,\"y\":339.7736,\"value\":4,\"category\":6},{\"id\":\"54\",\"name\":\"LtGillenormand\",\"symbolSize\":8.152382000000001,\"x\":137.69348,\"y\":196.1069,\"value\":12.228573,\"category\":6},{\"id\":\"55\",\"name\":\"Marius\",\"symbolSize\":35.58095333333333,\"x\":206.44687,\"y\":-13.805411,\"value\":53.37143,\"category\":6},{\"id\":\"56\",\"name\":\"BaronessT\",\"symbolSize\":4.495239333333333,\"x\":194.82993,\"y\":224.78036,\"value\":6.742859,\"category\":6},{\"id\":\"57\",\"name\":\"Mabeuf\",\"symbolSize\":20.95238266666667,\"x\":597.6618,\"y\":135.18481,\"value\":31.428574,\"category\":8},{\"id\":\"58\",\"name\":\"Enjolras\",\"symbolSize\":28.266666666666666,\"x\":355.78366,\"y\":-74.882454,\"value\":42.4,\"category\":8},{\"id\":\"59\",\"name\":\"Combeferre\",\"symbolSize\":20.95238266666667,\"x\":515.2961,\"y\":-46.167564,\"value\":31.428574,\"category\":8},{\"id\":\"60\",\"name\":\"Prouvaire\",\"symbolSize\":17.295237333333333,\"x\":614.29285,\"y\":-69.3104,\"value\":25.942856,\"category\":8},{\"id\":\"61\",\"name\":\"Feuilly\",\"symbolSize\":20.95238266666667,\"x\":550.1917,\"y\":-128.17537,\"value\":31.428574,\"category\":8},{\"id\":\"62\",\"name\":\"Courfeyrac\",\"symbolSize\":24.609526666666667,\"x\":436.17184,\"y\":-12.7286825,\"value\":36.91429,\"category\":8},{\"id\":\"63\",\"name\":\"Bahorel\",\"symbolSize\":22.780953333333333,\"x\":602.55225,\"y\":16.421427,\"value\":34.17143,\"category\":8},{\"id\":\"64\",\"name\":\"Bossuet\",\"symbolSize\":24.609526666666667,\"x\":455.81955,\"y\":-115.45826,\"value\":36.91429,\"category\":8},{\"id\":\"65\",\"name\":\"Joly\",\"symbolSize\":22.780953333333333,\"x\":516.40784,\"y\":47.242233,\"value\":34.17143,\"category\":8},{\"id\":\"66\",\"name\":\"Grantaire\",\"symbolSize\":19.12381,\"x\":646.4313,\"y\":-151.06331,\"value\":28.685715,\"category\":8},{\"id\":\"67\",\"name\":\"MotherPlutarch\",\"symbolSize\":2.6666666666666665,\"x\":668.9568,\"y\":204.65488,\"value\":4,\"category\":8},{\"id\":\"68\",\"name\":\"Gueulemer\",\"symbolSize\":19.12381,\"x\":78.4799,\"y\":-347.15146,\"value\":28.685715,\"category\":7},{\"id\":\"69\",\"name\":\"Babet\",\"symbolSize\":19.12381,\"x\":150.35959,\"y\":-298.50797,\"value\":28.685715,\"category\":7},{\"id\":\"70\",\"name\":\"Claquesous\",\"symbolSize\":19.12381,\"x\":137.3717,\"y\":-410.2809,\"value\":28.685715,\"category\":7},{\"id\":\"71\",\"name\":\"Montparnasse\",\"symbolSize\":17.295237333333333,\"x\":234.87747,\"y\":-400.85983,\"value\":25.942856,\"category\":7},{\"id\":\"72\",\"name\":\"Toussaint\",\"symbolSize\":6.323809333333333,\"x\":40.942253,\"y\":113.78272,\"value\":9.485714,\"category\":1},{\"id\":\"73\",\"name\":\"Child1\",\"symbolSize\":4.495239333333333,\"x\":437.939,\"y\":291.58234,\"value\":6.742859,\"category\":8},{\"id\":\"74\",\"name\":\"Child2\",\"symbolSize\":4.495239333333333,\"x\":466.04922,\"y\":283.3606,\"value\":6.742859,\"category\":8},{\"id\":\"75\",\"name\":\"Brujon\",\"symbolSize\":13.638097333333334,\"x\":238.79364,\"y\":-314.06345,\"value\":20.457146,\"category\":7},{\"id\":\"76\",\"name\":\"MmeHucheloup\",\"symbolSize\":13.638097333333334,\"x\":712.18353,\"y\":4.8131495,\"value\":20.457146,\"category\":8}],\"links\":[{\"id\":\"0\",\"source\":\"1\",\"target\":\"0\"},{\"id\":\"1\",\"source\":\"2\",\"target\":\"0\"},{\"id\":\"2\",\"source\":\"3\",\"target\":\"0\"},{\"id\":\"3\",\"source\":\"3\",\"target\":\"2\"},{\"id\":\"4\",\"source\":\"4\",\"target\":\"0\"},{\"id\":\"5\",\"source\":\"5\",\"target\":\"0\"},{\"id\":\"6\",\"source\":\"6\",\"target\":\"0\"},{\"id\":\"7\",\"source\":\"7\",\"target\":\"0\"},{\"id\":\"8\",\"source\":\"8\",\"target\":\"0\"},{\"id\":\"9\",\"source\":\"9\",\"target\":\"0\"},{\"id\":\"13\",\"source\":\"11\",\"target\":\"0\"},{\"id\":null,\"source\":\"11\",\"target\":\"2\"},{\"id\":\"11\",\"source\":\"11\",\"target\":\"3\"},{\"id\":\"10\",\"source\":\"11\",\"target\":\"10\"},{\"id\":\"14\",\"source\":\"12\",\"target\":\"11\"},{\"id\":\"15\",\"source\":\"13\",\"target\":\"11\"},{\"id\":\"16\",\"source\":\"14\",\"target\":\"11\"},{\"id\":\"17\",\"source\":\"15\",\"target\":\"11\"},{\"id\":\"18\",\"source\":\"17\",\"target\":\"16\"},{\"id\":\"19\",\"source\":\"18\",\"target\":\"16\"},{\"id\":\"20\",\"source\":\"18\",\"target\":\"17\"},{\"id\":\"21\",\"source\":\"19\",\"target\":\"16\"},{\"id\":\"22\",\"source\":\"19\",\"target\":\"17\"},{\"id\":\"23\",\"source\":\"19\",\"target\":\"18\"},{\"id\":\"24\",\"source\":\"20\",\"target\":\"16\"},{\"id\":\"25\",\"source\":\"20\",\"target\":\"17\"},{\"id\":\"26\",\"source\":\"20\",\"target\":\"18\"},{\"id\":\"27\",\"source\":\"20\",\"target\":\"19\"},{\"id\":\"28\",\"source\":\"21\",\"target\":\"16\"},{\"id\":\"29\",\"source\":\"21\",\"target\":\"17\"},{\"id\":\"30\",\"source\":\"21\",\"target\":\"18\"},{\"id\":\"31\",\"source\":\"21\",\"target\":\"19\"},{\"id\":\"32\",\"source\":\"21\",\"target\":\"20\"},{\"id\":\"33\",\"source\":\"22\",\"target\":\"16\"},{\"id\":\"34\",\"source\":\"22\",\"target\":\"17\"},{\"id\":\"35\",\"source\":\"22\",\"target\":\"18\"},{\"id\":\"36\",\"source\":\"22\",\"target\":\"19\"},{\"id\":\"37\",\"source\":\"22\",\"target\":\"20\"},{\"id\":\"38\",\"source\":\"22\",\"target\":\"21\"},{\"id\":\"47\",\"source\":\"23\",\"target\":\"11\"},{\"id\":\"46\",\"source\":\"23\",\"target\":\"12\"},{\"id\":\"39\",\"source\":\"23\",\"target\":\"16\"},{\"id\":\"40\",\"source\":\"23\",\"target\":\"17\"},{\"id\":\"41\",\"source\":\"23\",\"target\":\"18\"},{\"id\":\"42\",\"source\":\"23\",\"target\":\"19\"},{\"id\":\"43\",\"source\":\"23\",\"target\":\"20\"},{\"id\":\"44\",\"source\":\"23\",\"target\":\"21\"},{\"id\":\"45\",\"source\":\"23\",\"target\":\"22\"},{\"id\":null,\"source\":\"24\",\"target\":\"11\"},{\"id\":\"48\",\"source\":\"24\",\"target\":\"23\"},{\"id\":\"52\",\"source\":\"25\",\"target\":\"11\"},{\"id\":\"51\",\"source\":\"25\",\"target\":\"23\"},{\"id\":\"50\",\"source\":\"25\",\"target\":\"24\"},{\"id\":null,\"source\":\"26\",\"target\":\"11\"},{\"id\":null,\"source\":\"26\",\"target\":\"16\"},{\"id\":\"53\",\"source\":\"26\",\"target\":\"24\"},{\"id\":\"56\",\"source\":\"26\",\"target\":\"25\"},{\"id\":\"57\",\"source\":\"27\",\"target\":\"11\"},{\"id\":\"58\",\"source\":\"27\",\"target\":\"23\"},{\"id\":null,\"source\":\"27\",\"target\":\"24\"},{\"id\":\"59\",\"source\":\"27\",\"target\":\"25\"},{\"id\":\"61\",\"source\":\"27\",\"target\":\"26\"},{\"id\":\"62\",\"source\":\"28\",\"target\":\"11\"},{\"id\":\"63\",\"source\":\"28\",\"target\":\"27\"},{\"id\":\"66\",\"source\":\"29\",\"target\":\"11\"},{\"id\":\"64\",\"source\":\"29\",\"target\":\"23\"},{\"id\":\"65\",\"source\":\"29\",\"target\":\"27\"},{\"id\":\"67\",\"source\":\"30\",\"target\":\"23\"},{\"id\":null,\"source\":\"31\",\"target\":\"11\"},{\"id\":null,\"source\":\"31\",\"target\":\"23\"},{\"id\":null,\"source\":\"31\",\"target\":\"27\"},{\"id\":\"68\",\"source\":\"31\",\"target\":\"30\"},{\"id\":\"72\",\"source\":\"32\",\"target\":\"11\"},{\"id\":\"73\",\"source\":\"33\",\"target\":\"11\"},{\"id\":\"74\",\"source\":\"33\",\"target\":\"27\"},{\"id\":\"75\",\"source\":\"34\",\"target\":\"11\"},{\"id\":\"76\",\"source\":\"34\",\"target\":\"29\"},{\"id\":\"77\",\"source\":\"35\",\"target\":\"11\"},{\"id\":null,\"source\":\"35\",\"target\":\"29\"},{\"id\":\"78\",\"source\":\"35\",\"target\":\"34\"},{\"id\":\"82\",\"source\":\"36\",\"target\":\"11\"},{\"id\":\"83\",\"source\":\"36\",\"target\":\"29\"},{\"id\":\"80\",\"source\":\"36\",\"target\":\"34\"},{\"id\":\"81\",\"source\":\"36\",\"target\":\"35\"},{\"id\":\"87\",\"source\":\"37\",\"target\":\"11\"},{\"id\":\"88\",\"source\":\"37\",\"target\":\"29\"},{\"id\":\"84\",\"source\":\"37\",\"target\":\"34\"},{\"id\":\"85\",\"source\":\"37\",\"target\":\"35\"},{\"id\":\"86\",\"source\":\"37\",\"target\":\"36\"},{\"id\":\"93\",\"source\":\"38\",\"target\":\"11\"},{\"id\":\"94\",\"source\":\"38\",\"target\":\"29\"},{\"id\":\"89\",\"source\":\"38\",\"target\":\"34\"},{\"id\":\"90\",\"source\":\"38\",\"target\":\"35\"},{\"id\":\"91\",\"source\":\"38\",\"target\":\"36\"},{\"id\":\"92\",\"source\":\"38\",\"target\":\"37\"},{\"id\":\"95\",\"source\":\"39\",\"target\":\"25\"},{\"id\":\"96\",\"source\":\"40\",\"target\":\"25\"},{\"id\":\"97\",\"source\":\"41\",\"target\":\"24\"},{\"id\":\"98\",\"source\":\"41\",\"target\":\"25\"},{\"id\":\"101\",\"source\":\"42\",\"target\":\"24\"},{\"id\":\"100\",\"source\":\"42\",\"target\":\"25\"},{\"id\":\"99\",\"source\":\"42\",\"target\":\"41\"},{\"id\":\"102\",\"source\":\"43\",\"target\":\"11\"},{\"id\":\"103\",\"source\":\"43\",\"target\":\"26\"},{\"id\":\"104\",\"source\":\"43\",\"target\":\"27\"},{\"id\":null,\"source\":\"44\",\"target\":\"11\"},{\"id\":\"105\",\"source\":\"44\",\"target\":\"28\"},{\"id\":\"107\",\"source\":\"45\",\"target\":\"28\"},{\"id\":\"108\",\"source\":\"47\",\"target\":\"46\"},{\"id\":\"112\",\"source\":\"48\",\"target\":\"11\"},{\"id\":\"110\",\"source\":\"48\",\"target\":\"25\"},{\"id\":\"111\",\"source\":\"48\",\"target\":\"27\"},{\"id\":\"109\",\"source\":\"48\",\"target\":\"47\"},{\"id\":null,\"source\":\"49\",\"target\":\"11\"},{\"id\":\"113\",\"source\":\"49\",\"target\":\"26\"},{\"id\":null,\"source\":\"50\",\"target\":\"24\"},{\"id\":\"115\",\"source\":\"50\",\"target\":\"49\"},{\"id\":\"119\",\"source\":\"51\",\"target\":\"11\"},{\"id\":\"118\",\"source\":\"51\",\"target\":\"26\"},{\"id\":\"117\",\"source\":\"51\",\"target\":\"49\"},{\"id\":null,\"source\":\"52\",\"target\":\"39\"},{\"id\":\"120\",\"source\":\"52\",\"target\":\"51\"},{\"id\":\"122\",\"source\":\"53\",\"target\":\"51\"},{\"id\":\"125\",\"source\":\"54\",\"target\":\"26\"},{\"id\":\"124\",\"source\":\"54\",\"target\":\"49\"},{\"id\":\"123\",\"source\":\"54\",\"target\":\"51\"},{\"id\":\"131\",\"source\":\"55\",\"target\":\"11\"},{\"id\":\"132\",\"source\":\"55\",\"target\":\"16\"},{\"id\":\"133\",\"source\":\"55\",\"target\":\"25\"},{\"id\":null,\"source\":\"55\",\"target\":\"26\"},{\"id\":\"128\",\"source\":\"55\",\"target\":\"39\"},{\"id\":\"134\",\"source\":\"55\",\"target\":\"41\"},{\"id\":\"135\",\"source\":\"55\",\"target\":\"48\"},{\"id\":\"127\",\"source\":\"55\",\"target\":\"49\"},{\"id\":\"126\",\"source\":\"55\",\"target\":\"51\"},{\"id\":\"129\",\"source\":\"55\",\"target\":\"54\"},{\"id\":\"136\",\"source\":\"56\",\"target\":\"49\"},{\"id\":\"137\",\"source\":\"56\",\"target\":\"55\"},{\"id\":null,\"source\":\"57\",\"target\":\"41\"},{\"id\":null,\"source\":\"57\",\"target\":\"48\"},{\"id\":\"138\",\"source\":\"57\",\"target\":\"55\"},{\"id\":\"145\",\"source\":\"58\",\"target\":\"11\"},{\"id\":null,\"source\":\"58\",\"target\":\"27\"},{\"id\":\"142\",\"source\":\"58\",\"target\":\"48\"},{\"id\":\"141\",\"source\":\"58\",\"target\":\"55\"},{\"id\":\"144\",\"source\":\"58\",\"target\":\"57\"},{\"id\":\"148\",\"source\":\"59\",\"target\":\"48\"},{\"id\":\"147\",\"source\":\"59\",\"target\":\"55\"},{\"id\":null,\"source\":\"59\",\"target\":\"57\"},{\"id\":\"146\",\"source\":\"59\",\"target\":\"58\"},{\"id\":\"150\",\"source\":\"60\",\"target\":\"48\"},{\"id\":\"151\",\"source\":\"60\",\"target\":\"58\"},{\"id\":\"152\",\"source\":\"60\",\"target\":\"59\"},{\"id\":\"153\",\"source\":\"61\",\"target\":\"48\"},{\"id\":\"158\",\"source\":\"61\",\"target\":\"55\"},{\"id\":\"157\",\"source\":\"61\",\"target\":\"57\"},{\"id\":\"154\",\"source\":\"61\",\"target\":\"58\"},{\"id\":\"156\",\"source\":\"61\",\"target\":\"59\"},{\"id\":\"155\",\"source\":\"61\",\"target\":\"60\"},{\"id\":\"164\",\"source\":\"62\",\"target\":\"41\"},{\"id\":\"162\",\"source\":\"62\",\"target\":\"48\"},{\"id\":\"159\",\"source\":\"62\",\"target\":\"55\"},{\"id\":null,\"source\":\"62\",\"target\":\"57\"},{\"id\":\"160\",\"source\":\"62\",\"target\":\"58\"},{\"id\":\"161\",\"source\":\"62\",\"target\":\"59\"},{\"id\":null,\"source\":\"62\",\"target\":\"60\"},{\"id\":\"165\",\"source\":\"62\",\"target\":\"61\"},{\"id\":null,\"source\":\"63\",\"target\":\"48\"},{\"id\":\"174\",\"source\":\"63\",\"target\":\"55\"},{\"id\":null,\"source\":\"63\",\"target\":\"57\"},{\"id\":null,\"source\":\"63\",\"target\":\"58\"},{\"id\":\"167\",\"source\":\"63\",\"target\":\"59\"},{\"id\":null,\"source\":\"63\",\"target\":\"60\"},{\"id\":\"172\",\"source\":\"63\",\"target\":\"61\"},{\"id\":\"169\",\"source\":\"63\",\"target\":\"62\"},{\"id\":\"184\",\"source\":\"64\",\"target\":\"11\"},{\"id\":null,\"source\":\"64\",\"target\":\"48\"},{\"id\":\"175\",\"source\":\"64\",\"target\":\"55\"},{\"id\":\"183\",\"source\":\"64\",\"target\":\"57\"},{\"id\":\"179\",\"source\":\"64\",\"target\":\"58\"},{\"id\":\"182\",\"source\":\"64\",\"target\":\"59\"},{\"id\":\"181\",\"source\":\"64\",\"target\":\"60\"},{\"id\":\"180\",\"source\":\"64\",\"target\":\"61\"},{\"id\":\"176\",\"source\":\"64\",\"target\":\"62\"},{\"id\":\"178\",\"source\":\"64\",\"target\":\"63\"},{\"id\":\"187\",\"source\":\"65\",\"target\":\"48\"},{\"id\":\"194\",\"source\":\"65\",\"target\":\"55\"},{\"id\":\"193\",\"source\":\"65\",\"target\":\"57\"},{\"id\":null,\"source\":\"65\",\"target\":\"58\"},{\"id\":\"192\",\"source\":\"65\",\"target\":\"59\"},{\"id\":null,\"source\":\"65\",\"target\":\"60\"},{\"id\":\"190\",\"source\":\"65\",\"target\":\"61\"},{\"id\":\"188\",\"source\":\"65\",\"target\":\"62\"},{\"id\":\"185\",\"source\":\"65\",\"target\":\"63\"},{\"id\":\"186\",\"source\":\"65\",\"target\":\"64\"},{\"id\":\"200\",\"source\":\"66\",\"target\":\"48\"},{\"id\":\"196\",\"source\":\"66\",\"target\":\"58\"},{\"id\":\"197\",\"source\":\"66\",\"target\":\"59\"},{\"id\":\"203\",\"source\":\"66\",\"target\":\"60\"},{\"id\":\"202\",\"source\":\"66\",\"target\":\"61\"},{\"id\":\"198\",\"source\":\"66\",\"target\":\"62\"},{\"id\":\"201\",\"source\":\"66\",\"target\":\"63\"},{\"id\":\"195\",\"source\":\"66\",\"target\":\"64\"},{\"id\":\"199\",\"source\":\"66\",\"target\":\"65\"},{\"id\":\"204\",\"source\":\"67\",\"target\":\"57\"},{\"id\":null,\"source\":\"68\",\"target\":\"11\"},{\"id\":null,\"source\":\"68\",\"target\":\"24\"},{\"id\":\"205\",\"source\":\"68\",\"target\":\"25\"},{\"id\":\"208\",\"source\":\"68\",\"target\":\"27\"},{\"id\":null,\"source\":\"68\",\"target\":\"41\"},{\"id\":\"209\",\"source\":\"68\",\"target\":\"48\"},{\"id\":\"213\",\"source\":\"69\",\"target\":\"11\"},{\"id\":\"214\",\"source\":\"69\",\"target\":\"24\"},{\"id\":\"211\",\"source\":\"69\",\"target\":\"25\"},{\"id\":null,\"source\":\"69\",\"target\":\"27\"},{\"id\":\"217\",\"source\":\"69\",\"target\":\"41\"},{\"id\":\"216\",\"source\":\"69\",\"target\":\"48\"},{\"id\":\"212\",\"source\":\"69\",\"target\":\"68\"},{\"id\":\"221\",\"source\":\"70\",\"target\":\"11\"},{\"id\":\"222\",\"source\":\"70\",\"target\":\"24\"},{\"id\":\"218\",\"source\":\"70\",\"target\":\"25\"},{\"id\":\"223\",\"source\":\"70\",\"target\":\"27\"},{\"id\":\"224\",\"source\":\"70\",\"target\":\"41\"},{\"id\":\"225\",\"source\":\"70\",\"target\":\"58\"},{\"id\":\"220\",\"source\":\"70\",\"target\":\"68\"},{\"id\":\"219\",\"source\":\"70\",\"target\":\"69\"},{\"id\":\"230\",\"source\":\"71\",\"target\":\"11\"},{\"id\":\"233\",\"source\":\"71\",\"target\":\"25\"},{\"id\":\"226\",\"source\":\"71\",\"target\":\"27\"},{\"id\":\"232\",\"source\":\"71\",\"target\":\"41\"},{\"id\":null,\"source\":\"71\",\"target\":\"48\"},{\"id\":\"228\",\"source\":\"71\",\"target\":\"68\"},{\"id\":\"227\",\"source\":\"71\",\"target\":\"69\"},{\"id\":\"229\",\"source\":\"71\",\"target\":\"70\"},{\"id\":\"236\",\"source\":\"72\",\"target\":\"11\"},{\"id\":\"234\",\"source\":\"72\",\"target\":\"26\"},{\"id\":\"235\",\"source\":\"72\",\"target\":\"27\"},{\"id\":\"237\",\"source\":\"73\",\"target\":\"48\"},{\"id\":\"238\",\"source\":\"74\",\"target\":\"48\"},{\"id\":\"239\",\"source\":\"74\",\"target\":\"73\"},{\"id\":\"242\",\"source\":\"75\",\"target\":\"25\"},{\"id\":\"244\",\"source\":\"75\",\"target\":\"41\"},{\"id\":null,\"source\":\"75\",\"target\":\"48\"},{\"id\":\"241\",\"source\":\"75\",\"target\":\"68\"},{\"id\":\"240\",\"source\":\"75\",\"target\":\"69\"},{\"id\":\"245\",\"source\":\"75\",\"target\":\"70\"},{\"id\":\"246\",\"source\":\"75\",\"target\":\"71\"},{\"id\":\"252\",\"source\":\"76\",\"target\":\"48\"},{\"id\":\"253\",\"source\":\"76\",\"target\":\"58\"},{\"id\":\"251\",\"source\":\"76\",\"target\":\"62\"},{\"id\":\"250\",\"source\":\"76\",\"target\":\"63\"},{\"id\":\"247\",\"source\":\"76\",\"target\":\"64\"},{\"id\":\"248\",\"source\":\"76\",\"target\":\"65\"},{\"id\":\"249\",\"source\":\"76\",\"target\":\"66\"}],\"categories\":[{\"name\":\"类目0\"},{\"name\":\"类目1\"},{\"name\":\"类目2\"},{\"name\":\"类目3\"},{\"name\":\"类目4\"},{\"name\":\"类目5\"},{\"name\":\"类目6\"},{\"name\":\"类目7\"},{\"name\":\"类目8\"}]}]}\n\noption.series[0].data.forEach(function (item) {\n item.x /= 5;\n item.y /= 5;\n});\n",
"name": "graph",
"title": "复杂关系图"
}
]
},
"series-sankey": {
"desc": "<p><strong> Sankey diagram </strong>\nSankey diagram is a specific type of streamgraph (can also be seen as a directed acyclic graph) in which the width of each branch is shown proportionally to the flow quantity. These graphs are typically used to visualize energy or material or cost transfers between processes. They can also visualize the energy accounts, material flow accounts on a regional or national level, and also the breakdown of cost of item or services.</p>\n<p><strong>Example: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=sankey-energy&edit=1&reset=1\" width=\"700\" height=\"580\"><iframe />\n\n\n\n<p><br>\n<strong>Visual Encoding: </strong></p>\n<p>The Sankey diagram encodes each <code class=\"codespan\">node</code> of the raw data into a small rectangle. Different nodes are presented in different colors as far as possible. The <code class=\"codespan\">label</code> next to the small rectangul encodes the name of the node.</p>\n<p>In addition, the edge between two small rectangles in the diagram encodes the <code class=\"codespan\">link</code> of the raw data. The width of edge is shown proportionally to the <code class=\"codespan\">value</code> of <code class=\"codespan\">link</code>.</p>\n",
"exampleBaseOptions": [
{
"code": "\nconst option = {\"tooltip\":{\"trigger\":\"item\",\"triggerOn\":\"mousemove\"},\"series\":[{\"type\":\"sankey\",\"data\":[{\"name\":\"Agricultural 'waste'\"},{\"name\":\"Bio-conversion\"},{\"name\":\"Liquid\"},{\"name\":\"Losses\"},{\"name\":\"Solid\"},{\"name\":\"Gas\"},{\"name\":\"Biofuel imports\"},{\"name\":\"Biomass imports\"},{\"name\":\"Coal imports\"},{\"name\":\"Coal\"},{\"name\":\"Coal reserves\"},{\"name\":\"District heating\"},{\"name\":\"Industry\"},{\"name\":\"Heating and cooling - commercial\"},{\"name\":\"Heating and cooling - homes\"},{\"name\":\"Electricity grid\"},{\"name\":\"Over generation / exports\"},{\"name\":\"H2 conversion\"},{\"name\":\"Road transport\"},{\"name\":\"Agriculture\"},{\"name\":\"Rail transport\"},{\"name\":\"Lighting & appliances - commercial\"},{\"name\":\"Lighting & appliances - homes\"},{\"name\":\"Gas imports\"},{\"name\":\"Ngas\"},{\"name\":\"Gas reserves\"},{\"name\":\"Thermal generation\"},{\"name\":\"Geothermal\"},{\"name\":\"H2\"},{\"name\":\"Hydro\"},{\"name\":\"International shipping\"},{\"name\":\"Domestic aviation\"},{\"name\":\"International aviation\"},{\"name\":\"National navigation\"},{\"name\":\"Marine algae\"},{\"name\":\"Nuclear\"},{\"name\":\"Oil imports\"},{\"name\":\"Oil\"},{\"name\":\"Oil reserves\"},{\"name\":\"Other waste\"},{\"name\":\"Pumped heat\"},{\"name\":\"Solar PV\"},{\"name\":\"Solar Thermal\"},{\"name\":\"Solar\"},{\"name\":\"Tidal\"},{\"name\":\"UK land based bioenergy\"},{\"name\":\"Wave\"},{\"name\":\"Wind\"}],\"links\":[{\"source\":\"Agricultural 'waste'\",\"target\":\"Bio-conversion\",\"value\":124.729},{\"source\":\"Bio-conversion\",\"target\":\"Liquid\",\"value\":0.597},{\"source\":\"Bio-conversion\",\"target\":\"Losses\",\"value\":26.862},{\"source\":\"Bio-conversion\",\"target\":\"Solid\",\"value\":280.322},{\"source\":\"Bio-conversion\",\"target\":\"Gas\",\"value\":81.144},{\"source\":\"Biofuel imports\",\"target\":\"Liquid\",\"value\":35},{\"source\":\"Biomass imports\",\"target\":\"Solid\",\"value\":35},{\"source\":\"Coal imports\",\"target\":\"Coal\",\"value\":11.606},{\"source\":\"Coal reserves\",\"target\":\"Coal\",\"value\":63.965},{\"source\":\"Coal\",\"target\":\"Solid\",\"value\":75.571},{\"source\":\"District heating\",\"target\":\"Industry\",\"value\":10.639},{\"source\":\"District heating\",\"target\":\"Heating and cooling - commercial\",\"value\":22.505},{\"source\":\"District heating\",\"target\":\"Heating and cooling - homes\",\"value\":46.184},{\"source\":\"Electricity grid\",\"target\":\"Over generation / exports\",\"value\":104.453},{\"source\":\"Electricity grid\",\"target\":\"Heating and cooling - homes\",\"value\":113.726},{\"source\":\"Electricity grid\",\"target\":\"H2 conversion\",\"value\":27.14},{\"source\":\"Electricity grid\",\"target\":\"Industry\",\"value\":342.165},{\"source\":\"Electricity grid\",\"target\":\"Road transport\",\"value\":37.797},{\"source\":\"Electricity grid\",\"target\":\"Agriculture\",\"value\":4.412},{\"source\":\"Electricity grid\",\"target\":\"Heating and cooling - commercial\",\"value\":40.858},{\"source\":\"Electricity grid\",\"target\":\"Losses\",\"value\":56.691},{\"source\":\"Electricity grid\",\"target\":\"Rail transport\",\"value\":7.863},{\"source\":\"Electricity grid\",\"target\":\"Lighting & appliances - commercial\",\"value\":90.008},{\"source\":\"Electricity grid\",\"target\":\"Lighting & appliances - homes\",\"value\":93.494},{\"source\":\"Gas imports\",\"target\":\"Ngas\",\"value\":40.719},{\"source\":\"Gas reserves\",\"target\":\"Ngas\",\"value\":82.233},{\"source\":\"Gas\",\"target\":\"Heating and cooling - commercial\",\"value\":0.129},{\"source\":\"Gas\",\"target\":\"Losses\",\"value\":1.401},{\"source\":\"Gas\",\"target\":\"Thermal generation\",\"value\":151.891},{\"source\":\"Gas\",\"target\":\"Agriculture\",\"value\":2.096},{\"source\":\"Gas\",\"target\":\"Industry\",\"value\":48.58},{\"source\":\"Geothermal\",\"target\":\"Electricity grid\",\"value\":7.013},{\"source\":\"H2 conversion\",\"target\":\"H2\",\"value\":20.897},{\"source\":\"H2 conversion\",\"target\":\"Losses\",\"value\":6.242},{\"source\":\"H2\",\"target\":\"Road transport\",\"value\":20.897},{\"source\":\"Hydro\",\"target\":\"Electricity grid\",\"value\":6.995},{\"source\":\"Liquid\",\"target\":\"Industry\",\"value\":121.066},{\"source\":\"Liquid\",\"target\":\"International shipping\",\"value\":128.69},{\"source\":\"Liquid\",\"target\":\"Road transport\",\"value\":135.835},{\"source\":\"Liquid\",\"target\":\"Domestic aviation\",\"value\":14.458},{\"source\":\"Liquid\",\"target\":\"International aviation\",\"value\":206.267},{\"source\":\"Liquid\",\"target\":\"Agriculture\",\"value\":3.64},{\"source\":\"Liquid\",\"target\":\"National navigation\",\"value\":33.218},{\"source\":\"Liquid\",\"target\":\"Rail transport\",\"value\":4.413},{\"source\":\"Marine algae\",\"target\":\"Bio-conversion\",\"value\":4.375},{\"source\":\"Ngas\",\"target\":\"Gas\",\"value\":122.952},{\"source\":\"Nuclear\",\"target\":\"Thermal generation\",\"value\":839.978},{\"source\":\"Oil imports\",\"target\":\"Oil\",\"value\":504.287},{\"source\":\"Oil reserves\",\"target\":\"Oil\",\"value\":107.703},{\"source\":\"Oil\",\"target\":\"Liquid\",\"value\":611.99},{\"source\":\"Other waste\",\"target\":\"Solid\",\"value\":56.587},{\"source\":\"Other waste\",\"target\":\"Bio-conversion\",\"value\":77.81},{\"source\":\"Pumped heat\",\"target\":\"Heating and cooling - homes\",\"value\":193.026},{\"source\":\"Pumped heat\",\"target\":\"Heating and cooling - commercial\",\"value\":70.672},{\"source\":\"Solar PV\",\"target\":\"Electricity grid\",\"value\":59.901},{\"source\":\"Solar Thermal\",\"target\":\"Heating and cooling - homes\",\"value\":19.263},{\"source\":\"Solar\",\"target\":\"Solar Thermal\",\"value\":19.263},{\"source\":\"Solar\",\"target\":\"Solar PV\",\"value\":59.901},{\"source\":\"Solid\",\"target\":\"Agriculture\",\"value\":0.882},{\"source\":\"Solid\",\"target\":\"Thermal generation\",\"value\":400.12},{\"source\":\"Solid\",\"target\":\"Industry\",\"value\":46.477},{\"source\":\"Thermal generation\",\"target\":\"Electricity grid\",\"value\":525.531},{\"source\":\"Thermal generation\",\"target\":\"Losses\",\"value\":787.129},{\"source\":\"Thermal generation\",\"target\":\"District heating\",\"value\":79.329},{\"source\":\"Tidal\",\"target\":\"Electricity grid\",\"value\":9.452},{\"source\":\"UK land based bioenergy\",\"target\":\"Bio-conversion\",\"value\":182.01},{\"source\":\"Wave\",\"target\":\"Electricity grid\",\"value\":19.013},{\"source\":\"Wind\",\"target\":\"Electricity grid\",\"value\":289.366}]}]}\n",
"name": "sankey",
"title": "桑基图",
"title-en": "Sankey"
}
]
},
"series-funnel": {
"desc": "<p><strong>Funnel chart</strong></p>\n<p><strong>sample: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=funnel&reset=1&edit=1\" width=\"600\" height=\"400\"><iframe />\n\n",
"exampleBaseOptions": [
{
"code": "\noption = {\n legend: {\n data: ['Display','Click','Visit','Consulting','Order']\n },\n series: [\n {\n name:'漏斗图',\n type:'funnel',\n data: [\n {value: 60, name: 'Visit'},\n {value: 40, name: 'Consulting'},\n {value: 20, name: 'Order'},\n {value: 80, name: 'Click'},\n {value: 100, name: 'Display'}\n ]\n }\n ]\n};\n\n",
"name": "funnel",
"tilte": "基础漏斗图",
"title-en": "Basic Funnel"
}
]
},
"series-gauge": {
"desc": "<p><strong>Gauge chart</strong></p>\n<p><strong>Example: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=gauge&reset=1&edit=1\" width=\"600\" height=\"500\"><iframe />\n\n",
"exampleBaseOptions": [
{
"code": "\nconst option = {\n series: [\n {\n name: 'Indicator',\n type: 'gauge',\n detail: {formatter: '{value}%'},\n data: [{value: 50, name: 'Percent'}]\n }\n ]\n};\n",
"name": "gauge",
"title": "基础仪表盘",
"title-en": "Basic Gauge"
}
]
},
"series-pictorialBar": {
"desc": "<p><strong>pictorial bar chart</strong></p>\n<p>Pictorial bar chart is a type of bar chart that customized glyph (like images, <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>) can be used instead of rectangular bar. This kind of chart is usually used in infographic.</p>\n<p>Pictorial bar chart can only be used in <a href=\"#grid\">rectangular coordinate</a> with at least 1 category axis.</p>\n<p><strong>Example:</strong></p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=pictorialBar-hill&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n<p><strong>Layout</strong></p>\n<p>Basically <code class=\"codespan\">pictoialBar</code> is a type of bar chart, which follows the bar chart layout. In <code class=\"codespan\">pictorialBar</code>, each bar is named as <code class=\"codespan\">reference bar</code>, which does not be shown, but only be used as a reference for layout of pictorial graphic elements. Each pictorial graphic element is positioned with respect to its <code class=\"codespan\">reference bar</code> according to the setting of <a href=\"#series-pictorialBar.symbolPosition\">symbolPosition</a>、<a href=\"#series-pictorialBar.symbolOffset\">symbolOffset</a>.</p>\n<p>See the example below:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=doc-example/pictorialBar-position&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n<p><a href=\"#series-pictorialBar.symbolSize\">symbolSize</a> is used to specify the size of graphic elements.</p>\n<p>See the example below:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=doc-example/pictorialBar-symbolSize&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n\n\n<p><strong>Graphic types</strong></p>\n<p><a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> can be</p>\n<p>Graphic elements can be set as &#39;repeat&#39; or not by <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a>.</p>\n<ul>\n<li>If set as <code class=\"codespan\">false</code> (default), a single graphic element is used to represent a data item.</li>\n<li>If set as <code class=\"codespan\">true</code>, a group of repeat graphic elements are used to represent a data item.</li>\n</ul>\n<p>See the example below:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=doc-example/pictorialBar-repeat&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n<p>Each graphic element can be basic shape (like <code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, ...), or <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>, or image. See <a href=\"#series-pictorialBar.symbolType\">symbolType</a>.</p>\n<p>See the example below:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=doc-example/pictorialBar-graphicType&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n<p><a href=\"#series-pictorialBar.symbolClip\">symbolClip</a> can be used to clip graphic elements.</p>\n<p>See the example below:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n",
"exampleBaseOptions": [
{
"code": "\nvar spirit = 'image://data:image/png;base64,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';\n\nvar maxData = 2000;\n\noption = {\n tooltip: {\n },\n xAxis: {\n max: maxData,\n splitLine: {show: false},\n offset: 10,\n axisLine: {\n lineStyle: {\n color: '#999'\n }\n },\n axisLabel: {\n margin: 10\n }\n },\n yAxis: {\n data: ['2013', '2014', '2015', '2016'],\n inverse: true,\n axisTick: {show: false},\n axisLine: {show: false},\n axisLabel: {\n margin: 10,\n color: '#999',\n fontSize: 16\n }\n },\n grid: {\n top: 'center',\n height: 200,\n left: 70,\n right: 100\n },\n series: [{\n // current data\n type: 'pictorialBar',\n symbol: spirit,\n symbolRepeat: 'fixed',\n symbolMargin: '5%',\n symbolClip: true,\n symbolSize: 30,\n symbolBoundingData: maxData,\n data: [891, 1220, 660, 1670],\n z: 10\n }]\n};\n",
"name": "pictorial-bar",
"title": "基础象形柱图",
"title-en": "Basic Pictorial Bar"
}
]
},
"series-themeRiver": {
"desc": "<p><strong> Theme river </strong></p>\n<p>It is a special flow graph which is mainly used to present the changes of an event or theme during a period.</p>\n<p><strong>Sample: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=themeRiver-lastfm&edit=1&reset=1\" width=\"700\" height=\"580\"><iframe />\n\n\n\n<p><br>\n<strong>visual encoding: </strong></p>\n<p>The ribbon-shape river branches in different colors in theme river encode variable events or themes. The width of river branches encode the value of the original dataset.</p>\n<p>What&#39;s more, the time attribute of the orinigal dataset would map to a single time axis.</p>\n",
"exampleBaseOptions": [
{
"code": "\n\nconst option = {\n singleAxis: {\n top: 50,\n bottom: 50,\n axisTick: {},\n axisLabel: {},\n type: 'time',\n axisPointer: {\n animation: true,\n label: {\n show: true\n }\n },\n splitLine: {\n show: true,\n lineStyle: {\n type: 'dashed',\n opacity: 0.2\n }\n }\n },\n series: [\n {\n type: 'themeRiver',\n data: [['2015/11/08',10,'DQ'],['2015/11/09',15,'DQ'],['2015/11/10',35,'DQ'],\n ['2015/11/11',38,'DQ'],['2015/11/12',22,'DQ'],['2015/11/13',16,'DQ'],\n ['2015/11/14',7,'DQ'],['2015/11/15',2,'DQ'],['2015/11/16',17,'DQ'],\n ['2015/11/17',33,'DQ'],['2015/11/18',40,'DQ'],['2015/11/19',32,'DQ'],\n ['2015/11/20',26,'DQ'],['2015/11/21',35,'DQ'],['2015/11/22',40,'DQ'],\n ['2015/11/23',32,'DQ'],['2015/11/24',26,'DQ'],['2015/11/25',22,'DQ'],\n ['2015/11/26',16,'DQ'],['2015/11/27',22,'DQ'],['2015/11/28',10,'DQ'],\n ['2015/11/08',35,'TY'],['2015/11/09',36,'TY'],['2015/11/10',37,'TY'],\n ['2015/11/11',22,'TY'],['2015/11/12',24,'TY'],['2015/11/13',26,'TY'],\n ['2015/11/14',34,'TY'],['2015/11/15',21,'TY'],['2015/11/16',18,'TY'],\n ['2015/11/17',45,'TY'],['2015/11/18',32,'TY'],['2015/11/19',35,'TY'],\n ['2015/11/20',30,'TY'],['2015/11/21',28,'TY'],['2015/11/22',27,'TY'],\n ['2015/11/23',26,'TY'],['2015/11/24',15,'TY'],['2015/11/25',30,'TY'],\n ['2015/11/26',35,'TY'],['2015/11/27',42,'TY'],['2015/11/28',42,'TY'],\n ['2015/11/08',21,'SS'],['2015/11/09',25,'SS'],['2015/11/10',27,'SS'],\n ['2015/11/11',23,'SS'],['2015/11/12',24,'SS'],['2015/11/13',21,'SS'],\n ['2015/11/14',35,'SS'],['2015/11/15',39,'SS'],['2015/11/16',40,'SS'],\n ['2015/11/17',36,'SS'],['2015/11/18',33,'SS'],['2015/11/19',43,'SS'],\n ['2015/11/20',40,'SS'],['2015/11/21',34,'SS'],['2015/11/22',28,'SS'],\n ['2015/11/23',26,'SS'],['2015/11/24',37,'SS'],['2015/11/25',41,'SS'],\n ['2015/11/26',46,'SS'],['2015/11/27',47,'SS'],['2015/11/28',41,'SS'],\n ['2015/11/08',10,'QG'],['2015/11/09',15,'QG'],['2015/11/10',35,'QG'],\n ['2015/11/11',38,'QG'],['2015/11/12',22,'QG'],['2015/11/13',16,'QG'],\n ['2015/11/14',7,'QG'],['2015/11/15',2,'QG'],['2015/11/16',17,'QG'],\n ['2015/11/17',33,'QG'],['2015/11/18',40,'QG'],['2015/11/19',32,'QG'],\n ['2015/11/20',26,'QG'],['2015/11/21',35,'QG'],['2015/11/22',40,'QG'],\n ['2015/11/23',32,'QG'],['2015/11/24',26,'QG'],['2015/11/25',22,'QG'],\n ['2015/11/26',16,'QG'],['2015/11/27',22,'QG'],['2015/11/28',10,'QG'],\n ['2015/11/08',10,'SY'],['2015/11/09',15,'SY'],['2015/11/10',35,'SY'],\n ['2015/11/11',38,'SY'],['2015/11/12',22,'SY'],['2015/11/13',16,'SY'],\n ['2015/11/14',7,'SY'],['2015/11/15',2,'SY'],['2015/11/16',17,'SY'],\n ['2015/11/17',33,'SY'],['2015/11/18',40,'SY'],['2015/11/19',32,'SY'],\n ['2015/11/20',26,'SY'],['2015/11/21',35,'SY'],['2015/11/22',4,'SY'],\n ['2015/11/23',32,'SY'],['2015/11/24',26,'SY'],['2015/11/25',22,'SY'],\n ['2015/11/26',16,'SY'],['2015/11/27',22,'SY'],['2015/11/28',10,'SY'],\n ['2015/11/08',10,'DD'],['2015/11/09',15,'DD'],['2015/11/10',35,'DD'],\n ['2015/11/11',38,'DD'],['2015/11/12',22,'DD'],['2015/11/13',16,'DD'],\n ['2015/11/14',7,'DD'],['2015/11/15',2,'DD'],['2015/11/16',17,'DD'],\n ['2015/11/17',33,'DD'],['2015/11/18',4,'DD'],['2015/11/19',32,'DD'],\n ['2015/11/20',26,'DD'],['2015/11/21',35,'DD'],['2015/11/22',40,'DD'],\n ['2015/11/23',32,'DD'],['2015/11/24',26,'DD'],['2015/11/25',22,'DD'],\n ['2015/11/26',16,'DD'],['2015/11/27',22,'DD'],['2015/11/28',10,'DD']]\n }\n ]\n};\n",
"name": "themeRiver",
"title": "主题河流图",
"title-en": "Basic Theme River"
}
]
},
"series-custom": {
"desc": "<p><strong>custom series</strong></p>\n<p><code class=\"codespan\">custom series</code> supports customizing graphic elements, and then generate more types of charts.</p>\n<p>echarts manages the creation, deletion, animation and interaction with other components (like <a href=\"#dataZoom\">dataZoom</a>、<a href=\"#visualMap\">visualMap</a>), which frees developers from handling those issue themselves.</p>\n<p><strong>For example, a &quot;x-range&quot; chart is made by custom sereis:</strong></p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/en/view.html?c=custom-profile&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n<p><strong><a href=\"https://echarts.apache.org/examples/en/index.html#chart-type-custom\" target=\"_blank\">More samples of custom series</a></strong></p>\n<p><strong><a href=\"tutorial.html#Custom%20Series\" target=\"_blank\">A tutotial of custom series</a></strong></p>\n<p><br>\n<strong>Customize the render logic (in renderItem method)</strong></p>\n<p><code class=\"codespan\">custom series</code> requires developers to write a render logic by themselves. This render logic is called <a href=\"#series-custom.renderItem\">renderItem</a>.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: &#39;custom&#39;,\n renderItem: function (params, api) {\n var categoryIndex = api.value(0);\n var start = api.coord([api.value(1), categoryIndex]);\n var end = api.coord([api.value(2), categoryIndex]);\n var height = api.size([0, 1])[1] * 0.6;\n\n var rectShape = echarts.graphic.clipRectByRect({\n x: start[0],\n y: start[1] - height / 2,\n width: end[0] - start[0],\n height: height\n }, {\n x: params.coordSys.x,\n y: params.coordSys.y,\n width: params.coordSys.width,\n height: params.coordSys.height\n });\n\n return rectShape &amp;&amp; {\n type: &#39;rect&#39;,\n shape: rectShape,\n style: api.style()\n };\n },\n data: data\n }]\n}\n</code></pre>\n<p><a href=\"#series-custom.renderItem\">renderItem</a> will be called on each data item.</p>\n<p><a href=\"#series-custom.renderItem\">renderItem</a> provides two parameters:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.arguments.params\">params</a>: provides info about the current series and data and coordinate system.</li>\n<li><a href=\"#series-custom.renderItem.arguments.api\">api</a>: includes some methods.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem\">renderItem</a> method should returns graphic elements definitions.See <a href=\"#series-custom.renderItem.return\">renderItem.return</a>.</p>\n<p>Generally, the main process of <a href=\"#series-custom.renderItem\">renderItem</a> is that retrieve value from data and convert them to graphic elements on the current coordinate system. Two methods in <a href=\"#series-custom.renderItem.arguments.api\">renderItem.arguments.api</a> are always used in this procedure:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.arguments.api.value\">api.value(...)</a> is used to retrieve value from data. For example, <code class=\"codespan\">api.value(0)</code> retrieve the value of the first dimension in the current data item.</li>\n<li><a href=\"#series-custom.renderItem.arguments.api.coord\">api.coord(...)</a> is used to convert data to coordinate. For example, <code class=\"codespan\">var point = api.coord([api.value(0), api.value(1)])</code> converet the data to the point on the current coordinate system.</li>\n</ul>\n<p>Sometimes <a href=\"#series-custom.renderItem.arguments.api.size\">api.size(...)</a> method is needed, which calculates the size on the coordinate system by a given data range.</p>\n<p>Moreover, <a href=\"#series-custom.renderItem.arguments.api.style\">api.style(...)</a> method can be used to set style. It provides not only the style settings specified in <a href=\"#series-custom.itemStyle\">series.itemStyle</a>, but also the result of visual mapping. This method can also be called like <code class=\"codespan\">api.style({fill: &#39;green&#39;, stroke: &#39;yellow&#39;})</code> to override those style settings.</p>\n<p><br>\n<strong>Dimension mapping (by encode and dimension option)</strong></p>\n<p>In most cases, <a href=\"#series-custom.encode\">series.encode</a> needs to be specified when using <code class=\"codespan\">custom series</code> series, which indicate the mapping of dimensions, and then echarts can render appropriate axis by the extent of those data.</p>\n<p><code class=\"codespan\">encode.tooltip</code> and <code class=\"codespan\">encode.label</code> can also be specified to define the content of default <code class=\"codespan\">tooltip</code> and <code class=\"codespan\">label</code>.\n<a href=\"#series-custom.dimensions\">series.dimensions</a> can also be specified to defined names of each dimensions, which will be displayed in tooltip.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: {\n type: &#39;custom&#39;,\n renderItem: function () {\n ...\n },\n encode: {\n x: [2, 4, 3],\n y: 1,\n label: 0,\n tooltip: [2, 4, 3]\n }\n}\n</code></pre>\n<p><br>\n<strong>Controlled by dataZoom</strong></p>\n<p>When use <code class=\"codespan\">custom series</code> with <a href=\"#dataZoom\">dataZoom</a>, <a href=\"#dataZoom.filterMode\">dataZoom.filterMode</a> usually be set as <code class=\"codespan\">&#39;weakFilter&#39;</code>, which prevent <code class=\"codespan\">dataItem</code> from being filtered when only part of its dimensions are out of the current data window.</p>\n<p><br>\n<br>\n<strong>Difference between <code class=\"codespan\">dataIndex</code> and <code class=\"codespan\">dataIndexInside</code></strong></p>\n<ul>\n<li><code class=\"codespan\">dataIndex</code> is the index of a <code class=\"codespan\">dataItem</code> in the original data.</li>\n<li><code class=\"codespan\">dataIndexInside</code> is the index of a <code class=\"codespan\">dataItem</code> in the current data window (see <a href=\"#dataZoom\">dataZoom</a>.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.arguments.api\">renderItem.arguments.api</a> uses <code class=\"codespan\">dataIndexInside</code> as the input parameter but not <code class=\"codespan\">dataIndex</code>, because conversion from <code class=\"codespan\">dataIndex</code> to <code class=\"codespan\">dataIndexInside</code> is time-consuming.</p>\n<p><br>\n<strong>Event listener</strong></p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n type: &#39;custom&#39;,\n renderItem: function () {\n // ...\n return {\n type: &#39;group&#39;,\n children: [{\n type: &#39;circle&#39;\n // ...\n }, {\n type: &#39;circle&#39;,\n name: &#39;aaa&#39;,\n // User specified info, available\n // in event handler.\n info: 12345,\n // ...\n }]\n };\n }\n }\n});\nchart.on(&#39;click&#39;, {element: &#39;aaa&#39;}, function (params) {\n // When the element with name &#39;aaa&#39; clicked,\n // this method called.\n console.log(params.info);\n});\n</code></pre>\n"
},
"color": {
"desc": "<p>The color list of palette. If no color is set in series, the colors would be adopted sequentially and circularly from this list as the colors of series.</p>\n<p>Defaults:</p>\n<pre><code class=\"lang-js\">[&#39;#c23531&#39;,&#39;#2f4554&#39;, &#39;#61a0a8&#39;, &#39;#d48265&#39;, &#39;#91c7ae&#39;,&#39;#749f83&#39;, &#39;#ca8622&#39;, &#39;#bda29a&#39;,&#39;#6e7074&#39;, &#39;#546570&#39;, &#39;#c4ccd3&#39;]\n</code></pre>\n"
},
"backgroundColor": {
"desc": "<p>Background color. Defaults to have no background.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // color at 0% position\n }, {\n offset: 1, color: &#39;blue&#39; // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // color at 0% position\n }, {\n offset: 1, color: &#39;blue&#39; // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"
},
"textStyle": {
"desc": "<p>Global font style.</p>\n"
},
"animation": {
"desc": "\n\n<p>Whether to enable animation.</p>\n",
"uiControl": {
"type": "boolean",
"default": "true",
"clean": "true"
}
},
"animationThreshold": {
"desc": "<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"
},
"animationDuration": {
"desc": "\n\n<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"min": "0",
"default": "1000",
"step": "20",
"clean": "true"
}
},
"animationEasing": {
"desc": "\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/next/examples/en/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n",
"uiControl": {
"type": "enum",
"options": "linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut",
"clean": "true"
}
},
"animationDelay": {
"desc": "<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/next/examples/en/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"
},
"animationDurationUpdate": {
"desc": "\n\n<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"min": "0",
"default": "1000",
"step": "20"
}
},
"animationEasingUpdate": {
"desc": "\n\n<p>Easing method used for animation.</p>\n",
"uiControl": {
"type": "enum",
"options": "linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"
}
},
"animationDelayUpdate": {
"desc": "<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/next/examples/en/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"
},
"blendMode": {
"desc": "<p>Sets the type of compositing operation to apply when drawing a new shape. See the different type: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation\" target=\"_blank\">https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation</a>.</p>\n<p>The default is <code class=\"codespan\">&#39;source-over&#39;</code>. Support settings for each series.</p>\n<p><code class=\"codespan\">&#39;lighter&#39;</code> is also a common type of compositing operation. In this mode, the area where the number of graphics is concentrated is superimposed into a high-brightness color (white). It often used to highlight the effect of the area. See example <a href=\"https://echarts.apache.org/next/examples/en/editor.html?c=lines-airline\" target=\"_blank\">Global airline</a></p>\n"
},
"hoverLayerThreshold": {
"desc": "<p>When the number of element of the whole chart is larger than <code class=\"codespan\">hoverLayerThreshold</code>, a seperate hover layer is used to render hovered elements.</p>\n<p>The seperate hover layer is used to avoid re-painting the whole canvas when hovering on elements. Instead, the hovered elements are rendered in a seperate layer so that other elements don&#39;t have to be rendered again.</p>\n<p>ECharts 2 use seperate layer for all cases. But it brings some problems like the hovered elements may not covering everything else correctly, or translucent elements may not overlay correctly to each other. And it brings extra member cost due to the extra canvas and may bring burden on mobile devices. So since ECharts 3, the hover layer is not used by default. Only when the element amount is large enough will the hover layer used.</p>\n"
},
"useUTC": {
"desc": "<p>Whether to use UTC in display.</p>\n<ul>\n<li><code class=\"codespan\">true</code>: When <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, ticks is determined according to UTC, and <code class=\"codespan\">axisLabel</code> and <code class=\"codespan\">tooltip</code> use UTC by default.</li>\n<li><code class=\"codespan\">false</code>: When <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, ticks is determined according to local time, and <code class=\"codespan\">axisLabel</code> and <code class=\"codespan\">tooltip</code> use local time by default.</li>\n</ul>\n<p>The default value of <code class=\"codespan\">useUTC</code> is false, for sake of considering:</p>\n<ul>\n<li>In many cases, labels should be displayed in local time (whether the time is stored in server in local time or UTC).</li>\n<li>If user uses time string (like &#39;2012-01-02&#39;) in data, it usually means local time if time zone is not specified. Time should be displayed in its original time zone by default.</li>\n</ul>\n<p>Notice: the setting only affects &quot;display time&quot;, not &quot;parse time&quot;.\nFor how time value (like <code class=\"codespan\">1491339540396</code>, <code class=\"codespan\">&#39;2013-01-04&#39;</code>, ...) is parsed in echarts, see <a href=\"#series-line.data\">the time part in date</a>.</p>\n"
}
}