初学Echarts，Echarts的官网示例中配置项的数据需要用到js数组来传递数据，所以当我们从后端查询到数据后，往往需要通过ajax来进行数据交互。
这是官方示例的配置项。
<script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);</script>
和ajax交互的思路：通过ajax发起请求遍历后台数据库，遍历到的数组通过json格式传递到前台，然后把json数据封装到js数组里面，再让series调用对应的数组即可。
index.html 代码
<!DOCTYPE html> <html lang="en"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>ECharts</title><!-- 引入 echarts.js --><script type="text/javascript" src="js/echarts.min.js"></script><!-- 引入jquery.js --><script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head><body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));// 显示标题，图例和空的坐标轴 myChart.setOption({title: {text: '异步数据加载示例'},tooltip: {},legend: {data:['销量']},xAxis: {data: []},yAxis: {},series: [{name: '销量',type: 'bar',data: []}]});myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画var names=[]; //类别数组（实际用来盛放X轴坐标值）var nums=[]; //销量数组（实际用来盛放Y坐标值） $.ajax({type : "post",async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行） url : "TestServlet", //请求发送到TestServlet处 data : {},dataType : "json", //返回数据形式为json success : function(result) {//请求成功时执行该函数内容，result即为服务器返回的json对象if (result) {for(var i=0;i<result.length;i++){names.push(result[i].name); //挨个取出类别并填入类别数组 }for(var i=0;i<result.length;i++){nums.push(result[i].num); //挨个取出销量并填入销量数组 }myChart.hideLoading(); //隐藏加载动画 myChart.setOption({ //加载数据图表 xAxis: {data: names},series: [{// 根据名字对应到相应的系列 name: '销量',data: nums}]});}},error : function(errorMsg) {//请求失败时执行该函数 alert("图表请求数据失败!");myChart.hideLoading();}})</script></body> </html>
实体类product代码
package bean;public class product {private String name; //类别名称private int 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;}public product(String name, int num) {this.name = name;this.num = num;} }
TestServlet代码
import bean.product; import com.fasterxml.jackson.databind.ObjectMapper;import javax.servlet.*; import javax.servlet.http.*; import javax.servlet.annotation.*; import java.io.IOException; import java.util.ArrayList; import java.util.List;@WebServlet(name = "TestServlet", value = "/TestServlet") public class TestServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request,response);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {List<product> list = new ArrayList<product>();//这里把“类别名称”和“销量”作为两个属性封装在一个Product类里，每个Product类的对象都可以看作是一个类别（X轴坐标值）与销量（Y轴坐标值）的集合list.add(new product("衬衣", 10));list.add(new product("短袖", 20));list.add(new product("大衣", 30));ObjectMapper mapper = new ObjectMapper(); //提供java-json相互转换功能的类 String json = mapper.writeValueAsString(list); //将list中的对象转换为Json格式的数组//System.out.println(json);//将json数据返回给客户端response.setContentType("text/html; charset=utf-8");response.getWriter().write(json);} }
效果展示
