echarts点击事件调用模态框，模态框中存在echarts
生活随笔
收集整理的這篇文章主要介紹了
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">×</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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： springboot+sockjs进行消
- 下一篇： 轻松查看连接人数-如何查路由器连接人数