echarts php mysql ajax实例

文件1：echarts.php

 1 <?php
 2 /**
 3  * ECSHOP 专题前台
 4  * ============================================================================
 5  * 版权所有 2005-2011 上海商派网络科技有限公司，并保留所有权利。
 6  * 网站地址: http://www.ecshop.com；
 7  * ----------------------------------------------------------------------------
 8  * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和
 9  * 使用；不允许对程序代码以任何形式任何目的的再发布。
10  * ============================================================================
11  * @author:     webboy <laupeng@163.com>
12  * @version:    v2.1
13  * ---------------------------------------------
14  */
15 
16 define('IN_ECS', true);
17 
18 require(dirname(__FILE__) . '/includes/init.php');
19 
20 if ((DEBUG_MODE & 2) != 2)
21 {
22     $smarty->caching = true;
23 }
24 $_REQUEST['act'] = isset($_REQUEST['act'])?$_REQUEST['act']:'default';
25 //查询网站配置信息
26 
27 $smarty->assign('action',$_REQUEST['act']);
28 if ($_REQUEST['act'] == 'default'){
29 
30 }
31 $smarty->display('echart.dwt');
32  ?>

文件2：echarts_index.php

define('IN_ECS', true);

require(dirname(__FILE__) . '/includes/init.php');

if ((DEBUG_MODE & 2) != 2)
{
    $smarty->caching = true;
}
$_REQUEST['act'] = isset($_REQUEST['act'])?$_REQUEST['act']:'default';
//查询网站配置信息

$smarty->assign('action',$_REQUEST['act']);
if ($_REQUEST['act'] == 'default'){

    $cat_info = $db->getAll("SELECT cat_id,cat_name FROM ecs_category where parent_id=0 and is_show=1");

    $data=json_encode($cat_info);

    echo $data;

}

文件3：echarts.dwt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>医流商城</title>
        <link href="http://www.e1617.com/themes/default/css/public.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <!-- #BeginLibraryItem "/library/headermin.lbi" --><!-- #EndLibraryItem -->

    {if $action=='default'}
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px;width: 800px;"></div>


    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        //路径配置
        require.config({
            paths:{
                echarts:'http://www.e1617.com/plugins/build/dist'
            }
        });
        //函数方法
        var arr1=[],arr2=[];arr3=[];
        function arrTest(){
            $.ajax({
                type:"post",
                async:false,
                url:"http://www.e1617.com/echart_index.php?act=default",
                data:{},
                dataType:"json",
                success:function(result){
                    if (result) {
                        for (var i = 0; i < result.length; i++) {
                            arr1.push(result[i].cat_id*1);
                            arr2.push(result[i].cat_name);
                            arr3.push((result[i].cat_id)*2);
                        }
                    }
                }
            })
            return arr1,arr2,arr3 ;
        }
        arrTest();
         console.log(arr1);console.log(arr3);

        //使用
        require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line'

            ],
            function (ec){
                var mychart=ec.init(document.getElementById('main'));
                var option={
                    title:{
                        text:'销量图',
                        subtext:'纯属捏造，如有雷同，人品爆发。'
                    },
                    tooltip: {
                        show: true
                    },
                    legend:{
                        data:['2017销量','2018销量']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    xAxis:[
                        {
                            type:'category',
                            data:arr2,
                            axisLabel:{
                                interval:0,//横轴信息全部显示
                                rotate:-20,//-30度角倾斜显示
                            }
                        }
                    ],
                    yAxis:{
                        type:'value',

                    },
                    series : [
                        {
                            "name":"2017销量",
                            "type":"bar",
                            "data":arr1,
                            barWidth:15,
                            markLine : {
                                data : [
                                    {type : 'average', name: '平均值'}
                                ]
                            },
                            itemStyle:{
                                normal:{
                                    color:'#4ad2ff',
                                    barBorderRadius: 3 //圆角
                                }
                            }
                        },
                        {
                            "name":"2018销量",
                            "type":"bar",
                            "data":arr3,
                            barWidth:15,
                            markLine : {
                                data : [
                                    {type : 'average', name: '平均值'}
                                ]
                            },
                            itemStyle:{
                                normal:{
                                    color:'#F39A00',
                                    barBorderRadius: 3,
                                }
                            }
                        },

                    ]



                };
                mychart.setOption(option);
            }


        );

    </script>
    {/if}

    <!-- #BeginLibraryItem "/library/footer.lbi" --><!-- #EndLibraryItem -->
    </body>

</html>

优质内容筛选与推荐>>
1、CSS Grid 布局完全指南(图解 Grid 详细教程)[转]
2、UTF-8、Unicode和BOM问题
3、VB常用函数-日期时间类函数
4、java编程思想——java IO系统
5、课上补充-2

0 │ 收藏 │ 举报

朋友将在看一看看到

分享想法到看一看