柱状图加动态数据实现

 

 //获取动态数据

var PBName = [];
    var pbcnt = [];
    var acnt = [];

    var mydata=[];
    $.ajax({
        type: "post",
        async: false,
        url: '@Url.Content("~/")' + "App/Countpbcntacnt",
        data: {
                AppActivityID: "@Model.AppActivityID"                   
                     },
        success: function (da) {
            for (var i = 0; i < da.PBName.length; i++) {
                    PBName.push(da.PBName[i]);
                    pbcnt.push(da.pbcnt[i]);
                    acnt.push(da.acnt[i]);
                    mydata[i] = { product: da.PBName[i], '可参与人数': da.pbcnt[i], '已参与人数': da.acnt[i] };
               }           
            }        
         })

 

//静态html

// bingtu    柱状图所在div的id

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

    option = {
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '4%',
            containLabel: true
        },
        tooltip: {},
        dataset: {
            dimensions: ['product', '可参与人数', '已参与人数'],
            source: mydata

//mydata 动态数据
              // { product: 'Walnut Brownie', '可参与人数': 72.4, '已参与人数': 53.9 } 静态数据
            
        },
        xAxis: {
            type: 'category',
            axisLabel: { interval: 0, rotate: 50 },
        },
        yAxis: {},

        series: [
            { type: 'bar' },
            { type: 'bar' }
            
        ]
    };

//rotate 字体偏移幅度 360度计算

    option && myChart.setOption(option);