Echarts：我的餅圖擋住了我的折線圖，而我打算將它們綁定在一起

Question

如何將餅圖和折線圖綁定在一起，而不是一一出現？ 並且出現在折線圖之后的餅圖會遮擋折線圖。 餡餅和線最后有沒有機會一起出現？ 目前的情況是，一開始，然后。

這是JS代碼。

    var dom2 = document.getElementById('demo');
    var chart = echarts.init(dom2);

    var option = {
        title: {
            text: '中葯與疾病'
        },
        tooltip: {},
        legend: {
            data: ['中葯', '疾病']
        },
        xAxis: {
            data: []
        },
        yAxis: [
            {},
            {}
        ],
        series: [
            {
                name: '中葯',
                type: 'line',
                data: [],
                yAxisIndex: 0
            },
            {
                name: '疾病',
                type: 'line',
                data: [],
                yAxisIndex: 1
            }
        ]

    }

    chart.setOption(option);


    $.get('https://gist.githubusercontent.com/Linya-gzl/4d4f388e1b0e3d8e05c38f875b94a97c/raw/8c121acbfaf4aac9eccaf6b81cd1b3614203c185/demo1.json').done(function (data) {
        dataArr = JSON.parse(data);
        console.log(dataArr);
        chart.setOption({
            xAxis: {
                data: dataArr.map(row => row['categories'])
            },
            series: [{
                name: '中葯',
                data: dataArr.map(row => row['value1'])
            },
            {
                name: '疾病',
                data: dataArr.map(row => row['value2'])
            }]
        });

        function buildPieSeries() {
            var len = dataArr.length;
            for (var i = 0; i < len; i++) {
                option.series.push({
                    type: 'pie',
                    radius: 15,
                    center: [110 + 90 * i, dataArr[i].value2 - 100],
                    label: {
                        show: true,
                        textStyle: {
                            fontSize: 8
                        }
                    },
                    data: [
                        { value: dataArr[i].value1, name: '黃連' },
                        { value: dataArr[i].value2, name: '黃芩' },
                    ]
                })
            }                
            chart.setOption(option, true);

        }
        setTimeout(buildPieSeries, 1000);


    });

和

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.7.0/echarts.min.js" integrity="sha256-eKrx6Ly6b0Rscx/PSm52rJsvK76RJyv18Toswq+OLSs=" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<div id="demo" style="width: 600px;height:400px;"></div>

Answer 1

我在系列插入部分更改了您的代碼，我認為需要完全插入系列，因為部分插入有時會導致合並數據出現問題。 我還修復了坐標計算，如果它們相同，更正確的方法是從線中獲取已經計算的坐標。

 document.addEventListener("DOMContentLoaded", e => { var targetNode = document.querySelector('#chartNode'); var chartInstance = echarts.init(targetNode); var option = { title: { text: '中葯與疾病' }, tooltip: {}, legend: { data: ['中葯', '疾病'] }, xAxis: { data: [] }, yAxis: [ {}, {} ], series: [ { name: '中葯', type: 'line', data: [], yAxisIndex: 0 }, { name: '疾病', type: 'line', data: [], yAxisIndex: 1 } ] } chartInstance.setOption(option); $.get('https://gist.githubusercontent.com/Linya-gzl/4d4f388e1b0e3d8e05c38f875b94a97c/raw/8c121acbfaf4aac9eccaf6b81cd1b3614203c185/demo1.json').done(function (data) { dataArr = JSON.parse(data); chartInstance.setOption({ xAxis: { data: dataArr.map(row => row['categories']) }, series: [{ name: '中葯', data: dataArr.map(row => row['value1']) }, { name: '疾病', data: dataArr.map(row => row['value2']) }]}); pieSeries = chartInstance.getOption().series; function buildPieSeries() { var len = dataArr.length; for (var i = 0; i < len; i++) { pieSeries.push({ type: 'pie', radius: 15, z: 10, center: chartInstance.getModel().getSeriesByName('中葯')[0].getData().getItemLayout(i), // center: [110 + 90 * i, dataArr[i].value2 - 100], label: { show: true, textStyle: { fontSize: 8 }}, data: [ { value: dataArr[i].value1, name: '黃連' }, { value: dataArr[i].value2, name: '黃芩' }, ] }) }; chartInstance.setOption({ series: pieSeries }); } setTimeout(() => buildPieSeries(), 1000); }); });

 <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="chartNode" style="width: 600px;height:400px;"></div>