zoukankan      html  css  js  c++  java
  • echart动态加载数据

    <!DOCTYPE html>

    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style="height:400px"></div>
        <!-- ECharts单文件引入 -->
        <script src="js/dist/echarts.js"></script>
        <script src="Scripts/jquery-2.1.4.min.js"></script>
        <script type="text/javascript">
         var uri = 'api/echart_test'
        // 路径配置
        require.config({
            paths:{
                echarts: 'js/dist'
        }
        });
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line',
                'echarts/chart/map' // 使用柱状图就加载bar模块,按需加载
            ],
            drewEcharts
        );
        function drewEcharts(ec) {
            // 基于准备好的dom,初始化echarts图表
            myChart = ec.init(document.getElementById('main'));
            var option = {
                tooltip: {
                    show: true
                },
                legend: {
                    data:['销量']
                },
                xAxis : [
                    {
                        type : 'category',
                        data : (function(){
                            var arr=[];
                            $.ajax({
                                type : "get",
                                async : false, //同步执行
                                url : uri,
                                data : {},
                                dataType : "json", //返回数据形式为json
                                success : function(result) {
                                    if (result) {
                                        for(var i=0;i<result.length;i++){
                                            console.log(result[i].name);
                                            arr.push(result[i].name);
                                        }
                                    }
     
                                },
                                error : function(errorMsg) {
                                    alert("error");
                                    myChart.hideLoading();
                                }
                            })
                            return arr;
                        })()
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        "name":"销量",
                        "type": uri,
                        "data":(function(){
                            var arr=[];
                            $.ajax({
                                type : "get",
                                async : false, //同步执行
                                url : uri,
                                data : {},
                                dataType : "json", //返回数据形式为json
                                success : function(result) {
                                    if (result) {
                                        for(var i=0;i<result.length;i++){
                                            console.log(result[i].num);
                                            arr.push(result[i].num);
                                        }
                                    }
                                },
                                error : function(errorMsg) {
                                    alert("error!");
                                    myChart.hideLoading();
                                }
                            })
                            return arr;
                        })()
     
                    }
                ]
            };
            // 为echarts对象加载数据
            myChart.setOption(option);
        }
        </script>
  • 相关阅读:
    gorm 更新数据时,0值会被忽略
    xshell评估过期解决办法
    安装zoom
    aria2 加速百度网盘下载
    ubuntu17.10 安装firefox的flash
    c++ 回调函数使用
    ubuntu17 安装中文输入法
    ubuntu python3.6 找不到_sqlite3
    linux 获取CPU个数
    centos7 yum与Python3冲突
  • 原文地址:https://www.cnblogs.com/ZHANGKAIXUAN/p/6612844.html
Copyright © 2011-2022 走看看