echart动态柱形图数据渲染

echart动态柱形图数据渲染

html

<div id="company_number"></div>

js

var app = {};

    var chartDom = document.getElementById('company_number');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#283b56'
                }
            }
        },
        legend: {
            data: ['企业分数']
        },
        dataZoom: {
            show: false,
            start: 0,
            end: 100
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                axisLabel: {
                    interval:0,
                    rotate:40,
                    formatter:function (value) {
                        return value.length > 5?value.substring(0,5)+'...':value;
                    }
                },
                data: []
            },
            {
                type: 'category',
                boundaryGap: true,
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value',
                scale: false,
            },
            {
                type: 'value',
                scale: true,
                name: '企业分数',
                max: 1200,
                min: 0,
                boundaryGap: [0.2, 0.2]
            }
        ],
        series: [
            {
                name: '企业分数',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                itemStyle: {
                    color: '#48C971',
                },
                data: []
            }
        ]
    };

   function test(){
       $.ajax({
           type: 'post',
           url: "/scc/接口名称",
           success: function (r) {
               function res1(){
                   var now = r.companyNames;
                   var nowLen = r.companyNames.length;
                   for (let i = 0; i < nowLen; i++) {
                       option.xAxis[0].data.push(now[i]);
                   }
               };
               res1();

               function res2(){
                   var len = 0;
                   if(r.scopes.length < 10){
                       len=r.scopes.length;
                   }else{
                       len=10;
                   }
                   for (let i = 0; i < len; i++) {
                       option.xAxis[1].data.push(i+1);
                   }
               };
               res2();
               function res3(){
                   var now = r.scopes;
                   var len = 0;
                   if(r.scopes.length < 10){
                       len=r.scopes.length;
                   }else{
                       len=10;
                   }
                   for (let i = 0; i < len; i++) {
                       option.series[0].data.push(now[i]);
                   }
               };
               res3();

               var len = 0;
               if(r.scopes.length < 10){
                   len=0;
                   app.count = r.scopes.length+1;
               }else{
                   len=10;
                   app.count = 11;
               }
               setInterval(function () {
                   var axisData = [];
                   var dataNum;
                   len++;
                   if(len > r.scopes.length){
                       len=1
                   }
                   axisData.push(r.companyNames[len-1]);
                   dataNum=r.scopes[len-1];
                   var data0 = option.series[0].data;
                   data0.shift();
                   data0.push(dataNum);
                   option.xAxis[0].data.shift();
                   option.xAxis[0].data.push(axisData);
                   option.xAxis[1].data.shift();
                   option.xAxis[1].data.push(app.count++);
                   myChart.setOption(option);
               }, 2100);
           }
       });
   }
    test();
    option && myChart.setOption(option);