Echart与后台的数据交互

时间：2025-03-25 14:58:12
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts </title>
</head>
<body>
<!-- 选择商品 -->
      <Form action="" method="post" name="myform"> 
			<select name="sel"  >
			<option value="1" selected>编号为1的商品</option>
			<option value="2" >编号为2的商品</option>
			<option value="3">编号为3的商品</option>
			</select>
   				 <input type="button" name="btnOK" value="确认" onClick="look()">
      </center>
      </Form>
      
    <div  style="height:400px">
    </div>
    <!-- ECharts单文件引入 -->
    <script src="/build/dist/"></script>
   <script src="/libs/jquery/2.1.1/"></script>   

    <script type="text/javascript">
    //全局变量,list是表格数据，myChart是全局表格
    var myChart;
    var list=[];
    //选择下拉框选择不同编号的商品
    function look(){
        var se =("se");   
        var option=("option");   
        var str = "" ;   
        for(var i=0;i<;++i)   
        {   
        	 if(option[i].selected)   
             {   
        		 var temp  = option[i].value   
             }   
        }   
         getAjaxData(temp);
}
        // 路径配置
        ({
            paths: {
                echarts: '/build/dist'
            }
        });
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/line' // 使用柱状图就加载bar模块，饼图加载line模块,按需求加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                myChart = (('main')); 
                list=[];
                var option = {
                		 title : {
                		        text: '该商品每月销量',
                		        subtext: '纯属虚构'
                		    },
                		    tooltip : {
                		        trigger: 'axis'
                		    },
                		    legend: {
                		        data:['平均销量']
                		    },
                		    toolbox: {
                		        show : true,
                		        feature : {
                		            mark : {show: true},
                		            dataView : {show: true, readOnly: false},
                		            magicType : {show: true, type: ['line', 'bar']},
                		            restore : {show: true},
                		            saveAsImage : {show: true}
                		        }
                		    },
                		    calculable : true,
                		    xAxis : [
                		        {
                		            type : 'category',
                		            boundaryGap : false,
                		            data : ['一月份','二月份','三月份','四月份','五月份','六月份','七月份','八月份','九月份','十月份','十月份','十一月份','十二月份']
                		        }
                		    ],
                		    yAxis : [
                		        {
                		            type : 'value',
                		            axisLabel : {
                		                formatter: '{value} 件'
                		            }
                		        }
                		    ],
                		    series : [
                		        {
                		            name:'每月销量',
                		            type:'line',
                		            data:[],
                		            markPoint : {
                		                data : [
                		                    {type : 'max', name: '销量的峰值'},
                		                    {type : 'min', name: '销量的低谷'}
                		                ]
                		            },
                		            markLine : {
                		                data : [
                		                    {type : 'average', name: '平均值'}
                		                ]
                		            }
                		        },
                		    ]
                };
              // 为echarts对象加载数据 
              (option); //先把可选项注入myChart中  
              (); 
              getAjaxData(1);   //一开始加载默认显示一号商品
            }
        );
    </script>
    <script type="text/javascript">
   		 function getAjaxData(pid){
    	var options = ();
    	$.getJSON("http://localhost:8000/app/v1/historys/?format=json&pid="+pid, function(data){
       	 for(var i=0;i<5;i++){
       		 list[i]=[i].;
       	 }
       	 [0].data=list;
            (options); 
        });
    }
    </script>
</body>

相关文章