<!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. 【立体几何】Journey to Jupiter Gym - 101991J 立体几何模板

    https://cn.vjudge.net/problem/Gym-101991J 题目很长,其实就是给你一个正三角形,并且告诉你它的中点在Z轴上以及法向量,边长和顶点A的坐标(自由度已定),让你求A ...

  2. Golang覆盖写入文件的小坑

    记录一点Golang文件操作的笔记,环境:Ubuntu // 删除文件 func removeFile() { err := os.Remove("test.txt") if er ...

  3. 客户续费模型 逻辑回归 分类器 AdaBoost

    客户续费模型  逻辑回归 分类器  AdaBoost

  4. 检测到包降级: Microsoft.Extensions.Configuration.Abstractions 从 2.1.1 降 2.1.0

    解决方法:工具-nuget管理包-程序管理控制台-选择 项目- 执行 -Install-Package Microsoft.Extensions.Configuration.Abstractions ...

  5. Linux 两台服务器之间传输文件

    一.scp命令的使用 1.传输文件(不包括目录) 命令格式:scp 源文件路径目录/需要传输的文件 目标主机的用户名@目标主机IP/主机别名:目标主机存储目录 举个例子:scp /root/ceshi ...

  6. json to entity in api

    using (var client = new HttpClient()) { var WVMId = DB.Vehicles.Where(v => v.Id == new Guid(vehic ...

  7. git----------SourceTree如何连接ssh的仓库地址，这里记录的是客户端需要做的事

    1. 2. 打开命令行以后输入ssh-keygen -t rsa -C "example@example.com"  这个地方输入的是你注册gitlab所使用的邮箱.按回车,之后还 ...

  8. centos共享目录

    使用VirtualBOX自带的共享文件夹功能 运行环境:  - 宿主机:windows 10  - 虚拟机:CentOS 7(我当初是按照Ubuntu环境下的教程弄的,所以其他Linux版本也可以参考 ...

  9. sqlite数据库中为字段设置默认值为当前时间

    开始 `creation_time` NUMERIC DEFAULT (datetime('now','localtime')), `update_time` NUMERIC DEFAULT (dat ...

  10. 玩转spring boot——war部署

    前言 之前部署spring boot应用是通过直接输入命令“java -jar”来实现的.而有些情况,由于部署环境的制约,只能把项目从jar转换成war才能部署,如新浪云sae的java环境容器.那怎 ...