ECharts 示例——双Y轴

最新推荐文章于 2024-09-10 17:04:48 发布

mighty13

最新推荐文章于 2024-09-10 17:04:48 发布

阅读量3.1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： ECharts 文章标签： echarts 双Y轴 dataset

本文链接：https://blog.youkuaiyun.com/mighty13/article/details/118570656

ECharts 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍如何在ECharts 5.1.2中设置双Y轴，包括数据系列的颜色调整、数据标签的字体配置和使用dataset管理数据。通过实例演示了如何共享X轴并展示不同维度的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当前ECharts版本为5.1.2。

概述

按照对ECharts双Y轴图进行如下设置：

两个Y轴共用1个X轴。
数据系列：修改柱子和折线颜色
数据标签：修改字体大小、样式
数据组件：使用dataset管理数据，便于使用表格数据

配置项

option = {

    legend: {
        data: ['销量（支）', '营业额（万元）']
    },
    dataset:{
        source:[
            ['2020年12月', 13700, 287],
            ['2021年1月', 44820, 941],
            ['2021年2月', 92850, 1950],
            ['2021年3月', 1775800, 37291],
            ['2021年4月', 3620600, 75825],
            ['2021年5月', 6020600, 139000]
            ]
    },    
    xAxis: {
        type: 'category',
        splitLine: {
            show: false,
    　　},
    },
    yAxis: [
        {
            type: 'value',
            name: '销量（支）',
                    splitLine: {
            show: false,

    　　},
    　　nameLocation: "middle",
        nameGap:70

        },
        {
            type: 'value',
            name: '营业额（万元）',
                    splitLine: {
            show: false,

    　　},
    　　nameLocation: "middle",
        nameGap:50

        }
    ],
    series: [
        {
            name: '销量（支）',
            type: 'bar',
            color:"#5470C6"},

        {
            name: '营业额（万元）',
            type: 'line',
            yAxisIndex: 1,
            color:"#FC8452",
            label: {
                position: [-35, -20],
                show: true,
                fontSize:14,
                color:"#FC8452",
            }
        }
    ]
};