将值添加到动态序列中的数据 - echarts

我已经使用echarts创建了一个条形图。我想动态地将多个值绑定到数据对象，目前我只能绑定单个值。这是我的Java脚本。我是一个新手，希望有一个功能完善的解决方案。将值添加到动态序列中的数据 - echarts

var myChart = echarts.init(document.getElementById('page_views_today')); 

    var option = { 

     // Setup grid 
     grid: { 
      zlevel: 0, 
      x: 20, 
      x2: 40, 
      y: 20, 
      y2: 20, 
      borderWidth: 0, 
      backgroundColor: 'rgba(0,0,0,0)', 
      borderColor: 'rgba(0,0,0,0)', 
     }, 

     // Add tooltip 
     tooltip: { 
      trigger: 'axis', 
      axisPointer: { 
       type: 'shadow', // line|shadow 
       lineStyle: { color: 'rgba(0,0,0,.5)', width: 1 }, 
       shadowStyle: { color: 'rgba(0,0,0,.1)' } 
      } 
     }, 

     // Add legend 
     legend: { 
      data: [] 
     }, 
     toolbox: { 
      orient: 'vertical', 
      show: true, 
      showTitle: true, 
      color: ['#bdbdbd', '#bdbdbd', '#bdbdbd', '#bdbdbd'], 
      feature: { 
       mark: { show: false }, 
       dataZoom: { 
        show: true, 
        title: { 
         dataZoom: 'Data Zoom', 
         dataZoomReset: 'Reset Zoom' 
        } 
       }, 
       dataView: { show: false, readOnly: true }, 
       magicType: { 
        show: true, 
        itemSize: 12, 
        itemGap: 12, 
        title: { 
         line: 'Line', 
         bar: 'Bar', 
        }, 
        type: ['line', 'bar'], 
        option: { 
         /*line: { 
          itemStyle: { 
           normal: { 
           color:'rgba(3,1,1,1.0)', 
           } 
          }, 
          data: [1,2,3,4,5,6,7,8,9,10,11,12] 
         }*/ 
        } 
       }, 
       restore: { show: false }, 
       saveAsImage: { show: true, title: 'Save as Image' } 
      } 
     }, 

     // Enable drag recalculate 
     calculable: true, 

     // Horizontal axis 
     xAxis: [{ 
      type: 'category', 
      boundaryGap: false, 
      data: [ 
       '0h-2h', '2h-4h', '4h-6h', '6h-8h', '8h-10h', '10h-12h', '12h-14h', '14h-16h', '16h-18h', '18h-20h', '20h-22h', '22h-24h' 
      ], 
      axisLine: { 
       show: true, 
       onZero: true, 
       lineStyle: { 
        color: 'rgba(63,81,181,1.0)', 
        type: 'solid', 
        width: '2', 
        shadowColor: 'rgba(0,0,0,0)', 
        shadowBlur: 5, 
        shadowOffsetX: 3, 
        shadowOffsetY: 3, 
       }, 
      }, 
      axisTick: { 
       show: false, 
      }, 
      splitLine: { 
       show: false, 
       lineStyle: { 
        color: '#fff', 
        type: 'solid', 
        width: 0, 
        shadowColor: 'rgba(0,0,0,0)', 
       }, 
      }, 
     }], 

     // Vertical axis 
     yAxis: [{ 
      type: 'value', 
      splitLine: { 
       show: false, 
       lineStyle: { 
        color: 'fff', 
        type: 'solid', 
        width: 0, 
        shadowColor: 'rgba(0,0,0,0)', 
       }, 
      }, 
      axisLabel: { 
       show: false, 
      }, 
      axisTick: { 
       show: false, 
      }, 
      axisLine: { 
       show: false, 
       onZero: true, 
       lineStyle: { 
        color: '#ff0000', 
        type: 'solid', 
        width: '0', 
        shadowColor: 'rgba(0,0,0,0)', 
        shadowBlur: 5, 
        shadowOffsetX: 3, 
        shadowOffsetY: 3, 
       }, 
      }, 


     }], 

     // Add series 
     series: [ 
      { 
       name: 'Page Views', 
       type: 'bar', 
       smooth: true, 
       symbol: 'none', 
       symbolSize: 2, 
       showAllSymbol: true, 
       barWidth: 10, 
       itemStyle: { 
        normal: { 
         color: 'rgba(63,81,181,1.0)', 
         borderWidth: 2, borderColor: 'rgba(63,81,181,1)', 
         areaStyle: { color: 'rgba(63,81,181,1)', type: 'default' } 
        } 
       }, 

       data: [] 
      } 
     ] 
    };

这是我的java脚本函数，我想从中动态绑定这些值。

// Load data into the ECharts instance 
    load_graph_with_positions(option); 

    function load_graph_with_positions(option) { 
      option.series[0].data[0] = 1234; 
     myChart.setOption(option); 
    }

来源

2017-02-09 Joy Fernandes

实现此目的的一种方法是将值传入数组，然后移入先前的值，同时推入数据。以下是石亭的例子，推动数据：

option.series[0].data.shift(); 
option.series[0].data.push(json.num);

因此你的函数将变为：

function load_graph_with_positions(option,values) { 
    var valuesLength = values.length; 
    for (var i = 0; i < valuesLength; i++) { 
     option.series[0].data.shift(); 
     option.series[0].data.push(values[i]); 
    } 
    myChart.setOption(option); 
}

您也可以参考下面的动态添加github上例如： https://github.com/hisune/Echarts-PHP/blob/master/demo/dynamic.php

来源

2018-02-08 22:15:45 Sam

将值添加到动态序列中的数据 - echarts

回答

相关问题