Echart 从小白到入门小实例(附源码)

秒速五厘米 2022-06-13 11:09 169阅读 0赞

echar官网t：[http://echarts.baidu.com/][http_echarts.baidu.com]

echart 是我目前了解的比较好的用来做前端表格展示的工具。由百度公司研发和维护，做的还是不错的。

以前了解过，但是没有真正在项目中运用，用过之后感觉其他使用的方法很简单，根据api想要什么就设置什么即可。

本博文只负责记录一下我弄得第一个实际小demo，应项目要求是折线图，所以简单写了一个小demo。

(讲道理，别的类型的图形都差不多，只要会根据api开发，啥都不是事)，话不多说，直接上代码。

注：这里为了方便，是在线引用两个js文件，实际项目推荐下载到本地

这里面我主要讲一下我在开发的时候自己遇到的问题和解决方案：

①js文件的引用，推荐引用带有源码的echart.js，有的是使用echart.min.js ，echart是附带全部源码的文件，适合开发使用

②echarts的各个属性配置 按照需求根据官方api设置  推荐API地址：[http://echarts.baidu.com/echarts2/doc/doc.html][http_echarts.baidu.com_echarts2_doc_doc.html]

⑤图表各项数据与后台交互，详细参考js中getChartData()方法。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
    <html lang="en">  
        <head>  
          <meta charset="utf-8" />  
          <title>ECharts-折线图</title>  
          <script type="text/javascript" src="${pageContext.request.contextPath}/plugins/echart/echarts.js"></script>
        	<script src="http://echarts.baidu.com/build/dist/echarts.js">
        	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        </head>  
    <body>  
        <div id="main" style="height: 400px; border: 1px solid #ccc; padding: 10px;"></div>  
       <script>   
    	//初始化
    	var myChart = echarts.init(document.getElementById('main'));
    	//参数设置
    	option = {
            title: {      //标题组件
    //         	text:'消费金额统计图'
                	text:'消费金额统计图',
                    x:'center',
                    y:'top',
                    textAlign:'left'
            },
            tooltip: {    //提示框组件
                trigger: 'axis',
                showDelay :5
            },
            legend: {     //图例组件
            	left:'right',
                data: ['消费金额(元)', '周环比(100%)']
            },
            grid: {       //直角坐标系内绘图网格
    //             left: '3%',
    //             right: '4%',
    //             bottom: '3%',
                x: 40,
                x2: 100,
                y2: 150,
                containLabel: true
            },
    //         toolbox: {     //工具栏
    //             feature: {
    //                 saveAsImage: {}
    //             }
    //         },
            xAxis: {       //直角坐标系 grid 中的 x 轴
                type: 'category',
                boundaryGap: true,
                axisLabel: {
                    interval: 0,
                    rotate: 40,
                },
                textStyle:'#333',
                name:"时间",
                axisTick:{
                	show:false
                },
                data: []
            },
            yAxis: {       //直角坐标系 grid 中的 y 轴
    //         	min: 0,
    //         	max: 4000,
    //         	interval:500,
    			name:"值",
                type: 'value'
            },
            series: [      //系列列表
                {
                    name: '消费金额(元)',
                    type: 'line',
                    stack: '总量',
                    itemStyle : { normal: {label : {show: true}}},
                    data: []
                },
                {
                    name: '周环比(100%)',
                    type: 'line',
                    itemStyle : { normal: {label : {show: true}}},
                    stack: '总量',
                    data: []
                }
            ]
        };
        myChart.setOption(option);   //参数设置方法   
        myChart.hideLoading();  
    //     getChartData();//aja后台交互 
    	getChartData();
    	
    	 function getChartData() {  
             //获得图表的options对象  
             var options = myChart.getOption();  
             //通过Ajax获取数据  
             $.ajax({  
                 type : "post",  
                 async : false, //同步执行  
                 url : "${pageContext.request.contextPath}/do/echart/getEchartData",  
                 data : {},  
                 dataType : "json", //返回数据形式为json  
                 success : function(result) { 
                     if (result) {  
    //                      options.legend.data = result.legend;  
                         options.xAxis[0].data = result.category; 
                         options.series[0].data = result.series[0].data;  
                         options.series[1].data = result.series[1].data;  
                         myChart.hideLoading();  
                         myChart.setOption(options);  
                     }  
                 },  
                 error : function(errorMsg) {  
                     alert("不好意思，大爷，图表请求数据失败啦!");  
                     myChart.hideLoading();  
                 }  
             });  
         }  
    	</script> 
    	<script type="text/javascript">  
           
        </script>  
    </body>  
    </html>

后台EchartController .java方法(用于造数据)

package com.cn.control.echart;
    
    import java.util.ArrayList;
    import java.util.List;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import com.cn.model.echart.EchartData;
    import com.cn.model.echart.Series;
    
    /** * @author  feifz: 
        * @date ：2017年7月5日 上午11:13:42 
        * @return  
    	* @desc
        */
    @Controller
    @RequestMapping("echart")
    public class EchartController {
    	
    	/**
    	 * 
    	 * @return
    	 */
    	@RequestMapping("getEchartData")
    	@ResponseBody
    	public EchartData getEchartData(){
    		List<String> legendList=new ArrayList<String>();
    		
    		List<String> categoryList=new ArrayList<String>();
    		categoryList.add("20170301-20170308");
    		categoryList.add("20170309-20170316");
    		categoryList.add("20170317-20170324");
    		categoryList.add("20170325-20170401");
    		categoryList.add("20170402-20170409");
    		categoryList.add("20170410-20170417");
    		categoryList.add("20170418-20170425");
    		List<Series> seriesList =new ArrayList<>();
    		List<Integer> data1 = new ArrayList<>();
    		data1.add(111);
    		data1.add(272);
    		data1.add(313);
    		data1.add(474);
    		data1.add(515);
    		data1.add(474);
    		data1.add(515);
    		seriesList.add(new Series("消费金额(元)", "line",data1));
    		List<Integer> data2 = new ArrayList<>();
    		data2.add(111);
    		data2.add(222);
    		data2.add(333);
    		data2.add(444);
    		data2.add(555);
    		data2.add(444);
    		data2.add(555);
    		seriesList.add(new Series("周环比(100%)", "line",data2)); 
    		EchartData echartData = new EchartData(legendList, categoryList, seriesList);
    		return echartData;
    	}
    }

![Image 1][]![Center][]

（效果图）

[http_echarts.baidu.com]: http://echarts.baidu.com/
[http_echarts.baidu.com_echarts2_doc_doc.html]: http://echarts.baidu.com/echarts2/doc/doc.html
[Image 1]: 
[Center]: /images/20220613/3ee9eeef8b084abbadd74dc546d6318b.png