<!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. Asp.Net 拦截请求自定义处理

    需求: 在Aps.Net 应用中,对于浏览器请求的部分url的地址自定义处理,不交给路由系统或页面. 解决方案: 在全局文件Global.asax中 ,提供Application_BeginReque ...

  2. 隐马尔可夫(HMM)、前/后向算法、Viterbi算法

    HMM的模型  图1 如上图所示,白色那一行描述由一个隐藏的马尔科夫链生成不可观测的状态随机序列,蓝紫色那一行是各个状态生成可观测的随机序列 话说,上面也是个贝叶斯网络,而贝叶斯网络中有这么一种,如下 ...

  3. 数学图形(1.47)贝塞尔(Bézier)曲线

    贝塞尔曲线又称贝兹曲线或贝济埃曲线,是由法国数学家Pierre Bézier所发现,由此为计算机矢量图形学奠定了基础.它的主要意义在于无论是直线或曲线都能在数学上予以描述. 上一节讲的是高次方程曲线, ...

  4. Go语言之进阶篇Socket编程

    一.Socket编程 1.什么是Socket Socket起源于Unix,而Unix基本哲学之一就是“一切皆文件”,都可以用“打开open –> 读写write/read –> 关闭clo ...

  5. C++ 学习路线和看法

    C++ 学习路线和看法 原文地址:http://shundacao.blog.163.com/blog/static/1340404812010101982751101/     C++大体分为C++ ...

  6. 【Spark】SparkStreaming-Kafka-Redis-集成-基础参考资料

    SparkStreaming-Kafka-Redis-集成-基础参考资料 Overview - Spark 2.2.0 Documentation Spark Streaming + Kafka In ...

  7. 机器学习中的损失函数 （着重比较：hinge loss vs softmax loss）

    https://blog.csdn.net/u010976453/article/details/78488279 1. 损失函数 损失函数(Loss function)是用来估量你模型的预测值 f( ...

  8. 平均值(Mean)、方差(Variance)、标准差(Standard Deviation) （转）

    http://blog.csdn.net/xidiancoder/article/details/71341345 平均值 平均值的概念很简单:所有数据之和除以数据点的个数,以此表示数据集的平均大小: ...

  9. 微信小程序通过api接口将json数据展现到小程序示例

    这篇文章主要介绍了微信小程序通过api接口将json数据展现到小程序示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧实现知乎客户端的一个重要知识前提就是,要知道怎么通过 ...

  10. 向windows添加环境变量

    以NASM为例,软件安装完毕后,启动Windows操作系统的命令窗口,在安装目录(比如C:\Program Files\NASM)下运行nasm是ok的,但是在其他任意目录下运行nasm就会报错. 这 ...