| __NUXT_JSONP__("/en/concepts/dataset", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az){return {data:[{article:{slug:p,toc:[{id:R,depth:w,text:"Define data under series"},{id:S,depth:w,text:"Define data in dataset"},{id:T,depth:w,text:U},{id:V,depth:w,text:"Map Row or Column of dataset to series"},{id:W,depth:w,text:X},{id:Y,depth:w,text:Z},{id:_,depth:w,text:$},{id:aa,depth:w,text:ab},{id:ac,depth:w,text:ad},{id:ae,depth:w,text:af},{id:ag,depth:w,text:ah},{id:ai,depth:w,text:aj},{id:ak,depth:w,text:al}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:p},children:[{type:b,tag:f,props:{href:"#dataset",ariaHidden:q,tabIndex:r},children:[{type:b,tag:s,props:{className:[t,u]},children:[]}]},{type:a,value:"Dataset"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:b,tag:d,props:{},children:[{type:a,value:p}]},{type:a,value:" is a component dedicated to manage data. Although you can set the data in "},{type:b,tag:d,props:{},children:[{type:a,value:E}]},{type:a,value:" for every series, we recommend you use the "},{type:b,tag:d,props:{},children:[{type:a,value:p}]},{type:a,value:" to manage the data since ECharts 4 so that the data can be reused by multiple components and convenient for the separation of \"data and configs\". After all, data is the most common part to be changed while other configurations will mostly not change at runtime."}]},{type:a,value:c},{type:b,tag:x,props:{id:R},children:[{type:b,tag:f,props:{href:"#define-data-under-series",ariaHidden:q,tabIndex:r},children:[{type:b,tag:s,props:{className:[t,u]},children:[]}]},{type:a,value:M},{type:b,tag:d,props:{},children:[{type:a,value:F}]},{type:a,value:am},{type:b,tag:d,props:{},children:[{type:a,value:G}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"If data is defined under "},{type:b,tag:d,props:{},children:[{type:a,value:G}]},{type:a,value:", for example:"}]},{type:a,value:c},{type:b,tag:m,props:{className:[n]},children:[{type:b,tag:A,props:{lang:o,layout:B},children:[{type:a,value:an}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:M},{type:b,tag:d,props:{},children:[{type:a,value:F}]},{type:a,value:am},{type:b,tag:d,props:{},children:[{type:a,value:G}]},{type:a,value:" is suitable for customization for some special data structures such as \"tree\", \"graph\" and large data.\nHowever, it is not conducive to the data sharing for multiple series as well as mapping arrangement of chart types and series based on the original data. The other disadvantage is that programmers always need to divide the data in separate series (and categories) first."}]},{type:a,value:c},{type:b,tag:x,props:{id:S},children:[{type:b,tag:f,props:{href:"#define-data-in-dataset",ariaHidden:q,tabIndex:r},children:[{type:b,tag:s,props:{className:[t,u]},children:[]}]},{type:a,value:M},{type:b,tag:d,props:{},children:[{type:a,value:F}]},{type:a,value:ao},{type:b,tag:d,props:{},children:[{type:a,value:p}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Here are the advantages if you define "},{type:b,tag:d,props:{},children:[{type:a,value:F}]},{type:a,value:ao},{type:b,tag:d,props:{},children:[{type:a,value:p}]},{type:a,value:ap}]},{type:a,value:c},{type:b,tag:C,props:{},children:[{type:a,value:c},{type:b,tag:l,props:{},children:[{type:a,value:"Follow the ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart."}]},{type:a,value:c},{type:b,tag:l,props:{},children:[{type:a,value:"Divide data from other configurations. The data often change but others not. It is\nEasy to manage separately."}]},{type:a,value:c},{type:b,tag:l,props:{},children:[{type:a,value:"Data can be reused by several series or component, you don't need to create copies of a large amount of data for every series."}]},{type:a,value:c},{type:b,tag:l,props:{},children:[{type:a,value:"Support more common data format, such as a 2D array, array of classes, etc., to avoid users from converting for data format to a certain extent."}]},{type:a,value:c}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Here is a simple "},{type:b,tag:d,props:{},children:[{type:a,value:p}]},{type:a,value:" example:"}]},{type:a,value:c},{type:b,tag:m,props:{className:[n]},children:[{type:b,tag:A,props:{lang:o,layout:B},children:[{type:a,value:"option = {\n legend: {},\n tooltip: {},\n dataset: {\n \u002F\u002F Provide a set of data.\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n \u002F\u002F Declare an x-axis (category axis).\n \u002F\u002F The category map the first row in the dataset by default.\n xAxis: { type: 'category' },\n \u002F\u002F Declare a y-axis (value axis).\n yAxis: {},\n \u002F\u002F Declare several 'bar' series,\n \u002F\u002F every series will auto-map to each rows by default.\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Or try to use the \"array of classes\" format:"}]},{type:a,value:c},{type:b,tag:m,props:{className:[n]},children:[{type:b,tag:A,props:{lang:o,layout:B},children:[{type:a,value:"option = {\n legend: {},\n tooltip: {},\n dataset: {\n \u002F\u002F Define the dimension of array. In cartesian coordinate system,\n \u002F\u002F if the type of x-axis is category, map the first dimension to\n \u002F\u002F x-axis by default, the second dimension to y-axis.\n \u002F\u002F You can also specify 'series.encode' to complete the map\n \u002F\u002F without specify dimensions. Please see below.\n\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },\n { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },\n { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },\n { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }\n ]\n },\n xAxis: { type: 'category' },\n yAxis: {},\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n"}]}]},{type:a,value:c},{type:b,tag:x,props:{id:T},children:[{type:b,tag:f,props:{href:"#map-from-data-to-chart",ariaHidden:q,tabIndex:r},children:[{type:b,tag:s,props:{className:[t,u]},children:[]}]},{type:a,value:U}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"The ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart."}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"In short, you can set these configs of mapping:"}]},{type:a,value:c},{type:b,tag:C,props:{},children:[{type:a,value:c},{type:b,tag:l,props:{},children:[{type:a,value:"Specify 'column' or 'row' of "},{type:b,tag:d,props:{},children:[{type:a,value:p}]},{type:a,value:" to map the "},{type:b,tag:d,props:{},children:[{type:a,value:G}]},{type:a,value:". You can use "},{type:b,tag:f,props:{href:aq,rel:[g,h,i],target:j},children:[{type:a,value:"series.seriesLayoutBy"}]},{type:a,value:" to configure it. The default is to map according to the column."}]},{type:a,value:c},{type:b,tag:l,props:{},children:[{type:a,value:"Rule of specifying dimension mapping: how to mapping from dimensions of 'dataset' to "},{type:b,tag:d,props:{},children:[{type:a,value:"axis"}]},{type:a,value:v},{type:b,tag:d,props:{},children:[{type:a,value:"tooltip"}]},{type:a,value:v},{type:b,tag:d,props:{},children:[{type:a,value:"label"}]},{type:a,value:N},{type:b,tag:d,props:{},children:[{type:a,value:J}]},{type:a,value:". To configure the mapping, please use "},{type:b,tag:f,props:{href:ar,rel:[g,h,i],target:j},children:[{type:a,value:D}]},{type:a,value:N},{type:b,tag:f,props:{href:O,rel:[g,h,i],target:j},children:[{type:a,value:J}]},{type:a,value:". The previous case did not give the mapping configuration so that ECharts will follow the default: if x-axis is category, mapping to the first row in "},{type:b,tag:d,props:{},children:[{type:a,value:K}]},{type:a,value:"; three-column chart mapping with each row in "},{type:b,tag:d,props:{},children:[{type:a,value:K}]},{type:a,value:" one by one."}]},{type:a,value:c}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"The details of the configuration are shown below:"}]},{type:a,value:c},{type:b,tag:x,props:{id:V},children:[{type:b,tag:f,props:{href:"#map-row-or-column-of-dataset-to-series",ariaHidden:q,tabIndex:r},children:[{type:b,tag:s,props:{className:[t,u]},children:[]}]},{type:a,value:"Map Row or Column of "},{type:b,tag:d,props:{},children:[{type:a,value:p}]},{type:a,value:as},{type:b,tag:d,props:{},children:[{type:a,value:G}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"After having the dataset, you can configure flexibly: how the data map to the axis and graph series."}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"You can use "},{type:b,tag:d,props:{},children:[{type:a,value:P}]},{type:a,value:" to change the understanding of row and column of the chart. "},{type:b,tag:d,props:{},children:[{type:a,value:P}]},{type:a,value:" can be:"}]},{type:a,value:c},{type:b,tag:C,props:{},children:[{type:a,value:c},{type:b,tag:l,props:{},children:[{type:a,value:"'column': Default, the series are placed above the column of "},{type:b,tag:d,props:{},children:[{type:a,value:p}]},{type:a,value:z}]},{type:a,value:c},{type:b,tag:l,props:{},children:[{type:a,value:"'row': The series is placed above the row of "},{type:b,tag:d,props:{},children:[{type:a,value:p}]},{type:a,value:z}]},{type:a,value:c}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Check this case:"}]},{type:a,value:c},{type:b,tag:m,props:{className:[n]},children:[{type:b,tag:A,props:{lang:o,layout:B},children:[{type:a,value:"option = {\n legend: {},\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: [{ gridIndex: 0 }, { gridIndex: 1 }],\n grid: [{ bottom: '55%' }, { top: '55%' }],\n series: [\n \u002F\u002F These series will show in the first coordinate, each series map a row in dataset.\n { type: 'bar', seriesLayoutBy: 'row' },\n { type: 'bar', seriesLayoutBy: 'row' },\n { type: 'bar', seriesLayoutBy: 'row' },\n \u002F\u002F These series will show in the second coordinate, each series map a column in dataset.\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"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"The effect of configuration is shown in "},{type:b,tag:f,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Fexamples\u002Fen\u002Feditor.html?c=dataset-series-layout-by",rel:[g,h,i],target:j},children:[{type:a,value:"this case"}]},{type:a,value:z}]},{type:a,value:c},{type:b,tag:x,props:{id:W},children:[{type:b,tag:f,props:{href:"#dimension",ariaHidden:q,tabIndex:r},children:[{type:b,tag:s,props:{className:[t,u]},children:[]}]},{type:a,value:X}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Most of the data described in commonly used charts is a \"two-dimensional table\" structure, in the previous case, we use a 2D array to contain a two-dimensional table. Now, when we map a series to a column, that column was called a \"dimension\" and each row was called \"item\", vice versa."}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"The dimension can have their name to display in the chart. Dimension name can be defined in the first column (row). In the previous case, "},{type:b,tag:d,props:{},children:[{type:a,value:"'score'"}]},{type:a,value:v},{type:b,tag:d,props:{},children:[{type:a,value:"'amount'"}]},{type:a,value:v},{type:b,tag:d,props:{},children:[{type:a,value:"'product'"}]},{type:a,value:" are the name of dimensions. The actual data locate from the second row. ECharts will automatically check if the first column (row) contained dimension name in "},{type:b,tag:d,props:{},children:[{type:a,value:K}]},{type:a,value:". You can also use "},{type:b,tag:d,props:{},children:[{type:a,value:"dataset.sourceHeader: true"}]},{type:a,value:" to declare that the first column (row) represents the dimension name."}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Try to use single "},{type:b,tag:d,props:{},children:[{type:a,value:"dataset.dimensions"}]},{type:a,value:" or some "},{type:b,tag:d,props:{},children:[{type:a,value:"series.dimensions"}]},{type:a,value:" to define the dimensions, therefore you can specify the name and type together."}]},{type:a,value:c},{type:b,tag:m,props:{className:[n]},children:[{type:b,tag:y,props:{lang:o,"line-highlights":k,"file-name":k},children:[{type:a,value:"var option1 = {\n dataset: {\n dimensions: [\n { name: 'score' },\n \u002F\u002F can be abbreviated as 'string', to indicate dimension name 。\n 'amount',\n \u002F\u002F Specify dimensions in 'type'.\n { name: 'product', type: 'ordinal' }\n ],\n source: []\n }\n \u002F\u002F ...\n};\n\nvar option2 = {\n dataset: {\n source: []\n },\n series: {\n type: 'line',\n \u002F\u002F series.dimensions will cover the config in dataset.dimension\n dimensions: [\n null, \u002F\u002F use null if you do not want dimension name.\n 'amount',\n { name: 'product', type: 'ordinal' }\n ]\n }\n \u002F\u002F ...\n};\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"In most cases, you don't need to define the dimension type because the ECharts will automatically judge it. If the judgment is inaccurate, you can define it manually."}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Dimension type can be the following values:"}]},{type:a,value:c},{type:b,tag:C,props:{},children:[{type:a,value:c},{type:b,tag:l,props:{},children:[{type:b,tag:d,props:{},children:[{type:a,value:"'number'"}]},{type:a,value:": Default, normal data."}]},{type:a,value:c},{type:b,tag:l,props:{},children:[{type:b,tag:d,props:{},children:[{type:a,value:"'ordinal'"}]},{type:a,value:": String types data like categories, text can be used on the axis only with the dimension type 'ordinal'. ECharts will try to judge this type automatically but might be inaccurate, so you can specify manually."}]},{type:a,value:c},{type:b,tag:l,props:{},children:[{type:b,tag:d,props:{},children:[{type:a,value:Q}]},{type:a,value:": To represent time data, ECharts can automatically analyze data as timestamp if the dimension type is defined as "},{type:b,tag:d,props:{},children:[{type:a,value:Q}]},{type:a,value:". For instance, ECharts will auto-analyze if the data of this dimension is '2017-05-10'"},{type:b,tag:d,props:{},children:[{type:a,value:". If the dimension is used as time axis ([axis.type](https:\u002F\u002Fecharts.apache.org\u002Foption.html##xAxis.type) ="}]},{type:a,value:Q},{type:b,tag:d,props:{},children:[{type:a,value:"), the dimension type will also be"}]},{type:a,value:"'time'`. See "},{type:b,tag:f,props:{href:H,rel:[g,h,i],target:j},children:[{type:a,value:F}]},{type:a,value:" for more time type support."}]},{type:a,value:c},{type:b,tag:l,props:{},children:[{type:b,tag:d,props:{},children:[{type:a,value:at}]},{type:a,value:au},{type:b,tag:d,props:{},children:[{type:a,value:av}]},{type:a,value:aw},{type:b,tag:d,props:{},children:[{type:a,value:at}]},{type:a,value:ax}]},{type:a,value:c},{type:b,tag:l,props:{},children:[{type:b,tag:d,props:{},children:[{type:a,value:ay}]},{type:a,value:au},{type:b,tag:d,props:{},children:[{type:a,value:av}]},{type:a,value:aw},{type:b,tag:d,props:{},children:[{type:a,value:ay}]},{type:a,value:ax}]},{type:a,value:c}]},{type:a,value:c},{type:b,tag:x,props:{id:Y},children:[{type:b,tag:f,props:{href:"#map-from-data-to-charts-seriesencode",ariaHidden:q,tabIndex:r},children:[{type:b,tag:s,props:{className:[t,u]},children:[]}]},{type:a,value:Z}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"After understand the concept of dimension, you can use "},{type:b,tag:f,props:{href:ar,rel:[g,h,i],target:j},children:[{type:a,value:D}]},{type:a,value:" to make a mapping:"}]},{type:a,value:c},{type:b,tag:m,props:{className:[n]},children:[{type:b,tag:A,props:{lang:o,layout:B},children:[{type:a,value:"var option = {\n dataset: {\n source: [\n ['score', 'amount', 'product'],\n [89.3, 58212, 'Matcha Latte'],\n [57.1, 78254, 'Milk Tea'],\n [74.4, 41032, 'Cheese Cocoa'],\n [50.1, 12755, 'Cheese Brownie'],\n [89.7, 20145, 'Matcha Cocoa'],\n [68.1, 79146, 'Tea'],\n [19.6, 91852, 'Orange Juice'],\n [10.6, 101852, 'Lemon Juice'],\n [32.7, 20112, 'Walnut Brownie']\n ]\n },\n xAxis: {},\n yAxis: { type: 'category' },\n series: [\n {\n type: 'bar',\n encode: {\n \u002F\u002F Map \"amount\" column to x-axis.\n x: 'amount',\n \u002F\u002F Map \"product\" row to y-axis.\n y: 'product'\n }\n }\n ]\n};\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"The basic structure of "},{type:b,tag:d,props:{},children:[{type:a,value:D}]},{type:a,value:" declaration:"}]},{type:a,value:c},{type:b,tag:C,props:{},children:[{type:a,value:c},{type:b,tag:l,props:{},children:[{type:a,value:"To the left of the colon: Specific name of axis or label."}]},{type:a,value:c},{type:b,tag:l,props:{},children:[{type:a,value:"To the right of the colon: Dimension name (string) or number(int, count from 0), to specify one or several dimensions (using array)."}]},{type:a,value:c}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Generally, the following info is not necessary to be defined. Fill in as needed."}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Attribute suggested by "},{type:b,tag:d,props:{},children:[{type:a,value:D}]}]},{type:a,value:c},{type:b,tag:m,props:{className:[n]},children:[{type:b,tag:y,props:{lang:o,"line-highlights":k,"file-name":k},children:[{type:a,value:"\u002F\u002F Supported in every coordinate and series:\nencode: {\n \u002F\u002F Display the value of dimension named \"product\" and \"score\" in tooltip.\n tooltip: ['product', 'score']\n \u002F\u002F Connect dimension name of \"Dimension 1\" and \"Dimension 3\" as the series name. (Avoid to repeat longer names in series.name)\n seriesName: [1, 3],\n \u002F\u002F Means to use the value in \"Dimension 2\" as the id. It makes the new and old data correspond by id\n \u002F\u002F when using setOption to update data, so that it can show animation properly.\n itemId: 2,\n \u002F\u002F The itemName will show in the legend of Pie Charts.\n itemName: 3\n}\n\n\u002F\u002F Grid\u002Fcartesian coordinate unique configs:\nencode: {\n \u002F\u002F Map \"Dimension 1\", \"Dimension 5\" and \"dimension named 'score'\" to x-axis:\n x: [1, 5, 'score'],\n \u002F\u002F Map \"Dimension 0\" to y-axis:\n y: 0\n}\n\n\u002F\u002F singleAxis unique configs:\nencode: {\n single: 3\n}\n\n\u002F\u002F Polar coordinate unique configs:\nencode: {\n radius: 3,\n angle: 2\n}\n\n\u002F\u002F Geo-coordinate unique configs:\nencode: {\n lng: 3,\n lat: 2\n}\n\n\u002F\u002F For some charts without coordinate like pie chart, funnel chart:\nencode: {\n value: 3\n}\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"This is a richer "},{type:b,tag:f,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Fexamples\u002Fen\u002Feditor.html?c=dataset-encode1",rel:[g,h,i],target:j},children:[{type:a,value:L}]},{type:a,value:" of "},{type:b,tag:d,props:{},children:[{type:a,value:D}]},{type:a,value:z}]},{type:a,value:c},{type:b,tag:x,props:{id:_},children:[{type:b,tag:f,props:{href:"#default-seriesencode",ariaHidden:q,tabIndex:r},children:[{type:b,tag:s,props:{className:[t,u]},children:[]}]},{type:a,value:$}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"It is worth mentioning that ECharts will use some default mapping rules for some general charts (line, bar, scatter, candlestick, etc.) if "},{type:b,tag:d,props:{},children:[{type:a,value:D}]},{type:a,value:" is not specified. The default rule is:"}]},{type:a,value:c},{type:b,tag:C,props:{},children:[{type:a,value:c},{type:b,tag:l,props:{},children:[{type:a,value:"In coordinate system (eg. Cartesian, Polar): + If there is category axis (axis.type = 'category'), map the first column(row) to the axis and each subsequent column(row) to each series. + If both axes is not the category, then map every two columns in one series to two axes."}]},{type:a,value:c},{type:b,tag:l,props:{},children:[{type:a,value:"Without axis (such as Pie Chart): + Use the first column(row) as the name, second column(row) as value. ECharts will not set the name if there is only one column(row)."}]},{type:a,value:c}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"While the default rule cannot fulfill the requirements, you can configure "},{type:b,tag:d,props:{},children:[{type:a,value:"encode"}]},{type:a,value:" by yourself, which is not complicate. Here is an "},{type:b,tag:f,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Fexamples\u002Fen\u002Feditor.html?c=dataset-default",rel:[g,h,i],target:j},children:[{type:a,value:L}]},{type:a,value:z}]},{type:a,value:c},{type:b,tag:x,props:{id:aa},children:[{type:b,tag:f,props:{href:"#some-normal-settings-of-seriesencode",ariaHidden:q,tabIndex:r},children:[{type:b,tag:s,props:{className:[t,u]},children:[]}]},{type:a,value:ab}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Q: How to set the 3rd column as x-axis, 5th column as y-axis?"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:I}]},{type:a,value:c},{type:b,tag:m,props:{className:[n]},children:[{type:b,tag:y,props:{lang:o,"line-highlights":k,"file-name":k},children:[{type:a,value:"option = {\n series: {\n \u002F\u002F dimensionIndex count from 0, so the 3rd line is dimensions[2].\n encode: { x: 2, y: 4 }\n \u002F\u002F ...\n }\n};\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Q: How to set the 3rd row as x-axis, 5th row as y-axis?"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:I}]},{type:a,value:c},{type:b,tag:m,props:{className:[n]},children:[{type:b,tag:y,props:{lang:o,"line-highlights":k,"file-name":k},children:[{type:a,value:"option = {\n series: {\n encode: { x: 2, y: 4 },\n seriesLayoutBy: 'row'\n \u002F\u002F ...\n }\n};\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Q: How to set the 2nd column as a label?"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"A:\nWe now support to trace value from specific dimension for "},{type:b,tag:f,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html##series.label.formatter",rel:[g,h,i],target:j},children:[{type:a,value:"label.formatter"}]},{type:a,value:ap}]},{type:a,value:c},{type:b,tag:m,props:{className:[n]},children:[{type:b,tag:y,props:{lang:o,"line-highlights":k,"file-name":k},children:[{type:a,value:"series: {\n label: {\n \u002F\u002F `'{@score}'` means the value in the dimension named \"score\".\n \u002F\u002F `'{@[4]}'` means the value in dimension 4.\n formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd';\n }\n}\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Q: How to show the 2nd and 3rd column in the tooltip?"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:I}]},{type:a,value:c},{type:b,tag:m,props:{className:[n]},children:[{type:b,tag:y,props:{lang:o,"line-highlights":k,"file-name":k},children:[{type:a,value:"option = {\n series: {\n encode: {\n tooltip: [1, 2]\n \u002F\u002F ...\n }\n \u002F\u002F ...\n }\n};\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Q: How to define the dimension name if is not included in the dataset?"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:I}]},{type:a,value:c},{type:b,tag:m,props:{className:[n]},children:[{type:b,tag:y,props:{lang:o,"line-highlights":k,"file-name":k},children:[{type:a,value:"var option = {\n dataset: {\n dimensions: ['score', 'amount'],\n source: [\n [89.3, 3371],\n [92.1, 8123],\n [94.4, 1954],\n [85.4, 829]\n ]\n }\n};\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Q: How to map the 3rd column to the size of the scatter chart?"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:I}]},{type:a,value:c},{type:b,tag:m,props:{className:[n]},children:[{type:b,tag:A,props:{lang:o,layout:B},children:[{type:a,value:"var option = {\n dataset: {\n source: [\n [12, 323, 11.2],\n [23, 167, 8.3],\n [81, 284, 12],\n [91, 413, 4.1],\n [13, 287, 13.5]\n ]\n },\n visualMap: {\n show: false,\n dimension: 2, \u002F\u002F means the 3rd column\n min: 2, \u002F\u002F lower bound\n max: 15, \u002F\u002F higher bound\n inRange: {\n \u002F\u002F Size of the bubble.\n symbolSize: [5, 60]\n }\n },\n xAxis: {},\n yAxis: {},\n series: {\n type: 'scatter'\n }\n};\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Q: I specified a mapping in encode, why it is not worked?"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"A: Check your spelling, such as misspell the dimension name "},{type:b,tag:d,props:{},children:[{type:a,value:"'Life Expectancy'"}]},{type:a,value:as},{type:b,tag:d,props:{},children:[{type:a,value:"'Life Expectency'"}]},{type:a,value:" in encode."}]},{type:a,value:c},{type:b,tag:x,props:{id:ac},children:[{type:b,tag:f,props:{href:"#visual-channel-mapping",ariaHidden:q,tabIndex:r},children:[{type:b,tag:s,props:{className:[t,u]},children:[]}]},{type:a,value:ad}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"We can map visual channel by using "},{type:b,tag:f,props:{href:O,rel:[g,h,i],target:j},children:[{type:a,value:J}]},{type:a,value:". Check details in the "},{type:b,tag:f,props:{href:O,rel:[g,h,i],target:j},children:[{type:a,value:J}]},{type:a,value:" document. Here is an "},{type:b,tag:f,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Fexamples\u002Fen\u002Feditor.html?c=dataset-encode0",rel:[g,h,i],target:j},children:[{type:a,value:L}]},{type:a,value:z}]},{type:a,value:c},{type:b,tag:x,props:{id:ae},children:[{type:b,tag:f,props:{href:"#formats-of-charts",ariaHidden:q,tabIndex:r},children:[{type:b,tag:s,props:{className:[t,u]},children:[]}]},{type:a,value:af}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"In most of the normal chart, the data is suitable to be described in the form of a two-dimensional table. That well-known software like 'MS Excel' and 'Numbers' all uses a two-dimensional table. Their data can be exported to JSON format and input to "},{type:b,tag:d,props:{},children:[{type:a,value:K}]},{type:a,value:" and avoid some steps of data processing."}]},{type:a,value:c},{type:b,tag:"blockquote",props:{},children:[{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"You can switch .csv file to JSON using tools like "},{type:b,tag:f,props:{href:"https:\u002F\u002Fgithub.com\u002Fd3\u002Fd3-dsv",rel:[g,h,i],target:j},children:[{type:a,value:"dsv"}]},{type:a,value:" or "},{type:b,tag:f,props:{href:"https:\u002F\u002Fgithub.com\u002Fmholt\u002FPapaParse",rel:[g,h,i],target:j},children:[{type:a,value:"PapaParse"}]},{type:a,value:z}]},{type:a,value:c}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"As the example shown behind, in the data transmission of JavaScript, the two-dimensional data can be stored directly by two-dimensional array."}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Expect from the two-dimensional array, the dataset also supports using key-value which is also a common way. However, we don't support "},{type:b,tag:f,props:{href:aq,rel:[g,h,i],target:j},children:[{type:a,value:P}]},{type:a,value:" in this format right now."}]},{type:a,value:c},{type:b,tag:m,props:{className:[n]},children:[{type:b,tag:y,props:{lang:o,"line-highlights":k,"file-name":k},children:[{type:a,value:"dataset: [\n {\n \u002F\u002F column by column key-value array is a normal format\n source: [\n { product: 'Matcha Latte', count: 823, score: 95.8 },\n { product: 'Milk Tea', count: 235, score: 81.4 },\n { product: 'Cheese Cocoa', count: 1042, score: 91.2 },\n { product: 'Walnut Brownie', count: 988, score: 76.9 }\n ]\n },\n {\n \u002F\u002F row by row key-value\n source: {\n product: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n count: [823, 235, 1042, 988],\n score: [95.8, 81.4, 91.2, 76.9]\n }\n }\n];\n"}]}]},{type:a,value:c},{type:b,tag:x,props:{id:ag},children:[{type:b,tag:f,props:{href:"#how-to-reference-several-datasets",ariaHidden:q,tabIndex:r},children:[{type:b,tag:s,props:{className:[t,u]},children:[]}]},{type:a,value:ah}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"ECharts support to define several datasets at the same moment. Series can assign the one to reference by "},{type:b,tag:f,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html##series.datasetIndex",rel:[g,h,i],target:j},children:[{type:a,value:"series.datasetIndex"}]},{type:a,value:". For example:"}]},{type:a,value:c},{type:b,tag:m,props:{className:[n]},children:[{type:b,tag:y,props:{lang:o,"line-highlights":k,"file-name":k},children:[{type:a,value:"var option = {\n dataset: [\n {\n \u002F\u002F 1st Dataset\n source: []\n },\n {\n \u002F\u002F 2nd Dataset\n source: []\n },\n {\n \u002F\u002F 3rd Dataset。\n source: []\n }\n ],\n series: [\n {\n \u002F\u002F Use 2nd dataset\n datasetIndex: 2\n },\n {\n \u002F\u002F Use 1st dataset\n datasetIndex: 1\n }\n ]\n};\n"}]}]},{type:a,value:c},{type:b,tag:x,props:{id:ai},children:[{type:b,tag:f,props:{href:"#seriesdata-in-echarts-3",ariaHidden:q,tabIndex:r},children:[{type:b,tag:s,props:{className:[t,u]},children:[]}]},{type:a,value:aj}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"ECharts 4 still support the data declaration way in ECharts 3. If the series has already declared the "},{type:b,tag:f,props:{href:H,rel:[g,h,i],target:j},children:[{type:a,value:E}]},{type:a,value:", then use "},{type:b,tag:f,props:{href:H,rel:[g,h,i],target:j},children:[{type:a,value:E}]},{type:a,value:" but not "},{type:b,tag:d,props:{},children:[{type:a,value:p}]},{type:a,value:z}]},{type:a,value:c},{type:b,tag:m,props:{className:[n]},children:[{type:b,tag:y,props:{lang:o,"line-highlights":k,"file-name":k},children:[{type:a,value:an}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"In fact, "},{type:b,tag:f,props:{href:H,rel:[g,h,i],target:j},children:[{type:a,value:E}]},{type:a,value:" is an important setting method which will always exist. Some special non-table format chart like "},{type:b,tag:f,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html##series-treemap",rel:[g,h,i],target:j},children:[{type:a,value:"treemap"}]},{type:a,value:v},{type:b,tag:f,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html##series-graph",rel:[g,h,i],target:j},children:[{type:a,value:"graph"}]},{type:a,value:N},{type:b,tag:f,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html##series-lines",rel:[g,h,i],target:j},children:[{type:a,value:"lines"}]},{type:a,value:" still cannot be edit in dataset, you still need to use "},{type:b,tag:f,props:{href:H,rel:[g,h,i],target:j},children:[{type:a,value:E}]},{type:a,value:". In another way, for render huge amount of data (over a million), you need to use "},{type:b,tag:f,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Fapi.html#echartsInstance.appendData",rel:[g,h,i],target:j},children:[{type:a,value:"appendData"}]},{type:a,value:" which is not supported by "},{type:b,tag:d,props:{},children:[{type:a,value:p}]},{type:a,value:z}]},{type:a,value:c},{type:b,tag:x,props:{id:ak},children:[{type:b,tag:f,props:{href:"#others",ariaHidden:q,tabIndex:r},children:[{type:b,tag:s,props:{className:[t,u]},children:[]}]},{type:a,value:al}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"The following charts now support dataset:\n"},{type:b,tag:d,props:{},children:[{type:a,value:"line"}]},{type:a,value:v},{type:b,tag:d,props:{},children:[{type:a,value:"bar"}]},{type:a,value:v},{type:b,tag:d,props:{},children:[{type:a,value:"pie"}]},{type:a,value:v},{type:b,tag:d,props:{},children:[{type:a,value:"scatter"}]},{type:a,value:v},{type:b,tag:d,props:{},children:[{type:a,value:"effectScatter"}]},{type:a,value:v},{type:b,tag:d,props:{},children:[{type:a,value:"parallel"}]},{type:a,value:v},{type:b,tag:d,props:{},children:[{type:a,value:"candlestick"}]},{type:a,value:v},{type:b,tag:d,props:{},children:[{type:a,value:"map"}]},{type:a,value:v},{type:b,tag:d,props:{},children:[{type:a,value:"funnel"}]},{type:a,value:v},{type:b,tag:d,props:{},children:[{type:a,value:"custom"}]},{type:a,value:".\nECharts will support more charts in the future."}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"In the end, here is an "},{type:b,tag:f,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Fexamples\u002Fen\u002Feditor.html?c=dataset-link",rel:[g,h,i],target:j},children:[{type:a,value:L}]},{type:a,value:" of several charts shared one "},{type:b,tag:d,props:{},children:[{type:a,value:p}]},{type:a,value:" with linkage interaction."}]}]},dir:"\u002Fen\u002Fconcepts",path:"\u002Fen\u002Fconcepts\u002Fdataset",extension:".md",createdAt:az,updatedAt:az},postPath:"en\u002Fconcepts\u002Fdataset"}],fetch:{},mutations:[]}}("text","element","\n","code","p","a","nofollow","noopener","noreferrer","_blank","","li","div","nuxt-content-highlight","js","dataset","true",-1,"span","icon","icon-link",", ",2,"h2","md-code-block",".","md-live","tb","ul","series.encode","series.data","data","series","https:\u002F\u002Fecharts.apache.org\u002Foption.html##series.data","A:","visualMap","dataset.source","example","Define "," and ","https:\u002F\u002Fecharts.apache.org\u002Foption.html##visualMap","seriesLayoutBy","'time'","define-data-under-series","define-data-in-dataset","map-from-data-to-chart","Map from Data to Chart","map-row-or-column-of-dataset-to-series","dimension","Dimension","map-from-data-to-charts-seriesencode","Map from Data to Charts (series.encode)","default-seriesencode","Default series.encode","some-normal-settings-of-seriesencode","Some Normal Settings of series.encode","visual-channel-mapping","Visual Channel Mapping","formats-of-charts","Formats of Charts","how-to-reference-several-datasets","How to Reference Several Datasets","seriesdata-in-echarts-3","series.data in ECharts 3","others","Others"," under ","option = {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n};\n"," in ",":","https:\u002F\u002Fecharts.apache.org\u002Foption.html##series.seriesLayoutBy","https:\u002F\u002Fecharts.apache.org\u002Foption.html##series.encode"," to ","'float'",": Use ","TypedArray"," to optimize the performance in "," dimension.","'int'","2021-08-02T05:33:02.867Z"))); |