AJAX部分刷新以echarts饼图为例

<script type="text/javascript"> 
var xmlhttp; 
function startrefresh(){ 
xmlhttp=new XMLHttpRequest(); 
xmlhttp.open(POST,"/Sentiment/Sentiment.jsp",true); 
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
//xmlhttp.send("name=wk"); --需要传输参数时增加 
xmlhttp.onreadystatechange = function(){ 
if(xmlhttp.readyState == 4) 
if(xmlhttp.status == 200) 
document.getElementById("main1").innerHTML=xmlhttp.responseText; 
} 
} 
</script> 

  <div id="main1" style="height:350px;">武开英</div>

以下是echarts代码

 <script type="text/javascript">
  	var array_name = "<%=st_name.toString()%>";
    var array_value ="<%=st_good.toString()%>";
    
        // 路径配置
        require.config({
            paths:{ 
                'echarts' : './js/echarts',
                'echarts/chart/bar' : './js/echarts',
                'echarts/chart/line': './js/echarts',
                'echarts/chart/pie': './js/echarts'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar', // 使用柱状图就加载bar模块,按需加载
                'echarts/chart/line',
                'echarts/chart/pie'
            ],
           DrawCharts
        );
        
         function DrawCharts(ec) {
                FunDraw3(ec);
            }
  	             function FunDraw3(ec) {
                // 基于准备好的dom,初始化echarts图表
                var myChart = ec.init(document.getElementById('main1')); 
				var option = {
				    title : {
				        text: '',
				        subtext: '',
				        x:'center'
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        orient : 'vertical',
				        x : 'left',
				        data:["正面","负面","中立"],           //这个一定要自己输入,学会调适程序
				    },
				    toolbox: {
				        show : true,
				        feature : {
				            mark : {show: true},
				            dataView : {show: true, readOnly: false},
				            restore : {show: true},
				            saveAsImage : {show: true}
				        }
				    },
				    calculable : true,
				    series : [
				        {
				           name:'访问来源',
				            type:'pie',
				            radius : '100%',
				            center: ['50%', '60%'],
				            data:(function(){
                                var res = [];
                                var len = -1;
                                while (len++<10) {
                                res.push({
                                name: array_name.split(",")[len],
                                value:array_value.split(",")[len]
                                
                                });
                                }
                                return res;
                                })()    
				        }
				    ]
				};
				 myChart.setOption(option);      
            }
  </script>
这样可以部分刷新饼图。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值