Echart與後臺的資料互動

阿新 • • 發佈：2019-01-21

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts </title>
</head>
<body>
<!-- 選擇商品 -->
      <Form action="" method="post" name="myform"> 
			<select name="sel" id="se" >
			<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 id="main" style="height:400px">
    </div>
    <!-- ECharts單檔案引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>   

    <script type="text/javascript">
    //全域性變數,list是表格資料，myChart是全域性表格
    var myChart;
    var list=[];
    //選擇下拉框選擇不同編號的商品
    function look(){
        var se =document.getElementById("se");   
        var option=se.getElementsByTagName("option");   
        var str = "" ;   
        for(var i=0;i<option.length;++i)   
        {   
        	 if(option[i].selected)   
             {   
        		 var temp  = option[i].value   
             }   
        }   
         getAjaxData(temp);
}
        // 路徑配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/line' // 使用柱狀圖就載入bar模組，餅圖載入line模組,按需求載入
            ],
            function (ec) {
                // 基於準備好的dom，初始化echarts圖表
                myChart = ec.init(document.getElementById('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物件載入資料 
              myChart.setOption(option); //先把可選項注入myChart中  
              myChart.hideLoading(); 
              getAjaxData(1);   //一開始載入預設顯示一號商品
            }
        );
    </script>
    <script type="text/javascript">
   		 function getAjaxData(pid){
    	var options = myChart.getOption();
    	$.getJSON("http://localhost:8000/app/v1/historys/?format=json&pid="+pid, function(data){
       	 for(var i=0;i<5;i++){
       		 list[i]=data.objects[i].data.number;
       	 }
       	 options.series[0].data=list;
            myChart.setOption(options); 
        });
    }
    </script>
</body>

vue-cli與後臺資料互動增刪改查

1. 安裝vue-resource npm install vue-resource --save 2.訪問後臺地址，在vue中會出現跨域的問題，以下為解決方案　　在config下的index.js 中配置proxyTable代理設定 proxyTable: {

【微信小程式】微信小程式掉進的坑之與後臺資料互動

一、與後臺的資料互動注：服務端語言為Java. 在進行資料互動時，用的是Servlet進行資料的獲取和回傳。在小程式中提交引數時需要在header寫入 header: {

js前臺與後臺資料互動-前臺調後臺

　　網站是圍繞資料庫來程式設計的，以資料庫中的資料為中心，通過後臺來操作這些資料，然後將資料傳給前臺來顯示出來（當然可以將後臺程式碼嵌入到前臺）。即：　　　　下面就講前臺與後臺進行資料互動

淺談web前端與後臺資料互動

1.什麼是web伺服器？伺服器：通俗理解，一臺24小時工作的機器 web伺服器：一臺24小時工作的能處理web請求的伺服器看圖，用例項說話 2.web伺服器的作業系統既然伺服器是一臺機器，那麼就會有作業系統常見的伺服器上安裝的作業系

web前端與後臺資料互動

1.前端請求資料URL由誰來寫? 在開發中,URL主要是由後臺來寫的,寫好了給前端開發者.如果後臺在查詢資料,需要藉助查詢條件才能查詢到前端需要的資料時,這時後臺會要求前端提供相關的查詢引數，這裡的查詢引數也就是URL請求的引數。 2.介面文件主要由誰來寫? 介面文件也是主

使用原生ajax與後臺資料互動

//html 非完整，只包含必要元素<script>function torun(a) { var id=a.id; var url="test/?typecode="+id; var xmlhttp=new XMLHttpRequest()

使用Echarts總結之——使用柱狀圖和地圖與後臺資料互動

一、引入js 當然首先肯定是要引入相關的echart, 簡單的開發基本上一個<script language="javascript" type="text/javascript" src="$

vue.js與後臺資料互動

第一步：引入js庫： <script src="../js/common/vue.min.js"></script> <script src="../js/commo

Django前端與後臺資料互動:用json傳輸資料到javascript來畫hichart圖表

前端和後臺的資料傳輸是個很重要的環節.專案需要把資料用hichart顯示出來,就涉及到Django後臺傳輸資料到javascript的問題. 因為圖表比較多,javascript部分寫到單獨的js檔案裡,不寫在html檔案裡,在html中呼叫js檔案. 網上

Echart與後臺的資料互動

<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts </title> </head> <body> &l

Jquery EasyUI +Ajax +Json +一般處理程式實現資料的前臺與後臺的互動 --- 善良公社專案

經過上一篇部落格，本節主要是來看實現的功能是後臺的資料通過json資料傳過來，前臺修改的資料再傳回資料庫之後頁面再次更新table中的資料；圖示：例項：前臺的程式碼 <%--表格顯示區--%> <table id="tt" " ti

使用ajax完成python flask前端與後臺資料的互動

一、前端頁面中 html檔案中： {% extends 'base.html' %} {% block scripts %} {{ super() }} {# <script src="http://echarts.baidu.com/dist/echa

Struts2的後臺與前臺資料互動處理方式的簡單總結

4種拿到值得的辦法： 1) <s:property value="username"/> 2) {username} 3) <s:property value="#request.username"/> 4) <s:property value="%{username

DataTables伺服器端傳入傳出（接收與提交）的資料格式搜尋、排序和分頁與後臺資料的互動

在dataTables伺服器端處理模式下，想要用好dataTables 必須先去了解它與後臺傳遞資料的格式，這樣才能做好資料在後臺的處理，完成dataTables的一系列篩選、排序和分頁功能。 1. dataTables的提交資料 dataTables向

微信小程式實現與後臺PHP互動

微信小程式實現與後臺PHP互動接下來將講後臺如何與前臺進行資料及圖片之間的互動，相信這一點是很多人所關注的，因為當時我實在團隊中負責後臺開發，因此對前端不是特別瞭解，這裡我會貼出前端開發時的部分程式碼截圖，微信小程式的官方api介紹地址是： https://mp.weix

FLEX與JS資料互動，以及Google外掛IFrame的使用

最近因為專案需要，用到的flex，同時需要與js做資料互動，同時還用到了Google的外掛IFrame，總結一點點自己的使用心得，其中很多資料都是在網上Google到的。 FLEX呼叫

Vue與Django資料互動

首先配置路由資訊，理論上都會新增二級路由：所以會有請求轉發 1 from django.conf.urls import url,include 2 3 url(r'^api/(?P<version>\w+)/',include("api.urls")), 此時請求會轉發給二級路

QML知識-與Qt資料互動

使用Qml程式設計時，常常會與Qt之間進行資料訪問或修改，本篇文章是介紹Qt與Qml的資料互動方法，一般有兩種方法。 TestModel標頭檔案: #ifndef TESTMODEL_H #define TESTMODEL_

angular js 實現前臺與後臺資料對接(Service $http)

一、service服務是什麼？自我理解：服務是提供了一個應用整個生命週期中保持資料的方法。能在控制器中傳遞值，保持資料的一致性。服務是單利的，在專案中是被例項化一次，並且是用到的時候才被例項化。服務建立資料、儲存資料，與控制器之間緊密通訊。 $http

微信小程式wx.request後臺資料互動

From：http://blog.csdn.net/a61595579/article/details/53404451 記錄微信小程式wx.request這個api在跟後臺互動時遇上的問題。 1、根據資料，完成第一步，請求傳送，程式碼如下： [javascript] view plain

Echart與後臺的資料互動

相關推薦