Q: How does the third column to the X-axis, Y-axis is set to the fifth column?
answer:
series: { // 注意维度序号（dimensionIndex）从 0 开始计数，第三列是 dimensions[2]。 encode: {x: 2, y: 4}, ... }
Q: How does the third row to the X-axis, Y-axis is set to the fifth line?
answer:
series: { encode: {x: 2, y: 4}, seriesLayoutBy: 'row', ... }
Q: How does the second column to the label?
A: On display labels label.formatter , now supports dimensions refer to a specific value, for example:
series: { label: { // `'{@score}'` 表示 “名为 score” 的维度里的值。 // `'{@[4]}'` 表示引用序号为 4 的维度里的值。 formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd' } }
Q: How to make the first two and the third column shows the prompt box (tooltip) in?
answer:
series: { encode: { tooltip: [1, 2] ... }, ... }
Q: There is no data dimension name, so how the dimensions given name?
answer:
dataset: { dimensions: ['score', 'amount'], source: [ [89.3, 3371], [92.1, 8123], [94.4, 1954], [85.4, 829] ] }Q: How to map the fourth column is the size of the bubble point of the graph?
answer:
var option = { dataset: { source: [ [12, 323, 11.2], [23, 167, 8.3], [81, 284, 12], [91, 413, 4.1], [13, 287, 13.5] ] }, visualMap: { show: false, dimension: 2, // 指向第三列（列序号从 0 开始记，所以设置为 2）。 min: 2, // 需要给出数值范围，最小数值。 max: 15, // 需要给出数值范围，最大数值。 inRange: { // 气泡尺寸：5 像素到 60 像素。 symbolSize: [5, 60] } }, xAxis: {}, yAxis: {}, series: { type: 'scatter' } };
Q: encode specified in the mapping, but does not work?
A: You can look up there is not misspelled, for example, the dimension name is: 'Life Expectancy', encode in a spell 'Life Expectency'.
Various formats of data
Common chart, the data form suitable for describing two-dimensional table. Widely used spreadsheet software (such as MS Excel, Numbers) are two-dimensional or relational database tables. Their data can be exported into JSON format, is input to the dataset.source middle, in many cases some data processing steps may be eliminated.
If the data exported into a csv file, you can use some tools such as csv dsv or PapaParse will turn into a csv JSON.
JavaScript is often used in a data transmission format, more intuitive two-dimensional array can be stored in two-dimensional table. The previous example is a two-dimensional array representation.
In addition to the two-dimensional array, dataset also supports data formats such as key-value way below, this type of format is also very common. But this type of format, does not currently support seriesLayoutBy parameters.
dataset: [{ // 按行的 key-value 形式（对象数组），这是个比较常见的格式。 source: [ {product: 'Matcha Latte', count: 823, score: 95.8}, {product: 'Milk Tea', count: 235, score: 81.4}, {product: 'Cheese Cocoa', count: 1042, score: 91.2}, {product: 'Walnut Brownie', count: 988, score: 76.9} ] }, { // 按列的 key-value 形式。 source: { 'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'], 'count': [823, 235, 1042, 988], 'score': [95.8, 81.4, 91.2, 76.9] } }]
多个 dataset 和他们的引用
可以同时定义多个 dataset。系列可以通过 series.datasetIndex 来指定引用哪个 dataset。
var option = { dataset: [{ // 序号为 0 的 dataset。 source: [...], }, { // 序号为 1 的 dataset。 source: [...] }, { // 序号为 2 的 dataset。 source: [...] }], series: [{ // 使用序号为 2 的 dataset。 datasetIndex: 2 }, { // 使用序号为 1 的 dataset。 datasetIndex: 1 }] }ECharts data setting mode 3 (series.data) still use normal
ECharts data declarations before the 4 way has been the support is still normal, if the series has been declared series.data , it will use series.data instead dataset.
{ xAxis: { type: 'category' data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'] }, yAxis: {}, series: [{ type: 'bar', name: '2015', data: [89.3, 92.1, 94.4, 85.4] }, { type: 'bar', name: '2016', data: [95.8, 89.4, 91.2, 76.9] }, { type: 'bar', name: '2017', data: [97.7, 83.1, 92.5, 78.1] }] }
In fact, series.data is kind of important settings mode will always exist. Some special graphs non-table format,
such as TreeMap , Graph , Lines , and now still do not support setting in the dataset, still need to use series.data .
In addition, for the huge amount of data rendering (such as the amount of data more than a million), requires the use of appendData incremental loading, this situation is not supporteddataset.
other
There are two charts need only declare two instances like in a page
Not all charts are supported dataset. Support dataset chart lineare: bar, pie, scatter, effectScatter, parallel, candlestick, map, funnel, custom, . There will be more follow-up chart support.
At last,
Give an example, a plurality of graphs share datasetand interact with linkage:
code：
setTimeout(function () {
option = {
legend: {},
tooltip: {
trigger: 'axis',
showContent: false
},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
]
},
xAxis: {type: 'category'},
yAxis: {gridIndex: 0},
grid: {top: '55%'},
series: [
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{
type: 'pie',
id: 'pie',
radius: '30%',
center: ['50%', '25%'],
label: {
formatter: '{b}: {@2012} ({d}%)'
},
encode: {
itemName: 'product',
value: '2012',
tooltip: '2012'
}
}
]
};
myChart.on('updateAxisPointer', function (event) {
var xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
var dimension = xAxisInfo.value + 1;
myChart.setOption({
series: {
id: 'pie',
label: {
formatter: '{b}: {@[' + dimension + ']} ({d}%)'
},
encode: {
value: dimension,
tooltip: dimension
}
}
});
}
});
myChart.setOption(option);
});