初见Echarts&ajax

最新推荐文章于 2024-04-24 13:32:07 发布

Luminary_aurora

最新推荐文章于 2024-04-24 13:32:07 发布

阅读量209

点赞数

分类专栏： Ajax 文章标签： ajax Echarts

本文链接：https://blog.csdn.net/qq_40197828/article/details/79276762

版权

Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

数据可视化以及后台接口ajax的编写

Echarts

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。-By EchartsOffice

最近参加的服务外包比赛需要涉及到数据可视化的页面，之前就听过Echarts是一个非常好用而且图形很炫酷的可视化库，鉴于未来想走的方向也是属于可视化领域，所以就决定采用Echarts编写数据化页面。

使用Echarts首先要下载对应的版本，我下载的是开发者完整版，然后将对应文件引入代码中

<!-- 引入 echarts -->
<script src="js/echarts.js"></script>

<!-- 引入 vintage和dark 主题 -->
<script src="js/theme/vintage.js"></script>
<script src="js/theme/dark.js"></script>

1.接下来为Echarts准备一个DOM容器

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的图形，在这里以饼状图为例，Echarts的官方文档非常详细，以下设置Echarts均在<scripts>标签内。

1.Init方法初始化：

var myChart1 = echarts.init(document.getElementById('first'),'dark');

2.指定图标的配置项和数据，开始demo中自定义的静态数据，后面将静态数据变为动态数据，采用ajax：

var option1 = {
        title: {
                text: '正确及错误率统计',
                left:'center'
        },
        textStyle:{
            fontSize:15
        },
        series: [{
            name: '概率统计',
            type: 'pie',
            radius: '60%',
            legendHoverLink:true,
            // data:[
            //      {value:600, name:'正确率'},
            //      {value:400, name:'错误率'}
            // ]
            data : [function(){
             var arrNum = [];
             $.ajax(
             {
                type: "post",
                url: "" ,
                dataType : 'json',                                                              //传回来的数据形式为json对象形式
                async:true,
                success: function (result) {
                    var type = result.type;                                                         //type和num是后台定义的名字
                    var typeNum = result.num;
                     for (var i = 0; i < type.length; i++)
                     {
                                arrNum.push({"value": typeNum[i],"name":type[i]});
                        }
                }
                     });
                     return arrNum;
         }]
        }]
};

3.最后一步使用刚指定的配置项和数据显示图表：

myChart1.setOption(option1);

一些特殊的渲染效果视觉映射以及样式设置等可以参考官方文档进行对应的设置。

ajax

AJAX = Asynchronous JavaScript and XML
ajax为异步的javascript，AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
Ajax为一个方法可以写在JS的函数当中，以上面动态数据更新的ajax代码为例

type可以为get/post
url即为数据传输的接口
dataType可以设置传输回来的数据格式，json即为json对象的格式，一般为key-value键值对的格式
async:true，当async: true 时，ajax请求是异步的，false是同步请求，默认为true。
success: function (result)，成功的回调函数，将json对象的数据格式拆分为想要的格式，首先建立一个新的数组，将type和num拆分后，push到空数组中，然后将装满数据的数组返回给data，即填充了data中的数据。注意type和num关键字的名字都是由后台数据格式所确定。

以上就是前几日新学的知识点，虽然ajax还没有完全吃透，不过等下一次再接触到ajax时我想应该还会有新的发现，希望每一天都会有不一样的自己。

Luminary_aurora

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初见Echarts&ajax

数据可视化以及后台接口ajax的编写Echarts ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。-By EchartsOffic
复制链接

扫一扫