echarts点击事件调用模态框，模态框中存在echarts

首先看一下效果

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>echarts点击事件调用模态框</title><link rel="icon" href="https://raw.githubusercontent.com/qushencn/qushencn.github.io/master/img/shen.png" type="image/gif" /><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" id="echartstest"></button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content" style="width:800px;height:550px;"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h3 class="modal-title" id="myModalLabel" style="text-align:center"></h3></div><div class="modal-body" style="width:800px;"><div id="main2" style="width:800px;height:400px;"></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">提交更改</button></div></div><!-- /.modal-content --></div><!-- /.modal -->
</div><script type="text/javascript">$(function(){$("#echartstest").hide();});// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));var myChart2 = echarts.init(document.getElementById('main2'));// 指定图表的配置项和数据var option = {title: {text: ''},tooltip: {},legend: {data:['销量']},xAxis: {data: ["2013","2014","2015","2016","2017","2018"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);myChart.on('click', function (params) {$("#myModalLabel").empty();$("#myModalLabel").append(params.name);$("#myModalLabel").append("年销量情况");$('.btn-lg').click();var option2 = {title: {text: ''},tooltip: {},legend: {data:['销量']},xAxis: {data: ["1","2","3","4","5","6","7","8","9","10","11","12"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20,5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart2.setOption(option2);});</script></html>

echarts点击事件调用模态框，模态框中存在echarts相关推荐

React Echarts 点击事件
在React中用Echarts画了一个环形图,如下. 现在想要实现一个点击事件然后查询了一下Echarts的官方文档.http://www.echartsjs.com/api.html#events ...
jq 点击事件调用
1.点击事件 <i class="layui-icon layui-icon-search" id="search"></i>$('#s ...
Echarts点击事件
一. 普通点击事件只有点击折线点或柱子等相应的地方才会触发click事件 myChart.on('click', function (params) {me.clickDailyChart(para ...
《前端》ECharts 点击事件的 param参数--2021年1月7日
var myChart = echarts.init(document.getElementById("echarts")); myChart.on('click', functi ...
Vue3.0 使用 ref 判断目标 node 区域之外的点击事件（实现下拉框、弹窗关闭功能）
有时候会遇到点击目标区域绑定事件 / 展示效果,然后点击目标区域之外的地方就关闭效果 / 触发另一事件,为了实现这样的功能,我们需要通过比对 node 节点来进行判断,在下面我会使用 Vue3.0 的 ...
iostext添加点击事件_iOS实现一段文字中指定的某些文字点击有响应事件或者可以跳转(给字符串添加超链接)...
直接上需求,见如下UI图: 需求是点击中间的电话(蓝色字体部分),可以直接拨打电话.对于这种很长的一段文字中间夹着可以有点击事件的文字,可以通过下面这种方式解决: 图中所指的这段文字,不用UILabe ...
java添加按钮点击事件_如何为odoo 10中的按钮点击事件添加一个java脚本处理程序？...
我想使用java脚本为header中的按钮创建一个处理程序.下面我视图模型给出:如何为odoo 10中的按钮点击事件添加一个java脚本处理程序? inherit_id="web.asset ...
从根源上看屏幕点击事件是如何传递到View中的（上）-事件获取
浅谈曾经在开发的很长一段时间内,笔者对点击事件的认知只存在于自定义View中的onTouchEvent等方法的处理. 后来慢慢的接触到Android的事件分发机制,但也只是在Activity-> ...
vue中echarts调用接口_在vue2中使用echarts (Vue-ECharts插件）
Vue-ECharts ECharts 的 Vue.js 组件. 基于 ECharts v4.1.0 + 开发,依赖 Vue.js v2.2.6 +. 安装 npm(推荐方式) $ npm insta ...

echarts点击事件调用模态框，模态框中存在echarts

echarts点击事件调用模态框，模态框中存在echarts相关推荐

最新文章

热门文章