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

来源：互联网发布：网络数据论文编辑：程序博客网时间：2024/05/21 10:41

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")@ResponseBodypublic 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;}}

（效果图）

阅读全文

0 0

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

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