请问一下这种echarts图怎么画,数据要怎么配置

发布于 2022-09-13 00:05:24 字数 92 浏览 18 评论 0

image.png
这个是ui设计的图,两个x轴,data怎么嵌套

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

猫九 2022-09-20 00:05:24

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/echarts-nightly@5.1.2-dev.20210512/dist/echarts.min.js"></script>

    <script>
        var option = {
            legend: {},
            tooltip: {},
            dataset: {
                dimensions: ['product', '2015', '2016'],
                source: [{
                        product: 'A1',
                        '2015': 43.3,
                        '2016': 85.8
                    },
                    {
                        product: 'B1',
                        '2015': 83.1,
                        '2016': 73.4
                    },
                    {
                        product: 'C1',
                        '2015': 86.4,
                        '2016': 65.2
                    },
                    {
                        product: 'A2',
                        '2015': 23.3,
                        '2016': 35.8
                    },
                    {
                        product: 'B2',
                        '2015': 43.1,
                        '2016': 103.4
                    },
                    {
                        product: 'C2',
                        '2015': 56.4,
                        '2016': 85.2
                    }
                ]
            },
            xAxis: [{
                type: 'category'
            }, {
                type: 'category',
                data: ['Title1', 'Title2']
            }],
            yAxis: {},
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [{
                    type: 'bar'
                },
                {
                    type: 'bar'
                }
            ]
        };
    </script>
</body>

</html>
猫卆 2022-09-20 00:05:24

ECharts 官网就有现成的例子

image.png

当然,里头有些冗余的配置,删掉冗余之后大致是这样:


option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {show: false},
            data: ['2012', '2013', '2014', '2015', '2016']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: 'Forest',
            type: 'bar',
            barGap: 0,
            emphasis: {
                focus: 'series'
            },
            data: [320, 332, 301, 334, 390]
        },
        {
            name: 'Steppe',
            type: 'bar',
            emphasis: {
                focus: 'series'
            },
            data: [220, 182, 191, 234, 290]
        }
    ]
};

渲染结果:
图片.png

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文