<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px;margin-top: 100px;"></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/line', // 使用柱状图就加载bar模块，按需加载

                'echarts/chart/bar'

            ],

            function (ec) {

                // 基于准备好的dom，初始化echarts图表

                var myChart = ec.init(document.getElementById('main')); 

                var option = {

                    title : {

                        text: '关注人数',

                        subtext: '纯属虚构'

                    },

                    tooltip : {

                        axisPointer:{type:'none'},

                        trigger: 'axis'   //提示信息

                    },

                    legend: {

                        data:['关注人数'] //图例

                    },

                    toolbox: {

                        show : true,  //工具箱显示

                        feature : {

                            mark : {show:true}, //辅助线开关

                            dataView : {show: true, readOnly: false},//刷新数据

                            magicType : {show: true, type: ['line', 'bar']},//切换图

                            restore : {show: true}, //还原

                            saveAsImage : {show: true} //保存图片

                        }

                    },

                    calculable : true,//拖拽重新计算特性

                    xAxis : [

                        {

                            type : 'category',    //类目型

                            boundaryGap : false,    //两端空白取消

                            data : ['周一','周二','周三','周四','周五','周六','周日']

                        }

                    ],

                    yAxis : [

                        {

                            type : 'value',

                            axisLabel : {

                                formatter: '{value} 人'

                            }

                        }

                    ],

                    series : [

                        {

                            name:'关注人数',

                            type:'line',

                            data:[18, 28, 15, 13, 12, 13, 21],

                            markPoint : {

                                data : [

                                    {type : 'max', name: '最大值'},

                                    {type : 'min', name: '最小值'}

                                ]

                            },

                            markLine : {

                                data : [

                                    {type : 'average', name: '平均值'}

                                ]

                            }

                        }

                    ]

                };

                // 为echarts对象加载数据

                myChart.setOption(option);

            }

        );

    </script>

</body>

ECharts注释的更多相关文章

  1. Echarts数据可视化series-scatter散点图，开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  2. Echarts数据可视化series-radar雷达图，开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  3. Echarts数据可视化series-pie饼图，开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  4. Echarts数据可视化series-map地图，开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  5. Echarts数据可视化series-line线图，开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  6. Echarts数据可视化series-heatmap热力图，开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  7. Echarts数据可视化series-graph关系图，开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  8. Echarts数据可视化series-effectscatter特效散点图，开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  9. Echarts数据可视化radar雷达坐标系，开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

随机推荐

  1. Linux 安装mysql mariadb配置

    CentOS 7.0 使用 yum 安装 MariaDB 与 MariaDB 的简单配置 1.安装MariaDB 安装命令 yum -y install mariadb mariadb-server ...

  2. vc调试不能入断点

    确保输出目录和中间目录在同一个文件夹:

  3. 洛谷P4092 [HEOI2016/TJOI2016]树 并查集/树链剖分+线段树

    正解:并查集/树链剖分+线段树 解题报告: 传送门 感觉并查集的那个方法挺妙的,,,刚好又要复习下树剖了,所以就写个题解好了QwQ 首先说下并查集的方法趴QwQ 首先离线,读入所有操作,然后dfs遍历 ...

  4. 用php的chr和ord函数实现字符串和ASCII码互转

    http://shenyongqang.blog.163.com/blog/static/22439113201002941856838/ chr和ord函数是用来字符串和ASCII码互转的. ASC ...

  5. python基础之 数据类型的补充，小数据类型

    1.id is详解 ID 在Python中,id是什么?id是内存地址,比如你利用id()内置函数去查询一个数据的内存地址: name = 'nba' print(id(name)) # 158583 ...

  6. 小程序movable-area置于顶层遮盖下方元素无法操作的解决方案

    小程序项目中有个需求,右下角按钮可以在页面中随意拖动,此时查看文档找到了一个自带的标签可以实现此功能,代码如下 <movable-area> <movable-view x=&quo ...

  7. 20189203《Linux内核原理与分析》第一周作业

    实验一 Linux 系统简介 我在这一课中主要学习了Linux是什么,Linux的产生和发展历史,Linux发展中的重要人物以及Linux和Windows在是否收费.软件与支持.安全性等方面存在的一些 ...

  8. windows下cmd无法使用telnet命令解决方法 (原)

    telnet不是内部或者外部命令,也不是可运行程序-----解决办法: (win7为例) 控制面板 --- > 程序(小图标下直接到[程序和功能]) --- >程序和功能 --- > ...

  9. Docker 推送镜像到hub.docker

    1.Docker镜像文件:lails.server.demo:1.0, 2.登录Docker:docker login[根据提示输入用户名/密码] 3.执行:docker push lails.ser ...

  10. matlab之中文字体乱码处理