ECharts使用

最近做项目时,要动态读取数据做成图表,然后听同事提到百度的ECharts,很好用。

ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。

ECharts 提供了常规的折线图,柱状图,散点图,饼图,K线图,用于统计的盒形图,用于地理数据可视化的地图,热力图,线图,用于关系数据可视化的关系图,treemap,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。

来看看使用,直接上例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>ECharts</title>
</style>
<script src="echarts.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            data:['蒸发量','降水量','平均温度']
        },
        xAxis: [
            {
                type: 'category',
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '水量',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value} ml'
                }
            },
            {
                type: 'value',
                name: '温度',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                    formatter: '{value} °C'
                }
            }
        ],
        series: [
            {
                name:'蒸发量',
                type:'bar',
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
            },
            {
                name:'降水量',
                type:'bar',
                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
            },
            {
                name:'平均温度',
                type:'line',
                yAxisIndex: 1,
                data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

1.引入echarts.js

2.加数据

3.调用

简单吧!QQ截图20161116145142.png

下面看看动态添加数据(php):

先看效果:

QQ截图20161116145112.png

三种数据,年份,家数,方量。

输出数据(tp):

public function szsn(){
        $where['c_type'] = 4;
        $c = M("charts");
        //取最近7条数据  按升序排列
        $this->data111 = array_reverse($c->where($where)->order('c_year desc')->limit(7)->getField('c_year',true));
        $this->data222 = array_reverse($c->where($where)->order('c_year desc')->limit(7)->getField('c_quota1',true));
        $this->data333 = array_reverse($c->where($where)->order('c_year desc')->limit(7)->getField('c_quota2',true));
        $this->display();
    }

前台tpl:

<div id="chart3" 
data-111="{:implode(',',$data111)}" 
data-222="{:implode(',',$data222)}" 
data-333="{:implode(',',$data333)}" //合并数组为字符串
style="width: 530px;height:290px;" 
class="wd-fl">
</div>
<script src="/Skin/public/echarts/echarts.min.js"></script>
<script src="/Skin/public/echarts/macarons.js"></script>  //引用主题  官网有多种主题
<script type="text/javascript">
 
        var Chart3 = echarts.init(document.getElementById('chart3'),'macarons');
        var data111 = $('#chart3').attr('data-111'),
            data222 = $('#chart3').attr('data-222'),
            data333 = $('#chart3').attr('data-333'),
            arr_data111 = data111.split(",");//拆分字符串为数组 
            arr_data222 = data222.split(",");
            arr_data333 = data333.split(",");

        
        var option3 = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['方量','家数']
            },
            xAxis: [
                {
                    type: 'category',
                    data: arr_data111
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '万方',
                    min: 1000,
                    max: 3000,
                    interval: 400,
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                {
                    type: 'value',
                    name: '',
                    min: 40,
                    max: 80,
                    interval: 5,
                    axisLabel: {
                        formatter: '{value}家'
                    }
                }
            ],
            series: [
                {
                    name:'方量',
                    type:'bar',
                    data:arr_data222
                },
                {
                    name:'家数',
                    type:'line',
                    yAxisIndex: 1,
                    data:arr_data333
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        Chart3.setOption(option3);
    </script>

看懂了吗?是不是很方便,你是不是有更好的idea!


更多详情,请看echarts