android端由服务器端数据建立echarts图表

最新推荐文章于 2023-01-02 21:26:44 发布
最新推荐文章于 2023-01-02 21:26:44 发布
阅读量856 收藏 2
点赞数
分类专栏： android 文章标签： android 服务器 echarts webview 图表化显示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuhuoer/article/details/60963634
版权
1.采用webview来显示图表：xml内容 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <!--android:background="@drawable/gray"-->

     <!--<LinearLayout-->
            <!--android:id="@+id/bt_ly"-->
            <!--android:layout_width="match_parent"-->
            <!--android:layout_height="wrap_content"-->
            <!--android:gravity="center_horizontal"-->
            <!-->-->
            <!--<Button-->
                <!--android:id="@+id/linechart_bt"-->
                <!--style="?android:attr/buttonStyleSmall"-->
                <!--android:layout_width="match_parent"-->
                <!--android:layout_height="wrap_content"-->
                <!--android:layout_weight="1"-->
                <!--android:text="折线图" />-->

            <!--<Button-->
                <!--android:id="@+id/barchart_bt"-->
                <!--style="?android:attr/buttonStyleSmall"-->
                <!--android:layout_width="match_parent"-->
                <!--android:layout_height="wrap_content"-->
                <!--android:layout_weight="1"-->
                <!--android:text="柱状图" />-->

            <!--<Button-->
                <!--android:id="@+id/piechart_bt"-->
                <!--style="?android:attr/buttonStyleSmall"-->
                <!--android:layout_width="match_parent"-->
                <!--android:layout_height="wrap_content"-->
                <!--android:layout_weight="1"-->
                <!--android:text="饼状图" />-->
        <!--</LinearLayout>-->
        <WebView
            android:id="@+id/chartshow_wb"

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            /><!--android:layout_below="@id/bt_ly"-->
</RelativeLayout>

2.java后台得到webview：

package com.example.administrator.bs01;

import android.app.Activity;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;


public class nsrfxActivity extends Activity  {
//    implements View.OnClickListener

    private Button linechart_bt;
    private Button barchart_bt;
    private Button piechart_bt;
    private WebView chartshow_wb;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_nsrfx);
        initView();
    }

    /**
     * 初始化页面元素
     */
    private void initView(){

//        findViewById(R.id.linechart_bt).setOnClickListener(this);
//        findViewById(R.id.barchart_bt).setOnClickListener(this);
//        findViewById(R.id.scatterchart_bt).setOnClickListener(this);
//        findViewById(R.id.kchart_bt).setOnClickListener(this);
//        findViewById(R.id.piechart_bt).setOnClickListener(this);
//        findViewById(R.id.radarchart_bt).setOnClickListener(this);
//        findViewById(R.id.chordchart_bt).setOnClickListener(this);
//        findViewById(R.id.forcechart_bt).setOnClickListener(this);
//        findViewById(R.id.mapchart_bt).setOnClickListener(this);
//        findViewById(R.id.gaugechart_bt).setOnClickListener(this);
//        findViewById(R.id.funnelchart_bt).setOnClickListener(this);
        chartshow_wb=(WebView)findViewById(R.id.chartshow_wb);
        //进行webwiev的一堆设置
        //开启本地文件读取（默认为true，不设置也可以）
        chartshow_wb.getSettings().setAllowFileAccess(true);
        //设置编码
        chartshow_wb.getSettings().setDefaultTextEncodingName("utf-8");
        // 设置可以支持缩放
        chartshow_wb.getSettings().setSupportZoom(true);
        // 设置出现缩放工具
        chartshow_wb.getSettings().setBuiltInZoomControls(true);
        // 清除浏览器缓存
        chartshow_wb.clearCache(true);
        //开启脚本支持
        chartshow_wb.getSettings().setJavaScriptEnabled(true);
        //  放在 assets目录
        //获取Assets目录下的文件
        chartshow_wb.loadUrl("file:///android_asset/echart/echarts.html");
//        chartshow_wb.loadUrl("file:///android_asset/test/echarts.html");
//        chartshow_wb.loadUrl("file:///android_asset/test/index.html");
//        chartshow_wb.loadUrl("http://www.baidu.com");
        //在当前页面打开链接了
        chartshow_wb.setWebViewClient(new WebViewClient() {
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                try {
                    Thread.sleep(1);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                view.loadUrl(url);
                return true;
            }
        });
        //js加上这个就好啦！
        chartshow_wb.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                return super.onJsAlert(view, url, message, result);
            }
        });

    }
//
//    @Override
//    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.linechart_bt:
                chartshow_wb.loadUrl("javascript:createChart('line',[]);");
//                chartshow_wb.loadUrl("javascript:createChart('line',[89,78,77]);");
//                chartshow_wb.loadUrl("javascript:wave();");
                break;
            case R.id.barchart_bt:
                chartshow_wb.loadUrl("javascript:createChart('bar',[]);");
//                chartshow_wb.loadUrl("javascript:createChart('bar',[89,78,77]);");
                break;
            case R.id.piechart_bt:
                chartshow_wb.loadUrl("javascript:createChart('pie',[]);");
                break;
            default:
                break;
        }
//
//        switch (v.getId()) {
//            case R.id.linechart_bt:
//                chartshow_wb.loadUrl("javascript:createChart('line',[]);");
                chartshow_wb.loadUrl("javascript:createChart('line',[89,78,77]);");
                chartshow_wb.loadUrl("javascript:wave();");
//                break;
//            case R.id.barchart_bt:
//                chartshow_wb.loadUrl("javascript:createChart('bar',[]);");
                chartshow_wb.loadUrl("javascript:createChart('bar',[89,78,77]);");
//                break;
            case R.id.scatterchart_bt:
                chartshow_wb.loadUrl("javascript:createChart('scatter',[]);");
                break;
            case R.id.kchart_bt:
                chartshow_wb.loadUrl("javascript:createChart('k',[]);");
                break;
//            case R.id.piechart_bt:
//                chartshow_wb.loadUrl("javascript:createChart('pie',[]);");
//                break;
            case R.id.radarchart_bt:
                chartshow_wb.loadUrl("javascript:createChart('radar',[]);");
                break;
            case R.id.chordchart_bt:
                chartshow_wb.loadUrl("javascript:createChart('chord',[]);");
                break;
            case R.id.forcechart_bt:
                chartshow_wb.loadUrl("javascript:createChart('force',[]);");
                break;
            case R.id.mapchart_bt:
                chartshow_wb.loadUrl("javascript:createChart('map',[]);");
                break;
            case R.id.gaugechart_bt:
                chartshow_wb.loadUrl("javascript:createChart('gauge',[]);");
                break;
            case R.id.funnelchart_bt:
                chartshow_wb.loadUrl("javascript:createChart('funnel',[]);");
                break;
//            default:
//                break;
//        }
//
//    }

    @Override
//设置回退 在页面内回退      （******未）
//覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && chartshow_wb.canGoBack()) {
            chartshow_wb.goBack(); //goBack()表示返回WebView的上一页面
            return true;
        }
//        finish();//结束退出程序
//        return false;
        return super.onKeyDown(keyCode, event);
    }
        @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_nsrfx, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

3.导入echarts.js     jquery.min.js(尝试导入jquery.js因格式要求高？失败)   vintage.js（echarts的主题可有可无，可换为其它主题） 

导入位置：     

















4.webview中echarts.html代码：（即导包代码、及ajax跨域访问服务器设置的echarts代码）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ECharts</title>

    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="js/echarts.js"></script>
    <!-- 引入jquery.js -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <!-- 引入 vintage.js -->
    <script type="text/javascript" src="js/vintage.js"></script>  //引入主题包
    <!-- 引入 infographic.js -->
    <!--<script type="text/javascript" src="js/infographic.js"></script>-->
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 350px;height:250px;"></div>

<script type="text/javascript">




        var myChart = echarts.init(document.getElementById('main'),'vintage');//设置主题
         // 显示标题，图例和空的坐标轴
         myChart.setOption({
             title: {
                 text: '纳税人分析'
             },
             tooltip: {},
             legend: {
                 data:['纳税人数目']
             },
             xAxis: {
                 data: ['时间']
             },
             yAxis: {},
             series: [{
                 name: '纳税人数目',
                 type: 'bar',
                 data: []
             }]
         });
         
         myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
         
         var times=[];    //时间数组（实际用来盛放X轴坐标值）
         var numbers=[];    //人数数组（实际用来盛放Y坐标值）
         
         $.ajax({
         type : "post",
         async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
         url : "http://192.168.173.1:8080/test/servlet/TestServlet",    //请求发送到TestServlet处
         data : "{}",
         dataType : "jsonp",        //跨域访问则返回数据形式为jsonp
         success : function(result) {
             //请求成功时执行该函数内容，result即为服务器返回的json对象
             if (result) {
             <!--var myChart = echarts.init(document.getElementById('main'),vintage);  -->
                    for(var i=0;i<result.length;i++){
                       times.push(result[i].time);    //挨个取出时间并填入时间数组
                     }
                    for(var i=0;i<result.length;i++){
                        numbers.push(result[i].number);    //挨个取出人数并填入人数数组
                      }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        xAxis: {
                            data: times
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '纳税人数目',
                            data: numbers
                        }]
                    });
             }
         },
              error: function(XMLHttpRequest, textStatus, errorThrown) {   //由其值便于分析访问失败原因
                     alert(XMLHttpRequest.status);
                     alert(XMLHttpRequest.readyState);
                     alert(textStatus);
               },

         <!--error : function(errorMsg) {-->
             <!--//请求失败时执行该函数-->
         <!--alert("图表请求数据失败!");-->
         <!--myChart.hideLoading();-->
         <!--}-->
    })

         
    </script>

</body>
</html>

5.服务器端返回数据代码：（包含封装为jsonp部分最后） 

package servlet;

import java.io.IOException;
import java.io.Writer;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.*;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import service.Service;

import com.fasterxml.jackson.databind.ObjectMapper;

import domain.Product;
import domain.Time_Number;

public class TestServlet extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {

		List<Time_Number> list = new ArrayList<Time_Number>();

		System.out.println("ssssssssssssssssssssssssssssssssssss");
		// 新建服务对象
		Service serv = new Service();
		list = serv.getTime_Number();//得到List内容写死可替换为（可能名称上有点不太对应）

                               //List<Product> list = new ArrayList<Product>();
                //这里把“类别名称”和“销量”作为两个属性封装在一个Product类里，每个Product类的对象都可以看作是一个类别（X轴坐标值）与销量（Y轴坐标值）的集合
		//list.add(new Product("aa", 10));
		//list.add(new Product("bb", 20));
		//list.add(new Product("cc", 30));
		ObjectMapper mapper = new ObjectMapper(); // 提供java-json相互转换功能的类

		String json = mapper.writeValueAsString(list); // 将list中的对象转换为Json格式的数组

		System.out.println(json);

		boolean jsonP = false;
		String cb = request.getParameter("callback");
		if (cb != null) {
			jsonP = true;
			response.setContentType("text/javascript; charset=utf-8");
		} else {
			response.setContentType("application/x-json");
		}
		Writer out = response.getWriter();
		if (jsonP) {
			out.write(cb + "(");
		}
		out.write(json);
		if (jsonP) {
			out.write(");");
		}

		//        
		// //将json数据返回给客户端
		// response.setContentType("text/html; charset=utf-8");
		// response.getWriter().write(json);
	}
}
6.Product类代码： 

 

 

package domain;


public class Product {
    
    private String name;    //类别名称
    private int num;        //销量
    
    public Product(String name, int num) {
        this.name = name;
        this.num = num;
    }
    
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getNum() {
        return num;
    }
    public void setNum(int num) {
        this.num = num;
    }    
} 
 
最后效果： 

 


 

 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ECharts</title>

    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="js/echarts.js"></script>
    <!-- 引入jquery.js -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <!-- 引入 vintage.js -->
    <script type="text/javascript" src="js/vintage.js"></script>
    <!-- 引入 infographic.js -->
    <!--<script type="text/javascript" src="js/infographic.js"></script>-->
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 350px;height:250px;"></div>

<script type="text/javascript">




        var myChart = echarts.init(document.getElementById('main'),'vintage');
         // 显示标题，图例和空的坐标轴
         myChart.setOption({
             title: {
                 text: '纳税人分析'
             },
             tooltip: {},
             legend: {
                 data:['纳税人数目']
             },
             xAxis: {
                 data: ['时间']
             },
             yAxis: {},
             series: [{
                 name: '纳税人数目',
                 type: 'bar',
                 data: []
             }]
         });
         
         myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
         
         var times=[];    //时间数组（实际用来盛放X轴坐标值）
         var numbers=[];    //人数数组（实际用来盛放Y坐标值）
         
         $.ajax({
         type : "post",
         async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
         url : "http://192.168.173.1:8080/test/servlet/TestServlet",    //请求发送到TestServlet处
         data : "{}",
         dataType : "jsonp",        //返回数据形式为json
         success : function(result) {
             //请求成功时执行该函数内容，result即为服务器返回的json对象
             if (result) {
             <!--var myChart = echarts.init(document.getElementById('main'),vintage);  -->
                    for(var i=0;i<result.length;i++){
                       times.push(result[i].time);    //挨个取出时间并填入时间数组
                     }
                    for(var i=0;i<result.length;i++){
                        numbers.push(result[i].number);    //挨个取出人数并填入人数数组
                      }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        xAxis: {
                            data: times
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '纳税人数目',
                            data: numbers
                        }]
                    });
             }
         },
              error: function(XMLHttpRequest, textStatus, errorThrown) {
                     alert(XMLHttpRequest.status);
                     alert(XMLHttpRequest.readyState);
                     alert(textStatus);
               },

         <!--error : function(errorMsg) {-->
             <!--//请求失败时执行该函数-->
         <!--alert("图表请求数据失败!");-->
         <!--myChart.hideLoading();-->
         <!--}-->
    })

         
    </script>

</body>
</html>
 
 
 


                

        

        

    




    

      

        

            

              
                
                  liuhuoer
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
echarts云服务器数据统计图表页面模板


				
			

			

				

					07-14
				

			

		

		

			
				
注：无后台 echarts云服务器数据统计图表页面模板

			
		

	



                

              
                



	

		

			

				
					
javascript 绘制各种图形

				
			

			

				

					weixin_30478923的博客
				

				

					05-24
					
					197
					
				

			

		

		

			
				
x1
                y1
                x2
                y2
                
                
                
                
      ...

			
		

	



                


  
              

                


	

		

			

				
					
Android图表开发之ECharts

				
			

			

				

					chouGod的博客
				

				

					07-02
					
					6825
					
				

			

		

		

			
				
开始这篇文章之前，需要提到一个上篇文章中忘记说的一个问题，就是我们在使用HelloCharts绘制折线图的时候，当我们进入其它界面后重新进入该界面有可能会出现折线图中首尾两个点相连的奇怪现象（兴许还有其他绘制怪象），这是因为数据残留的原因，所以我们需要每次在绘制图表的时候先清除一下之前的数据，清除方法就是把我们用来存储PointValue的集合clear一下就OK了！那今天我们就来聊聊EChart...

			
		

	





	

		

			

				
					
用JavaScript实现动态图形

				
			

			

				

					tyrone的专栏
				

				

					09-02
					
					1万+
					
				

			

		

		

			
				
用JavaScript实现动态图形1．JavaScript与2D图形  JavaScript的神奇之处远远超过一般程序员的想象。JavaScript可以实现所有的二维图形。看到我的Blog左面，它就是使用JavaScript和Google公司用JavaScript开发的excanvas写出来的。Its time to reuse!               什么是e

			
		

	



		

			
		



	

		

			

				
					
JavaScript课堂笔记

				
			

			

				

					张晨光老师的播客
				

				

					01-02
					
					797
					
				

			

		

		

			
				
程序一词来自生活，通常指完成某些事务的一种既定方式和过程在日常生活中，可以将程序看成对一系列动作的执行过程的描述程序变量赋值基本数据类型类型转换运算符程序的三种结构是什么？分支中if的结构switch的结构switch能判断的类型有哪些？while和do—while循环都是用来解决循环次数不确定的场合问题。for循环结构比较紧凑，对已知数量的循环操作方便break和continue的区别是什么？就像一台榨汁机一样你不必去关心它怎么工作的，只需要把水果放入，按下功能键，

			
		

	





	

		

			

				
					
javascript画图表方法

				
			

			

				

					caikeyter
				

				

					03-04
					
					707
					
				

			

		

		

			
				
日志原文：http://zzgziyu.blog.sohu.com/109589244.html    ("<html xmlns:v>v//:*{behavior:url(#default#VML)}")var ct1=new ct()function ct(){    ="green,yellow,red,blue,gray,purp

			
		

	





	

		

			

				
					
Echarts数据可视化图表案例

				
			

			

				

					01-11
				

			

		

		

			
				
Echarts数据可视化图表案例：包括柱图，饼图，折线图，地图等数据展示图表；案例下载后直接使用webstrom或idea打开，在编辑器内打开html

			
		

	





	

		

			

				
					
根据Excel表格数据生成ECharts图表 V2.3

				
			

			

				

					07-01
				

			

		

		

			
				
一个html小工具，随便一个浏览器就...  功能：   可以选择一个固定数据格式的excel文件，根据excel文件的数据，以平铺或堆叠的形式，生成对应的线图或柱状图或饼图。可保存图片到本地。  用到：   xlsx.js、echarts.js

			
		

	





	

		

			

				
					
手机端使用echarts图表，选项卡切换数据图表,圆环图，柱状图，折线图

				
			

			

				

					12-19
				

			

		

		

			
				
手机端使用echarts选项卡切换数据图表,圆环图，柱状图，折线图

			
		

	





	

		

			

				
					
大屏图表（echarts）数据统计分析页面

				
			

			

				

					05-17
				

			

		

		

			
				
大屏图表（echarts）数据统计分析页面，地图分析、图标分析

			
		

	





	

		

			

				
					
android动态生成echarts图形报表

				
			

			

				

					05-10
				

			

		

		

			
				
绝对能用，可以跑起来,android 结合echarts生成条形统计图，柱状图，折线图

			
		

	





	

		

			

				
					
JavaScript制作网页数据图表/曲线图

				
			

			

				

					g8341的专栏
				

				

					11-04
					
					5314
					
				

			

		

		

			
				
这是几个JS做的，界面一般吧，不过普通的够用，我下篇介绍几个FLASH的，功能好些的这里面有用JQuery的，wz_jsgraphics，等，看爱好了                   高效的数据展示效果，能够让用户很快理解和领悟那些既复杂又索然无味的统计信息。例如，将大数据量的信息点阵化和图表化，或许能够替换掉在网页（或Web应用程序）上以表格形式来表现数据这种古老的方式。目前，已

			
		

	





	

		

			

				
					
【Android】插入ECharts图表

				
			

			

				

					mycocoo的博客
				

				

					02-14
					
					2944
					
				

			

		

		

			
				
轻松导入ECharts

			
		

	





	

		

			

				
					
Android 调用echart图表,实现牛逼的效果

				
			

			

				

					Mryao10的博客
				

				

					09-22
					
					4579
					
				

			

		

		

			
				
最近项目中需要用图表,看到了echart图表的效果,和动画都很吊,于是使用webview加载试试,用来交流一下,好了不多说了贴代码了:
首先自己在本地建立一个自己的echarts.html;

html>

html lang="en">
head>
    meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


			
		

	





	

		

			

				
					
原生Android如何使用百度echarts

				
			

			

				

					坚持学习
				

				

					12-11
					
					1970
					
				

			

		

		

			
				
1.什么是echarts
是由百度维护并开源的JavaScript 实现的开源可视化库，提供直观，交互丰富，可高度个性化定制的数据可视化图表。例如我们常用的条形图，折线图，饼形图，雷达图等等。
官方定义如下

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
官网地址


			
		

	





	

		

			

				
					
Android项目中使用echarts

				
			

			

				

					dwf_android的博客
				

				

					08-11
					
					4833
					
				

			

		

		

			
				
之前都是在web网页端使用echarts，现在在android项目中使用echarts，实现柱状图、折线图、雷达图等，以柱状图为例。
1、首先去echarts官方下载echarts下载js文件，最好下载完整版的，也可以根据自己的需要自定义构建。

图1

下载下来的js文件如图所示


图2


2.将下载下来的js文件放到android工程的assets文件夹下

			
		

	





	

		

			

				
					
Echarts 动态获取数据进行图表的展示

				
			

			

				

					android的博客
				

				

					11-04
					
					3212
					
				

			

		

		

			
				
[代码] 前端页面代码


?




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
4

			
		

	





	

		

			

				
					
java中 Date取具体年份year

					
热门推荐

				
			

			

				

					liuhuoer的博客
				

				

					04-06
					
					1万+
					
				

			

		

		

			
				
由于getYear()方法不支持所以使用以下方法

方法一：使用Calendar 
       实例：				Date d = rs.getDate("date");//方法一   一般为Date d = new Date();
				Calendar c = Calendar.getInstance();
				c.setTime(d);
				int y = c.get(Cale

			
		

	





	

		

			

				
					
用php获取mysql数据让网页端echarts图表map

					
最新发布

				
			

			

				

					05-30
				

			

		

		

			
				
4. 使用JavaScript将您的JSON数据传递给echarts实例，并使用其提供的API来创建地图图表。  下面是一个简单的示例代码，可以帮助您开始：  PHP代码：  ``` //连接到MySQL数据库 $conn = new mysqli($servername, $...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值