问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
zhou_ofer
    13
    新手上路，请多包涵

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

    echarts
    阅读 1.3k
    2 个回答
    得票最新
    头像
    fwind
      4814

      <!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>
      头像
      知名喷子
        5.9k31631

        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

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题
        宣传栏