echarts读取excle转为json格式显示图表同步加载数据的方法(1)

简介: echarts读取excle转为json格式显示图表同步加载数据的方法(1)

一、引入jquery.min.js、jquery.csv.min.js和echarts.min.js核心js库;

    <!--jquery核心库-->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <!--jquery.csv核心库-->
    <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.3/jquery.csv.min.js"></script>
    <!--echarts核心库-->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

二、echarts读取同步加载数据

 /*读取csv数据*/
    var Dname = [], Data = [];
    function getCsv() {
        var csv_file_API = 'line.csv';//csv files
        $.ajax({
            type: 'post',
            url: csv_file_API,
            async: false,//必须设置为false,才能实现jsonData的全局变量赋值
            dataType: 'text',
            success: function (data) {
                var dataCsv = $.csv.toObjects(data);//获取数组,并通过jQuery-CSV进行处理转化;
                //console.log(dataCsv);
                /*处理CSV数据,并输入Echarts格式*/
                for (var i = 0; i < dataCsv.length; i++) {
                    Dname.push(dataCsv[i].name);
                    Data.push(dataCsv[i].data);
                }
            },
            error: function (e) {
                alert('API调用出错!');
                console.log("API call Failed: ", e);
            }
        });
        return Dname, Data;
    }
    getCsv();
    /*echarts图表渲染*/
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: Dname
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: Data,
            type: 'bar'
        }]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
相关文章
|
1月前
|
JavaScript 数据可视化 BI
echarts的使用 超好用的报表制作、数据的图形化展示
您提供的链接是关于echarts使用的博客文章,它介绍了如何使用echarts进行数据的图形化展示,包括制作报表和图表。echarts是一个强大的数据可视化工具,能够创建折线图、柱状图、饼图等多种图表类型。文章还提供了一个Demo演示和项目结构的图片,以及官网链接供读者参考。
echarts的使用 超好用的报表制作、数据的图形化展示
|
28天前
|
JSON Java Android开发
Android 开发者必备秘籍:轻松攻克 JSON 格式数据解析难题,让你的应用更出色!
【8月更文挑战第18天】在Android开发中,解析JSON数据至关重要。JSON以其简洁和易读成为首选的数据交换格式。开发者可通过多种途径解析JSON,如使用内置的`JSONObject`和`JSONArray`类直接操作数据,或借助Google提供的Gson库将JSON自动映射为Java对象。无论哪种方法,正确解析JSON都是实现高效应用的关键,能帮助开发者处理网络请求返回的数据,并将其展示给用户,从而提升应用的功能性和用户体验。
39 1
|
1月前
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
|
21天前
|
JSON 开发工具 数据格式
【Azure Event Hub】Event Hub的Process Data页面无法通过JSON格式预览数据
【Azure Event Hub】Event Hub的Process Data页面无法通过JSON格式预览数据
|
25天前
|
前端开发 数据可视化 JavaScript
【揭秘神器】如何用Pyecharts轻松召唤出Echarts?只需几行Python代码,让你的数据瞬间生动起来!
【8月更文挑战第21天】Pyecharts是一款基于Python的图表生成库,利用Echarts强大的JavaScript可视化能力,让开发者无需编写前端代码即可在Python环境中创建美观图表。本文通过实例演示如何安装Pyecharts并生成一个展示城市气温分布的柱状图,包括基本图表生成及自定义样式设置,如颜色调整、图例显示等,最终将图表嵌入HTML文件展示,适合各水平开发者快速掌握数据可视化技能。
29 0
|
1月前
|
JSON JavaScript 前端开发
Vue项目使用Cookie,以Json格式存入与读取Cookie,设置过期时间以及删除操作
这篇文章介绍了在Vue项目中如何使用JavaScript操作Cookie,包括设置、读取、设置过期时间以及删除Cookie的方法。
87 0
|
2月前
|
小程序 前端开发
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
105 0
|
4月前
|
JSON 前端开发 Java
Json格式数据解析
Json格式数据解析
|
XML JSON 前端开发
ajax请求json和xml数据及对json和xml格式数据的解析
ajax请求json和xml数据及对json和xml格式数据的解析
173 0
|
XML 存储 JSON
JSON&Ajax(语法格式+解析json)
导读模块:发展史: 21世纪初,Douglas Crockford寻找一种简便的数据交换格式, 能够在服务器之间交换数据。当时通用的数据交换语言是XML, 但是Douglas Crockford觉得XML的生成和解析都太麻烦, 所以他提出了一种简化格式,也就是Json。
112 0

热门文章

最新文章