echarts 柱状图和饼状图动态获取后台数据

最新推荐文章于 2026-05-29 09:17:00 发布

原创

最新推荐文章于 2026-05-29 09:17:00 发布 · 1.6w 阅读

本文介绍了如何使用Echarts库动态获取后台数据来展示柱状图和饼状图。首先，从官方站点下载echarts包并引入到项目中。接着，通过在HTML中创建图表容器，并在JS中利用AJAX请求获取数据，然后配置Echarts实例绘制柱状图。后台部分实现数据接口供前端调用。同样方法实现饼状图，最终展示了成功生成的柱状图和饼状图效果。

运用echarts来实现图表

1.首先下载echarts包 http://echarts.baidu.com/echarts2/doc/example.html，在这里我下载的是

2.将echarts包放到项目中，这是我在项目中的路径

3.柱状图的动态获取

首先 1）需要引入：

1  <script src="https://blog.csdn.net/js/jquery.min.js"></script>
2   <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
3 <script type="text/javascript"  src="https://blog.csdn.net/echarts/echarts.js"></script>

2）html，为柱状图设置容器

1 <body>
2       <div id="test" style="width:600px;height:400px;"></div>
3   </body>

3）js

<script type="text/javascript">  
        // 路径配置  
        require.config({  
            paths: {  
                echarts: '<%=basePath %>echarts'  
            }  
        });  
          
        // 使用  
        require(  
            [  
                'echarts',  
                'echarts/chart/line',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载  
            ],  
            function (ec) {  
                // 基于准备好的dom，初始化echarts图表  
                var myChart = ec.init(document.getElementById('test'));   
                  
      option = {
    title : {
        text: '农户地块面积统计'
      
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['承保人']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
             type: 'category',
             data : (function(){
            var arr=[];
            $.ajax({
                 type : "post",