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

最新推荐文章于 2024-06-26 11:09:42 发布

feifuzeng

最新推荐文章于 2024-06-26 11:09:42 发布

阅读量1.2w

点赞数

分类专栏： echart

本文链接：https://blog.csdn.net/feifuzeng/article/details/74464450

版权

echart 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

echar官网t：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

⑤图表各项数据与后台交互，详细参考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;
	}
}

（效果图）

feifuzeng

关注

0
点赞
踩
21

收藏

觉得还不错? 一键收藏
6
评论
Echart 从小白到入门小实例(附源码)

echar官网t：http://echarts.baidu.com/echart 是我目前了解的比较好的用来做前端表格展示的工具。由百度公司研发和维护，做的还是不错的。以前了解过，但是没有真正在项目中运用，用过之后感觉其他使用的方法很简单，根据api想要什么就设置什么即可。本博文只负责记录一下我弄得第一个实际小demo，应项目要求是折线图，所以简单写了一个小demo。(讲道理，别的
复制链接

扫一扫