ajax动态赋值echarts的实例(饼图和柱形图)

我将详细讲解“ajax动态赋值echarts的实例(饼图和柱形图)”的完整攻略。以下是具体步骤:

准备工作

  1. 在HTML文件中引入ECharts的JS文件和相应的主题文件
<!-- 引入ECharts插件的JS库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.6.0/echarts.min.js"></script>

<!-- 引入ECharts主题文件的JS库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.6.0/theme/macarons.min.js"></script>
  1. 准备HTML页面的结构,包含ECharts容器
<!-- 定义ECharts容器 -->
<div id="chart" style="width: 600px;height:500px;"></div>

实现动态赋值ECharts

  1. 通过ajax获取需要的数据
$.ajax({
    url: 'data.json',
    dataType: 'json',
    success: function (data) {
        // 数据获取成功后,进行动态设置ECharts数据
    }
});
  1. success回调函数中,动态设置ECharts数据

饼图

// 获取ECharts对象
var myChart = echarts.init(document.getElementById('chart'), 'macarons');

// 设置饼图的参数
option = {
    title : {
        text: '饼图示例',
        subtext: '数据仅供参考',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        x : 'center',
        y : 'bottom',
        data:[]
    },
    series : [
        {
            name: '数据来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '50%'],
            data:[],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 将ajax返回的数据设置到饼图中
option.series[0].data = data.data; // data为ajax返回的数据

// 将Ajax返回的分类数据设置到饼图的legend中
option.legend.data = data.category; // category为ajax返回的分类数据

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

柱形图

// 获取ECharts对象
var myChart = echarts.init(document.getElementById('chart'), 'macarons');

// 设置柱形图的参数
option = {
    title: {
        text: '柱形图示例',
        subtext: '数据仅供参考',
        x: 'center'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:[]
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        data: [],
        axisLabel:{
            interval:0,
            rotate:-45
        }
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [],
        type: 'bar'
    }]
};

// 将ajax返回的数据设置到柱形图中
option.xAxis.data = data.category; // category为ajax返回的分类数据
option.series[0].data = data.data; // data为ajax返回的数据

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

示例说明

以下是两个示例,一个是从本地data.json文件动态获取数据并赋值到饼图中,另一个是从远程服务器获取数据并赋值到柱形图中。

示例1:动态赋值饼图

// 获取ECharts对象
var myChart = echarts.init(document.getElementById('chart'), 'macarons');

// 通过ajax获取数据
$.ajax({
    url: 'data.json', // data.json为本地文件路径
    dataType: 'json',
    success: function (data) {
        // 设置饼图的参数
        option = {
            title : {
                text: '饼图示例',
                subtext: '数据仅供参考',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                x : 'center',
                y : 'bottom',
                data:[]
            },
            series : [
                {
                    name: '数据来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '50%'],
                    data:[],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 将ajax返回的数据设置到饼图中
        option.series[0].data = data.data; // data为ajax返回的数据

        // 将Ajax返回的分类数据设置到饼图的legend中
        option.legend.data = data.category; // category为ajax返回的分类数据

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    }
});

示例2:动态赋值柱形图

// 获取ECharts对象
var myChart = echarts.init(document.getElementById('chart'), 'macarons');

// 通过ajax获取数据
$.ajax({
    url: 'http://example.com/data.json', // data.json为远程文件路径
    dataType: 'json',
    success: function (data) {
        // 设置柱形图的参数
        option = {
            title: {
                text: '柱形图示例',
                subtext: '数据仅供参考',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:[]
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                data: [],
                axisLabel:{
                    interval:0,
                    rotate:-45
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [],
                type: 'bar'
            }]
        };

        // 将ajax返回的数据设置到柱形图中
        option.xAxis.data = data.category; // category为ajax返回的分类数据
        option.series[0].data = data.data; // data为ajax返回的数据

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    }
});

以上就是使用ajax动态赋值echarts的实例攻略,希望能对你有所帮助!

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:ajax动态赋值echarts的实例(饼图和柱形图) - Python技术站

(0)
上一篇 2023年6月15日
下一篇 2023年6月15日

相关文章

  • java中创建写入文件的6种方式详解与源码实例

    Java中创建和写入文件的6种方式详解与源码实例 在Java中,我们可以使用多种方式来创建和写入文件。下面将详细介绍Java中创建和写入文件的6种方式,并提供代码示例。 1. 通过FileOutputStream写入文件 import java.io.*; public class FileOutputStreamExample { public stati…

    Java 2023年5月20日
    00
  • 浅谈spring security入门

    浅谈Spring Security入门 简介 Spring Security是Spring框架的安全性解决方案之一。它为Spring应用程序提供了身份验证、授权和其他安全功能。Spring Security是一种基于过滤器的安全性实现,可通过在Web应用程序中添加一组过滤器来提供许多基本的安全性机制,如基本认证、表单认证、单点登录等。 安装 在maven项目…

    Java 2023年5月20日
    00
  • 如何建立一个 XML 的开发环境

    建立一个 XML 的开发环境需要以下步骤: 1. 安装 XML 编辑器 现在有很多 XML 编辑器可供选择,比如 Notepad++、Sublime Text、Visual Studio Code、Eclipse 等。推荐使用 Visual Studio Code,因为它是一个免费、跨平台的开源代码编辑器,并且提供了丰富的插件来支持 XML 开发。 安装 V…

    Java 2023年5月20日
    00
  • Lambda表达式的使用及注意事项

    Lambda表达式是Java8新引入的一种语法形式,可以用于简洁地定义匿名函数,常用于对集合进行筛选、映射等操作。下面将详细讲解Lambda表达式的使用及注意事项。 Lambda表达式的语法 Lambda表达式由三部分组成:参数列表、箭头符号和表达式或语句块。其基本格式为: (参数列表) -> {表达式或语句块} 例如,下面是一个Lambda表达式的例…

    Java 2023年5月19日
    00
  • JavaWeb Servlet中Filter过滤器的详解

    JavaWeb Servlet中Filter过滤器的详解 一、什么是Filter过滤器 Filter,即过滤器,是Servlet规范中一个重要的组件,用于对Servlet容器的请求和响应进行过滤和修改。它能够拦截所有的用户请求,对请求参数、头部信息等进行检查,还可以修改请求的目标和响应内容。 二、Filter过滤器的应用场景 在JavaWeb开发中,通常会出…

    Java 2023年6月15日
    00
  • Spring如何处理注解的深入理解

    下面是关于“Spring如何处理注解的深入理解”的完整攻略,包含两个示例说明。 Spring如何处理注解的深入理解 Spring是一个非常流行的Java应用程序框架,它提供了一种全面的编程和配置模型,用于构建现代化的基于Java的企业应用程序。在Spring中,注解是一种非常重要的机制,它可以帮助我们更加方便地配置和管理应用程序。本文将深入探讨Spring如…

    Java 2023年5月17日
    00
  • 18个Java8日期处理的实践(太有用了)

    18个Java8日期处理的实践(太有用了) 完整攻略 本文主要介绍Java8中日期处理的实践,通过多个示例,详细讲解如何使用Java8中的新特性来处理日期。 1. LocalDate LocalDate是Java8中新增的日期类型,用来表示一个日期,但不包含时间和时区信息。 示例 //创建LocalDate对象 LocalDate date = LocalD…

    Java 2023年5月20日
    00
  • UrlDecoder和UrlEncoder使用详解_动力节点Java学院整理

    UrlDecoder和UrlEncoder使用详解 UrlDecoder和UrlEncoder是Java中用于处理URL参数编码和解码的工具类,通过使用它们可以有效地处理URL编码的数据。本文将详细介绍这两个工具类的使用方法和示例。 UrlDecoder的使用 使用方法 导入相关类 java import java.net.URLDecoder; 调用dec…

    Java 2023年5月20日
    00
合作推广
合作推广
分享本页
返回顶部