echarts动态加载饼状图数据

echarts动态加载饼状图数据

<!-- 为ECharts准备一个div -->
<div id="myChart1" style="width: 600px;height:400px;"></div>

ajax往echarts表中填数据
1、查询要赋值的数据
2、生成图表，把值放进去

	 var xq = document.getElementById("myChart1");
     var xqChart = echarts.init(xq);
     var xqapp = {};

     // 数据加载前的动画
     xqChart.showLoading();

     //  定义两个数组 接收后台的数据
     var demo1= [];
     var demo2= [];

     $.ajax({
         type: 'post',
         async: false,
         url: '//后台方法',
         // 根据data中的值从后台方法中查数据
         data: {
             'name': $("#userName").val(),
             'datetxt': $("#dateTime").val()
         },
         success: function (result) {
			
             if (result.rows.length > 0) {
                 for (var i = 0; i < result.rows.length; i++) {
                     var json = { value: result.rows[i].demo2, name: result.rows[i].demo1}
                     dataSource.push(json);

                     PrimaryOdorAttribute.push(result.rows[i].PrimaryOdorAttribute);
                 }
             }

             // 生成图表
             option = null;
             option = {
                 title: {
                     text: 'demo',
                     x: 'center'
                 },
                 tooltip: {
                     trigger: 'item',
                     formatter: "{a} <br/>{b}: {c} ({d}%)",
                 },
                 legend: {
                     orient: 'vertical',
                     x: 'left',
                     data: demo1
                 },
                 series: [
                     {
                         name: 'demo',
                         type: 'pie',
                         radius: ['50%', '70%'],
                         avoidLabelOverlap: false,
                         label: {
                             normal: {
                                 show: false,
                                 position: 'center'
                             },
                             emphasis: {
                                 show: true,
                                 textStyle: {
                                     fontSize: '30',
                                     fontWeight: 'bold'
                                 }
                             }
                         },
                         labelLine: {
                             normal: {
                                 show: false
                             }
                         },
                         data: demo2,
                         itemStyle: {
                             emphasis: {
                                 shadowBlur: 10,
                                 shadowOffsetX: 0,
                                 shadowColor: 'rgba(0, 0)'
                             },

                         }
                     }
                 ]
             };
             ;
             if (option && typeof option === "object") {
                 xqChart.setOption(option, true);
             }

             // 隐藏加载动画
             xqChart.hideLoading();
         }
     })