Echarts:My 饼图挡住了我的折线图，而我打算将它们绑定在一起

Question

如何将饼图和折线图绑定在一起而不是一个一个出现？而比折线图晚出现的饼图会遮挡折线图。最后饼和线有没有可能一起出现？目前的情况是 at the beginning,and then.

这是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>

Echarts:My 饼图挡住了我的折线图，而我打算将它们绑定在一起

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

javascript

pie-chart

echarts