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);
    }
相关文章
|
9天前
|
存储 JSON JavaScript
【chat-gpt问答记录】python将数据存为json格式和yaml格式
【chat-gpt问答记录】python将数据存为json格式和yaml格式
24 1
|
15天前
|
存储 JSON JavaScript
使用Python处理JSON格式数据
使用Python处理JSON格式数据
Echarts各类图表常用配置项说明,附示例代码
Echarts各类图表常用配置项说明,附示例代码
|
4天前
|
JSON Java 数据格式
Java中创建Json对象的方法和详细代码
Java中创建Json对象的方法和详细代码
20 1
|
9天前
|
JSON JavaScript 前端开发
jQuery获取json文件的方法
jQuery获取json文件的方法
12 2
|
13天前
|
JSON PHP 数据格式
蓝易云 - PHP用CURL发送Content-type为application/json的POST请求方法
在这段代码中,我们首先创建了一个包含我们要发送的数据的数组,并使用 `json_encode`函数将其转换为JSON格式。然后,我们初始化了一个cURL会话,并设置了一些选项,包括POST请求方法、要发送的数据、返回结果和HTTP头部信息。最后,我们执行了cURL请求并关闭了会话。
16 2
|
19小时前
|
XML JSON 开发框架
一篇文章讲明白JSON格式转换成XML格式
一篇文章讲明白JSON格式转换成XML格式
|
19小时前
|
XML JSON 开发框架
一篇文章讲明白JSON格式转换成XML格式
一篇文章讲明白JSON格式转换成XML格式
|
22小时前
|
XML JSON 前端开发
JSON——IT技术人员都必须要了解的一种数据交换格式
JSON——IT技术人员都必须要了解的一种数据交换格式
|
1天前
|
XML 存储 JSON
程序员必知:urlencoded、json格式详解
程序员必知:urlencoded、json格式详解