Echarts: мои графики p ie блокируют мой линейный график, пока я собираюсь связать их вместе - PullRequest
Новая
       31

Echarts: мои графики p ie блокируют мой линейный график, пока я собираюсь связать их вместе

0 голосов
/ 26 апреля 2020

Как я могу связать диаграмму p ie и линейную диаграмму вместе, а не появляться по одному? А графики p ie, которые появляются позже линейного графика, будут блокировать линейный график. Есть ли вероятность, что p ie и линия могут появиться вместе в конце? Текущая ситуация такова: в начале , , а затем .

Это код 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>

1 Ответ

0 голосов
/ 26 апреля 2020

Я немного изменил ваш код в части вставки серий, по моему мнению, нужно вставлять серии полностью, потому что частичные вставки иногда вызывают проблемы с объединением данных. Также я исправил вычисление координат, более корректным способом берём уже рассчитанные координаты из линии, если они одинаковые. 

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>
...