<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

</head>

<body>

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

    <div id="main" style="height:400px"></div>

    <!-- ECharts单文件引入 -->

    <script src="js/ECharts/dist/echarts.js"></script>

    <script type="text/javascript">

        // 路径配置

        require.config({

            paths: {

                echarts: 'js/ECharts/dist'

            }

        });

        // 使用

        require(

            [

                'echarts',

                'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载

            ],

            function (ec) {

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

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

                var ecConfig = require('echarts/config');

                myChart.on(ecConfig.EVENT.CLICK, eConsole);

                var option = {

                    tooltip : {

                        trigger: 'axis'

                    },

                    legend: {

                        x:'right',

                        data:['人数']

                    },

                    calculable : true,

                    xAxis : [

                        {

                            type : 'category',

                            boundaryGap : false,

                            data : [10,20,30,40,50,60,70,80,90,100]

                        }

                    ],

                    yAxis : [

                        {

                            type : 'value',

                            axisLabel : {

                                formatter: '{value} 人'

                            }

                        }

                    ],

                    series : [

                        {

                            clickable : true,

                            name:'人数',

                            type:'line',

                            data:[1,2,3,4,5,6,7,8,9,0],

                        }

                    ]

                };

                // 为echarts对象加载数据

                myChart.setOption(option);

            }

        );

        function eConsole(param) {

            if (typeof param.seriesIndex == 'undefined') {

                return;

            }

            if (param.type == 'click') {

                alert(param.data+1);

            }

        }

    </script>

</body>

</html>

Echarts折线图点击事件的更多相关文章

  1. echarts 折线图点击高亮

    echarts中注册事件很多 ,记录下今天做的折线图点击高亮: 查了api,看了半天,发现折线图点击时只能做到圆点变大,并不能实现点击线条,整条线条高亮,也真是醉了. 上图: 如图所示,只能圆点变大. ...

  2. echarts雷达图点击事件

    最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts配置问题:https://www.douban.com/note/509404582/ <!doctype ...

  3. echarts雷达图点击事件 包含（2.x，3.85，4.02）测试

    最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts 2x 的点击事件 echarts配置问题:https://www.douban.com/note/509404 ...

  4. 实现Echarts折线图的虚实转换

    需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...

  5. echarts折线图动态改变数据时的一个bug

    echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http ...

  6. d3.js 教程 模仿echarts折线图

    今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...

  7. ECharts折线图堆叠设置为不堆叠的方法

    下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...

  8. echarts折线图，数据切换时（最近七天）绘图不合理现象

    echarts折线图,当进行数据切换时存在绘制不合理的问题,数据没错,但绘制不对. 两个0之间的连线应该是平滑直线,如图: 正确的显示: 解决: 在myCharts.setOption(option) ...

  9. vue使用axios读取本地json文件来显示echarts折线图

    编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examp ...

随机推荐

  1. Java正则表达式教程及示例

    本文由 ImportNew - ImportNew读者 翻译自 journaldev.欢迎加入翻译小组.转载请见文末要求. [感谢 @CuGBabyBeaR  的热心翻译.如果其他朋友也有不错的原创或 ...

  2. MAPI错误0x80040107

    MAPI错误0x80040107  的解决方案: The MAPI error means there's an "invalid entry" within the contac ...

  3. B. Random Teams(Codeforces Round 273)

    B. Random Teams time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  4. Arcgis ArcMap 10 如何生成msd地图文档定义【 arcgis mxd怎么转换成msd】

    .mxd是arcgis 的地图文档后缀名. .msd是arcgis 的地图服务定义文件,是 map service definition 的缩写. 基于 MSD 的服务支持 Maplex.制图表达和新 ...

  5. 京东的Netty实践，京麦TCP网关长连接容器架构

    背景 早期京麦搭建 HTTP 和 TCP 长连接功能主要用于消息通知的推送,并未应用于 API 网关.随着逐步对 NIO 的深入学习和对 Netty 框架的了解,以及对系统通信稳定能力越来越高的要求, ...

  6. C++11 std::unique_lock与std::lock_guard区别及多线程应用实例

    C++多线程编程中通常会对共享的数据进行写保护,以防止多线程在对共享数据成员进行读写时造成资源争抢导致程序出现未定义的行为.通常的做法是在修改共享数据成员的时候进行加锁--mutex.在使用锁的时候通 ...

  7. 深度学习Github排名，很不错的介绍

    今天看到这篇文章,把深度学习github排名靠前的项目,介绍了一下,很不错: https://blog.csdn.net/yH0VLDe8VG8ep9VGe/article/details/81611 ...

  8. Service 简介 启动方式 生命周期 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  9. Html单引号，双引号转义

    &apos;是单引号的转义符,"是双引号的转义符

  10. Android -- Property Animation

    3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中又引入了一个新的动画系统:property animation,这三 ...