Echarts中dataset可设置数据源切换 - 好文

多个 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 }] }
eg:
 <div id="main" style="width: 1000px;height:
600px;"></div> <script> // 基于准备好的dom，初始化echarts实例 var myChart =
echarts.init(document.getElementById('main')); var option = { dataset: [
{source: [ ['score', 'amount', 'product'], [89.3, 58212, 'Matcha Latte0'],
[57.1, 78254, 'Milk Tea0'], [74.4, 41032, 'Cheese Cocoa0'], [50.1, 12755,
'Cheese Brownie0'], [89.7, 20145, 'Matcha Cocoa0'], [68.1, 79146, 'Tea0'],
[19.6, 91852, 'Orange Juice0'], [10.6, 101852, 'Lemon Juice0'], [32.7, 20112,
'Walnut Brownie0'] ],}, {source: [ ['score', 'amount', 'product'], [89.3, 58,
'Matcha Latte1'], [57.1, 78, 'Milk Tea1'], [74.4, 41, 'Cheese Cocoa1'], [50.1,
12, 'Cheese Brownie1'], [89.7, 26, 'Matcha Cocoa1'], [68.1, 79, 'Tea1'], [19.6,
91, 'Orange Juice1'], [10.6, 10, 'Lemon Juice1'], [32.7, 20, 'Walnut Brownie1']
],}, {source: [ ['product', 'score', 'name'], [89.3, 22222, 'Matcha Latte2'],
[57.1, 33333, 'Milk Tea2'], [74.4, 44444, 'Cheese Cocoa2'], [50.1, 55555,
'Cheese Brownie2'], [89.7, 66666, 'Matcha Cocoa2'], [68.1, 77777, 'Tea2'],
[19.6, 88888, 'Orange Juice2'], [10.6, 99999, 'Lemon Juice2'], [32.7, 56565,
'Walnut Brownie2'] ]} ], xAxis: {}, yAxis: {type: 'category'}, visualMap: {
orient: 'horizontal', left: 'center', min: 1888, max: 33333, text: ['High
Score', 'Low Score'], // Map the score column to color dimension: 0, inRange: {
color: ['#D7DA8B', '#E15457'] } }, series: [ {datasetIndex: 1, type: 'bar',
encode: { // 将 "amount" 列映射到 X 轴。 x: 'score', // 将 "product" 列映射到 Y 轴。 y:
'product' } }, {datasetIndex: 2, type: 'bar', encode: { // 将 "amount" 列映射到 X 轴。
x: 'score', // 将 "product" 列映射到 Y 轴。 y: 'product' } }, {datasetIndex: 0, type:
'bar', encode: { // 将 "amount" 列映射到 X 轴。 x: 'amount', // 将 "product" 列映射到 Y 轴。
y: 'product' } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);
 <div id="main" style="width: 1000px;height:
600px;"></div> <script> // 基于准备好的dom，初始化echarts实例 var myChart =
echarts.init(document.getElementById('main')); var option = { dataset: [
{source: [ ['score', 'amount', 'product'], [89.3, 58212, 'Matcha Latte0'],
[57.1, 78254, 'Milk Tea0'], [74.4, 41032, 'Cheese Cocoa0'], [50.1, 12755,
'Cheese Brownie0'], [89.7, 20145, 'Matcha Cocoa0'], [68.1, 79146, 'Tea0'],
[19.6, 91852, 'Orange Juice0'], [10.6, 101852, 'Lemon Juice0'], [32.7, 20112,
'Walnut Brownie0'] ],}, {source: [ ['score', 'amount', 'product'], [89.3, 58,
'Matcha Latte1'], [57.1, 78, 'Milk Tea1'], [74.4, 41, 'Cheese Cocoa1'], [50.1,
12, 'Cheese Brownie1'], [89.7, 26, 'Matcha Cocoa1'], [68.1, 79, 'Tea1'], [19.6,
91, 'Orange Juice1'], [10.6, 10, 'Lemon Juice1'], [32.7, 20, 'Walnut Brownie1']
],}, {source: [ ['product', 'score', 'name'], [89.3, 22222, 'Matcha Latte2'],
[57.1, 33333, 'Milk Tea2'], [74.4, 44444, 'Cheese Cocoa2'], [50.1, 55555,
'Cheese Brownie2'], [89.7, 66666, 'Matcha Cocoa2'], [68.1, 77777, 'Tea2'],
[19.6, 88888, 'Orange Juice2'], [10.6, 99999, 'Lemon Juice2'], [32.7, 56565,
'Walnut Brownie2'] ]} ], xAxis: {}, yAxis: {type: 'category'}, visualMap: {
orient: 'horizontal', left: 'center', min: 1888, max: 33333, text: ['High
Score', 'Low Score'], // Map the score column to color dimension: 0, inRange: {
color: ['#D7DA8B', '#E15457'] } }, series: [ // {datasetIndex: 1, // type:
'bar', // encode: { // // 将 "amount" 列映射到 X 轴。 // x: 'score', // // 将 "product"
列映射到 Y 轴。 // y: 'product' // } // }, // {datasetIndex: 2, // type: 'bar', //
encode: { // // 将 "amount" 列映射到 X 轴。 // x: 'score', // // 将 "product" 列映射到 Y 轴。
// y: 'product' // } // }, {datasetIndex: 0, type: 'bar', encode: { // 将
"amount" 列映射到 X 轴。 x: 'amount', // 将 "product" 列映射到 Y 轴。 y: 'product' } } ] };
// 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);
就可以根据不同的数据源显示不同的图像。

热门工具换一换