echarts前端+Java后端数据=生成柱状图

最新推荐文章于 2024-09-30 14:12:35 发布

Object^

最新推荐文章于 2024-09-30 14:12:35 发布

阅读量6.3k

点赞数

分类专栏： Java Js和Jq

本文链接：https://blog.csdn.net/weixin_45736927/article/details/104675745

版权

本文介绍如何结合Echarts前端库和Java后端数据，来生成柱状图。前端部分需要注意依赖需要从网络加载，如echarts、vue和jquery。后端部分未详述。

摘要由CSDN通过智能技术生成

效果

在这里插入图片描述

前端

需注意：需要连接网络才可以使用,因为引入的echarst和vue和jquery都是访问网上的。

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <title>柱状图</title>
        <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
     <!-- 引入 vue -->
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <!-- 引入 jquery -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
     </head>
     <body>
          <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
          <div id="main" style="width: 600px;height:400px;"></div>
          <script type="text/javascript">
           var vm=new Vue({
   
           		el:"#main",
           		data:{
   
           			name:["中国","美国"],
           			type:["2","1"]
           		},
           		methods:{
   	//自定义方法
           		getBarChart:function(){
   
           			$.get("http://localhost:8081/jeefast-rest/tb/school/getPie",{
   }