ECharts使用dataset管理数据

  • Apache ECharts (incubating)TM 4 开始支持了 dataset 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。这在不少场景下能带来使用上的方便。
    数据集（dataset）组件来单独声明数据，它带来了这些效果：
  • 能够贴近这样的数据可视化常见思维方式：(I) 提供数据，(II) 指定数据到视觉的映射，从而形成图表。
  • 数据和其他配置可以被分离开来。数据常变，其他配置常不变。分开易于分别管理。
  • 数据可以被多个系列或者组件复用，对于大数据量的场景，不必为每个系列创建一份数据。
  • 支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。

1、Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用dataset管理数据</title>
    <!--引入Echarts文件-->
    <script src="js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    var dom=document.getElementById("main");
    var myChart=echarts.init(dom);
    var app={};
    var option=null;

    // 初始 option
    option = {
        legend:{},
        tooltip:{},
        dataset:{
            //提供一份数据
            source:[
                ['product','2015','2016','2017'],
                ['Matcha Latte',43.3,85.8,93.7],
                ['Milk Tea',83.1,73.4,55.1],
                ['Cheese Cocoa',86.4,65.2,82.5],
                ['Walnut Brownie',72,4,53.9,39.1]
            ]
        },
        //声明一个X轴，类目轴(category).默认情况下，类目轴对应到dataset第一列
        xAxis:{type:'category'},
        //声明一个Y轴，数值轴
        yAxis:{},
        //声明多个bar系列，默认情况下,每个系列会自动对应到dataset的每一列
        series:[
            {type:'bar'},
            {type:'bar'},
            {type:'bar'}
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</body>
</html>

2、效果:

ECharts使用dataset管理数据_echarts

3、也可以使用常见的对象数组的格式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用dataset管理数据</title>
    <!--引入Echarts文件-->
    <script src="js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    var dom=document.getElementById("main");
    var myChart=echarts.init(dom);
    var app={};
    var option=null;
    option = {
        legend: {},
        tooltip: {},
        dataset: {
            // 用 dimensions 指定了维度的顺序。直角坐标系中，
            // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
            // 如果不指定 dimensions，也可以通过指定 series.encode
            // 完成映射，参见后文。
            dimensions: ['product', '2015', '2016', '2017'],
            source: [
                {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
                {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
                {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
                {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        series: [
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'}
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</body>
</html>

ECharts使用dataset管理数据_js_02