Echarts:My pie charts block my line chart while I'm intended to bind them together

Question

How can I bind pie chart and line chart together rather than appear one by one? And the pie charts which appear later than line chart will block the line chart. Is there any chance the pie and line can appear together in the end? The current situation is that at the beginning , and then .

This is the JS code.

    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);


    });

and

<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

I changed your code a bit in the series insertion part, by my opinion need inserting series completely because partial inserts sometimes cause problems with merging data. Also I fixed coordinate calculation, more correct way take the already calculated coordinates from line if they the same.

 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>