【转】Echarts的使用以及动态加载数据

一、Echarts的介绍

ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。—— 大数据时代，重新定义数据图表的时候到了（ps：来自网络）
自己最近使用echarts对中国石化客户关系进行可视化分析，结合官网学习了ECharts 中实现异步数据，然后自己作为小白在这里总结下使用方法。
官方文档：Echart3官方文档.Echart2官方文档.

二、Echarts的使用

1、官方下载

Echarts3.0的完整版下载

2、页面引入Echart.js和JQuery(异步加载使用)

<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/echarts.min.js"></script>

并准备一个div容器

<style>#main{width: 600px;height: 400px;}</style>
<div id="main"></div>

3、echart实例初始化设置，然后异步请求数据，画一张柱状图

关于几个配置项的解释：
title：图片的名称
legend：图例组件，可以通过点击图例控制哪些系列不显示
xAxis：直角坐标系 grid 中的 x 轴
yAxis：直角坐标系 grid 中的 y 轴
series：系列列表。每个系列通过 type 决定自己的图表类型，这里是柱状图‘bar’

    <script>
        myChart=echarts.init(document.getElementById('main'));//获取容器
        //先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据
        myChart.setOption({
            title: {
                text: '异步数据加载示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: []
            }]
        });
        // 异步加载json格式数据
        $.getJSON('http://localhost:63342/echart/loaddata/client.php',function(data){
            myChart.setOption({
                xAxis: {
                    data: data.categories
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '销量',
                    data: data.data
                }]
            });
        });
    </script>
</body>
</html>

4、通过PHP进行后台数据处理：client.php

<?php
#连接数据库
$conn=mysqli_connect('localhost','root','root','demo');
if($conn->connect_errno){
    die('连接失败'.$conn->connect_errno);
}
#设置字符集
$conn->set_charset('utf8');
#查询数据
$sql='select * from clothes';
$result=mysqli_query($conn,$sql);
#将数据转化成json格式
$json_data=array('categories'=>array(),'data'=>array());
while ($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){
    array_push($json_data['data'],intval($row['data']));//将字符串转化为数值
    array_push($json_data['categories'],$row['categories']);
}
echo json_encode($json_data);//打印编码后的json字符串*/
?>

其中段代码，主要是将数据库的对应字段的每一列提取出来，然后放在关联数组里

 while ($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){
    array_push($json_data['data'],intval($row['data']));//将字符串转化为数值
    array_push($json_data['categories'],$row['categories']);
}

最后这是我们想要的json数据格式

想要的数据格式

5、数据库设计

注意：这里“data”是整形，要使用intval()方法转化下

数据库数据

6、最终效果

　　　　　　　　　　　　　　　　　　效果

原文链接：http://www.jianshu.com/p/5c0d09f30b5a