echarts使用多个dataset，一个canvas上显示多种图

Mrceel

已于 2024-06-25 14:29:55 修改

阅读量451

点赞数

分类专栏：前端文章标签： echarts 前端

于 2023-07-14 09:29:11 首次发布

本文链接：https://blog.csdn.net/Mrceel/article/details/131716386

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

下面代码直接复制到echarts示例中：直通车

主要用到 Grid 属性。
在这里插入图片描述

option ={
    "grid": [
        {
            "containLabel": true,
            "left": 0,
            "right": 2,
            "bottom": "54%"
        },
        {
            "containLabel": true,
            "left": 0,
            "right": 2,
            "bottom": 40,
            "height": "45%"
        }
    ],
    "axisPointer": { // 是否联动显示tooltip
        "link": {
            "xAxisIndex": "all"
        }
    },
    "tooltip": {
        "trigger": "axis",
        "show": true
    },
    dataset: [
      {
        dimensions: [ 'name', 'C001'],
        source: [
          {
            name: 'id', C001: 231, C002: 189
          },
          {
            name: 'id1', C001: 120, C002: 131
          }
        ]
      },
      {
        dimensions: [ 'name', 'C001'],
        source: [
          {
            name: 'id1', C001: 731, C002: 131
          },
          {
            name: 'id2', C001: 201, C002: 131
          }
        ]
      }
    ],
    "xAxis": [
        {
            "show": true,
            "name": "",
            "type": "category",
            "boundaryGap": true,
            "nameLocation": "end",
            "nameGap": 20,
        },
        {
            "show": true,
            "name": "",
            "type": "category",
            "boundaryGap": true,
            "gridIndex": 1,
            "position": "top",
            "nameLocation": "end",
            "nameGap": 20,
        }
    ],
    "yAxis": [
        {
            "name": "得分",
            "show": true,
            "nameLocation": "end",
            "nameGap": 20,
            "type": "value",
            "axisLine": {
                "show": true
            },
            "axisLabel": {
                "show": true,
                "margin": 12
            },
            "splitLine": {
                "show": false
            }
        },
        {
            "name": "得分()",
            "show": true,
            "nameLocation": "end",
            "nameGap": 20,
            "type": "value",
            "gridIndex": 1,
            "inverse": true, // 倒转图
            "axisLine": {
                "show": true
            },
            "axisLabel": {
                "show": true,
                "margin": 12
            },
            "splitLine": {
                "show": false,
            },
            "axisTick": {
                "show": true
            }
        }
    ],
    "series": [
        {
          datasetIndex: 0,
            "name": "本月得分",
            "type": "line",
          // 设置使用那个「x、y」系列
            "xAxisIndex": 0,
            "yAxisIndex": 0
        },
        {
            datasetIndex: 1,
            "name": "上月得分",
            "type": "line",
            // 设置使用那个「x、y」系列
            "xAxisIndex": 1,
            "yAxisIndex": 1
        }
    ]
}