当前位置：文江博客话题详情

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

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

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

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 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 官网就有现成的例子：

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


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

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

23 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

友情链接

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

原文