echarts dataset的理解

最新推荐文章于 2024-06-03 23:02:52 发布

张哲1234

最新推荐文章于 2024-06-03 23:02:52 发布

阅读量514

点赞数

分类专栏： ecahrts vue学习记录文章标签：前端

本文链接：https://blog.youkuaiyun.com/zz18256889177/article/details/113898609

版权

vue学习记录同时被 2 个专栏收录

12 篇文章

订阅专栏

ecahrts

1 篇文章

订阅专栏

文档原文：

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'}
    ]
}

换成比较好理解的代码：

option = {
    legend: {},
    tooltip: {},
    dataset: {
      	dimension:['product', '2015', '2016', '2017'],
        // 提供一份数据。
        source: [
            ['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'}
    ]
}

声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。

第一列有四个数据：Matcha Latte，Milk Tea，Cheese Cocoa，Walnut Brownie 也就说x轴上面有4个类目
在这里插入图片描述

声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。

上面声明了三个系列：

在这里插入图片描述

系列一：43.3， 83.1，86.4，72.4

系列二：85.8，73.4，65.2，53.9

系列三：93.7，55.1，82.5，39.1

如果：

 series: [
        {type: 'bar'},
        {type: 'bar'}
    ]

每个里面有两个柱状图

在这里插入图片描述