Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

echarts 制作多坐标系的问题

我想要在一个 echarts 图形中显示两个坐标系的图形,达到下面的效果
image
我的源码如下,没有实现也没有报错,不知道什么问题

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.js"></script>
    <style>
        #chart {
            width: 800px;
            height: 400px;
        }
    </style>
    <script>// 自定义主题
        (function (root, factory) {
            if (typeof define === 'function' && define.amd) {
                // AMD. Register as an anonymous module.
                define(['exports', 'echarts'], factory);
            } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
                // CommonJS
                factory(exports, require('echarts'));
            } else {
                // Browser globals
                factory({}, root.echarts);
            }
        }(this, function (exports, echarts) {
            var log = function (msg) {
                if (typeof console !== 'undefined') {
                    console && console.error && console.error(msg);
                }
            };
            if (!echarts) {
                log('ECharts is not Loaded');
                return;
            }
            var colorPalette = ['#d87c7c','#919e8b', '#d7ab82',  '#6e7074','#61a0a8','#efa18d', '#787464', '#cc7e63', '#724e58', '#4b565b'];
            echarts.registerTheme('vintage', {
                color: colorPalette,
                backgroundColor: '#fef8ef',
                graph: {
                    color: colorPalette
                }
            });
        }));
    </script>
</head>
<body>
    <div id="chart"></div>
    <script text="text/javascript">
        const chartDom = document.getElementById('chart');
        const chart = echarts.init(chartDom,'vintage');// 使用默认渲染方式 canvas
        // const chart = echarts.init(chartDom,'vintage',{renderer:'svg'});
        chart.setOption({
            xAxis: [ 
                { type: 'category',gridIndex: 0 },// 第一套坐标系的横轴
                { type: 'category',gridIndex: 1} // 第二套坐标系的横轴
            ],
            yAxis: [
                { min: 0,max: 100,gridIndex:0 },// 控制左边纵向坐标系的最小和最大刻度,第一套坐标系的第一个纵轴
                { splitLine: { show:false },gridIndex:0 },// 隐藏右边纵向坐标系的横线,第一套坐标系的第二个纵轴
                { minx: 0,max: 150,gridIndex:1} // 第二个坐标系的纵轴
            ],
            grid:[{ bottom:'55%' },{ top:'55%' }],
            dataset: {
                source: [ // 单坐标系的数据是模型形式的数据 - DB中的单行数据体现为前端的一个对象整体显示
                    ['product','2012','2013','2014','2015'],// 两个纵向坐标系的图表时,数据源是纵向体现 - 相比上面的横向体现
                    ['Matcha Latte',41.1,30.4,65.1,53.3],
                    ['Milk Tea',86.5,92.1,85.7,83.1]
                ]
            },
            series: [
                { // 第一套坐标系的柱状图
                    type: 'bar',
                    seriesLayoutBy: 'row',// 单坐标系的模型完整体现模式下不需要设置该参数
                    xAxisIndex: 0,
                    yAxisIndex: 0
                },
                { // 第一套坐标系的折线图
                    type: 'line',
                    seriesLayoutBy: 'row',
                    xAxisIndex: 0,
                    yAxisIndex: 1
                },
                { // 第二套坐标系的柱状图
                    type: 'bar',
                    seriesLayoutBy: 'row',
                    xAxisIndex: 1,
                    yAxisIndex: 2
                }
            ]
            
        });
    </script>
</body>
</html>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

立即执行函数是(function(){})(),需要在script中加上括号。
加上后执行效果如下图:
image


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...