[关闭]
@jingwentian 2015-06-11T04:22:00.000000Z 字数 7720 阅读 2789

Echarts 图表使用说明

说明文档

官方文档 : http://echarts.baidu.com/doc/doc.html

现在支持的图表类型有:

支持的添加方式

方法所在目录

使用方法简介

// 后台方法 ------------------------------------------------
use library\Base\Charts;
$dom = 'main'; //页面图层的DOM ID
$title = array(
    'text' => '广告统计' //图表标题
);
$legend = array('邮件营销','联盟广告'); // 图例中的区分标识
$xAxis = array('周一','周二','周三','周四','周五','周六','周日'); //X轴
$series = array( // 显示数据
    array(
        'name' => '邮件营销',
        'type' => 'line',
        'stack' => '总量',
        'data' => array(120, 132, 101, 134, 90, 230, 210),
    ),
    array(
        'name' => '联盟广告',
        'type' => 'line',
        'stack' => '总量',
        'data' => array(220, 182, 191, 234, 290, 330, 310),
    ),
);
$chats = Charts::showLine($dom, $title, $legend, $xAxis, $series);
$this->getView()->assign('showChatsConfig', $chats);

// 前台页面 ------------------------------------------------
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<?php echo $showChatsConfig;?>

使用方法详解

条形图

$dom = 'main';
$title = array(
    'text' => '广告统计'
);
$legend = array('邮件营销','联盟广告');
$xAxis = array('周一','周二','周三','周四','周五','周六','周日');
$series = array(
    array(
        'name' => '邮件营销',
        'type' => 'line',
        'stack' => '总量',
        'data' => array(120, 132, 101, 134, 90, 230, 210),
    ),
    array(
        'name' => '联盟广告',
        'type' => 'line',
        'stack' => '总量',
        'data' => array(220, 182, 191, 234, 290, 330, 310),
    ),
);

$chats = Charts::showLine($dom, $title, $legend, $xAxis, $series);

柱状图

$dom2 = 'main';
$title2 = array(
    'text' => '2010-2013年中国城镇居民家庭人均消费构成（元）',
    'subtext' => '数据来自国家统计局',
    'sublink' => 'http://www.jingwentian.com'
);
$legend2 = array("2010","2011","2012","2013");
$xAxis2 = array("食品", "衣着", "居住", "家庭设备及用品", "医疗保健", "交通和通信", "文教娱乐服务", "其他");
$series2 = array(
    array(
        'name' => '2010',
        'data' => array(4804.7,1444.3,1332.1,908,871.8,1983.7,1627.6,499.2),
    ),
    array(
        'name' => '2011',
        'data' => array(5506.3,1674.7,1405,1023.2,969,2149.7,1851.7,581.3),
    ),
    array(
        'name' => '2012',
        'data' => array(6040.9,1823.4,1484.3,1116.1,1063.7,2455.5,2033.5,657.1),
    ),
    array(
        'name' => '2013',
        'data' => array(6311.9,1902,1745.1,1215.1,1118.3,2736.9,2294,699.4),
    ),
);
$chats = Charts::showBar($dom2, $title2, $legend2, $xAxis2, $series2);

圆饼图1

$dom3 = 'main';
$title3 = array(
    'text' => '某站点用户访问来源',
    'subtext' => '纯属虚构',
);
$legend3 = array('直接访问','邮件营销','联盟广告','视频广告','搜索引擎');
$series3 = array(
    array(
        'value' => 335,
        'name' => '直接访问',
    ),
    array(
        'value' => 310,
        'name' => '邮件营销',
    ),
    array(
        'value' => 234,
        'name' => '联盟广告',
    ),
    array(
        'value' => 135,
        'name' => '视频广告',
    ),
    array(
        'value' => 1548,
        'name' => '搜索引擎',
    ),
);

$chats = Charts::showPie1($dom3, $title3, $legend3, '', $series3);

圆饼图2

$dom4 = 'main';
$title4 = array(
    'text' => '某站点用户访问来源',
    'subtext' => '纯属虚构',
);
$legend4 = array("GoogleMaps","Facebook","Youtube");
$series4 = array(
    array(
        'center' => array('20%','30%'),
        'x' => '20%',
        'data' => array(
            array('name'=>'other', 'value' => 46),
            array('name'=>'GoogleMaps', 'value' => 54),
        ),
    ),
    array(
        'center' => array('50%','30%'),
        'x' => '50%',
        'data' => array(
            array('name'=>'other', 'value' => 56),
            array('name'=>'Facebook', 'value' => 44),
        ),
    ),
    array(
        'center' => array('80%','30%'),
        'x' => '80%',
        'data' => array(
            array('name'=>'other', 'value' => 65),
            array('name'=>'Youtube', 'value' => 35),
        ),
    ),
);

$chats = Charts::showPie2($dom4, $title4, $legend4, '', $series4);

折柱混搭

$dom = 'main';
$title = array(
    'text' => '广告统计'
);
$legend = array("蒸发量","降水量","平均温度");
$xAxis = array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
$yAxis = array(
    array('name' => '水量','formatter' => 'ml'),
    array('name' => '温度','formatter' => '°C'),
);
$series = array(
    array(
        'name' => '蒸发量',
        'type' => 'bar',
        'data' => array(2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3),
    ),
    array(
        'name' => '降水量',
        'type' => 'bar',
        'data' => array(2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3),
    ),
    array(
        'name' => '平均温度',
        'type' => 'line',
        'yAxisIndex' => 1,
        'data' => array(2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2),
    ),
);

$chats = Charts::showMix1($dom, $title, $legend, $xAxis, $yAxis, $series);

地图饼图混搭

$dom = 'main';
$title = array(
    'text' => '2011全国GDP（亿元）',
    'subtext' => '数据来自国家统计局'
);
$legend = array('北京','上海','广东');

$series = array(
    array(
        'name' => '2011全国GDP分布',
        'data' => array (
            array('name'=>"西藏", 'value'=>'605.83'),
            array('name'=>"青海", 'value'=>'1670.44'),
            array('name'=>"宁夏", 'value'=>'2102.21'),
            array('name'=>"海南", 'value'=>'2522.66'),
            array('name'=>"甘肃", 'value'=>'5020.37'),
            array('name'=>"贵州", 'value'=>'5701.84'),
            array('name'=>"新疆", 'value'=>'6610.05'),
            array('name'=>"云南", 'value'=>'8893.12'),
            array('name'=>"重庆", 'value'=>'10011.37'),
            array('name'=>"吉林", 'value'=>'10568.83'),
            array('name'=>"山西", 'value'=>'11237.55'),
            array('name'=>"天津", 'value'=>'11307.28'),
            array('name'=>"江西", 'value'=>'11702.82'),
            array('name'=>"广西", 'value'=>'11720.87'),
            array('name'=>"陕西", 'value'=>'12512.3'),
            array('name'=>"黑龙江", 'value'=>'12582'),
            array('name'=>"内蒙古", 'value'=>'14359.88'),
            array('name'=>"安徽", 'value'=>'15300.65'),
            array('name'=>"北京", 'value'=>'16251.93', 'selected'=>'true'),
            array('name'=>"福建", 'value'=>'17560.18'),
            array('name'=>"上海", 'value'=>'19195.69', 'selected'=>'true'),
            array('name'=>"湖北", 'value'=>'19632.26'),
            array('name'=>"湖南", 'value'=>'19669.56'),
            array('name'=>"四川", 'value'=>'21026.68'),
            array('name'=>"辽宁", 'value'=>'22226.7'),
            array('name'=>"河北", 'value'=>'24515.76'),
            array('name'=>"河南", 'value'=>'26931.03'),
            array('name'=>"浙江", 'value'=>'32318.85'),
            array('name'=>"山东", 'value'=>'45361.85'),
            array('name'=>"江苏", 'value'=>'49110.27'),
            array('name'=>"广东", 'value'=>'53210.28', 'selected'=>'true')
        )
    ),
    array(
        'name' => '2011全国GDP对比',
        'data' => array(
            array('name' => '北京', 'value' => '16251.93'),
            array('name' => '上海', 'value' => '19195.69'),
            array('name' => '广东', 'value' => '53210.28'),
        )
    )
);

$chats = Charts::showMix2($dom, $title, $legend, $series);

多图联动

这个多图组合方式暂时固定图例中的组合, 其他的组合使用下面的方式

$dom = array('main1','main2');
$mixOption = array(
    # 组合1配置
    array(
        'title' => array(
            'text' => '某站点用户访问来源',
            'subtext' => '纯属虚构'
        ),
        'legend' => array("直接访问","邮件营销","联盟广告","视频广告","搜索引擎"),
        'series' => array(
            'name' => '访问来源',
            'data' => array(
                array('value' => '335', 'name' => '直接访问'),
                array('value' => '310', 'name' => '邮件营销'),
                array('value' => '234', 'name' => '联盟广告'),
                array('value' => '135', 'name' => '视频广告'),
                array('value' => '1548', 'name' => '搜索引擎')
            )
        )
    ),
    # 组合2配置
    array(
        'legend' => array("直接访问","邮件营销","联盟广告","视频广告","搜索引擎"),
        'xAxis' => array("周一","周二","周三","周四","周五","周六","周日"),
        'series' => array(
            array(
                'name' => '直接访问',
                'data' => array(320, 332, 301, 334, 390, 330, 320)
            ),
            array(
                'name' => '邮件营销',
                'data' => array(120, 132, 101, 134, 90, 230, 210)
            ),
            array(
                'name' => '联盟广告',
                'data' => array(220, 182, 191, 234, 290, 330, 310)
            ),
            array(
                'name' => '视频广告',
                'data' => array(150, 232, 201, 154, 190, 330, 410)
            ),
            array(
                'name' => '搜索引擎',
                'data' => array(820, 932, 901, 934, 1290, 1330, 1320)
            ),
        )
    )
);
$chats = Charts::showMix3($dom, $mixOption);
<!-- 页面DOM
<div id="main1" style="width: 400px;height:400px; display:inline-block;float: left;"></div>
<div id="main2" style="width: 600px;height:400px; display:inline-block;"></div>
-->

图表的组合展示

一个页面中任意展示多个图表, 则分别配置输出即可

一个 条形图 和 柱状图 组合的例子

// 折线图的配置
$dom1 = 'main1';
$title1 = array(
    'text' => '广告统计'
);
$legend1 = array('邮件营销','联盟广告');
$xAxis1 = array('周一','周二','周三','周四','周五','周六','周日');
$series1 = array(
    array(
        'name' => '邮件营销',
        'type' => 'line',
        'stack' => '总量',
        'data' => array(120, 132, 101, 134, 90, 230, 210),
    ),
    array(
        'name' => '联盟广告',
        'type' => 'line',
        'stack' => '总量',
        'data' => array(220, 182, 191, 234, 290, 330, 310),
    ),
);

$dom2 = 'main2';
$title2 = array(
    'text' => '2010-2013年中国城镇居民家庭人均消费构成（元）',
    'subtext' => '数据来自国家统计局',
    'sublink' => 'http://www.jingwentian.com'
);
$legend2 = array("2010","2011","2012","2013");
$xAxis2 = array("食品", "衣着", "居住", "家庭设备及用品", "医疗保健", "交通和通信", "文教娱乐服务", "其他");
$series2 = array(
    array(
        'name' => '2010',
        'data' => array(4804.7,1444.3,1332.1,908,871.8,1983.7,1627.6,499.2),
    ),
    array(
        'name' => '2011',
        'data' => array(5506.3,1674.7,1405,1023.2,969,2149.7,1851.7,581.3),
    ),
    array(
        'name' => '2012',
        'data' => array(6040.9,1823.4,1484.3,1116.1,1063.7,2455.5,2033.5,657.1),
    ),
    array(
        'name' => '2013',
        'data' => array(6311.9,1902,1745.1,1215.1,1118.3,2736.9,2294,699.4),
    ),
);

$chats1 = Charts::showLine($dom1, $title1, $legend1, $xAxis1, $series1);
$chats2 = Charts::showBar($dom2, $title2, $legend2, $xAxis2, $series2);
$chats = $chats1 . $chats2;

<!-- 页面DOM
<div id="main1" style="width: 400px;height:400px;"></div>
<div id="main2" style="width: 600px;height:400px;"></div>
-->
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注