echarts入门，5分钟上手写ECharts的第一个图表-低调大师

echarts入门，5分钟上手写ECharts的第一个图表

2017-12-30 586

1.新建一个echarts.html文件，为ECharts准备一个具备大小（宽高）的Dom。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>

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

2.新建script标签引入模块化单文件echarts.js

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</body>

3.新建script标签中为模块加载器配置echarts和所需图表的路径

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
    </script>
</body>

4.script标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                
                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['销量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"销量",
                            "type":"bar",
                            "data":[5, 20, 40, 10, 10, 20]
                        }
                    ]
                };
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>

5.查看效果

参考上述内容+官方相关案例，调整修改，应用到自己的项目中

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>支付方式统计</title>
    <style>
        #main {
            margin: 30px;
        }
    </style>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:500px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data:['微信','支付宝','积分','其他']
                    },
                    series: [
                        {
                            name:'支付方式',
                            type:'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:[
                                {value:'{sh:$payment.weixin}', name:'微信'},
                                {value:'{sh:$payment.alipay}', name:'支付宝'},
                                {value:'{sh:$payment.integral}', name:'积分'},
                                {value:'{sh:$payment.other}', name:'其他'}
                            ]
                        }
                    ]
                };
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>

获取相关数据

<?php
/**
 * 支付方式管理
 */
class PaymentAction extends AgentAction{
    protected function _initialize() {
        parent::_initialize();
    }
    
    // 付款方式统计
    public function index(){
        // 统计订单的支付方式
        $orderModel = D('Order');
        $payment['weixin'] = $orderModel->getPaytypeOrderNum('weixin');
        $payment['alipay'] = $orderModel->getPaytypeOrderNum('alipay');
        $payment['integral'] = $orderModel->getPaytypeOrderNum('integral');
        $payment['other'] = $orderModel->getPaytypeOrderNum();

        $this->assign('payment',$payment);
        $this->display();
    }
}
?>

本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/5736135.html，如需转载请自行联系原作者

微信关注我们

原文链接：https://yq.aliyun.com/articles/339206

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

jquery网页倒计时效果，秒杀，限时抢购！

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery版的网页倒计时效果</title> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport"> <meta name="format-detection" content="telephone=no" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="a...

2017-12-31

545

1.引入文件 <link rel="stylesheet" href="./css/sm.min.css"> <link rel="stylesheet" href="./css/sm-extend.min.css"> <script type='text/javascript' src='./lib/zepto/zepto.min.js' charset='utf-8'></script> <script type='text/javascript' src='./js/sm.min.js' charset='utf-8'></script> <script type='text/javascript' src='./js/sm-extend.min.js' charset='utf-8'></script> 2.调用模块 <div class="page-group"> <div class="page page-current"> <header clas...

2017-12-31

536

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。