源码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <title>ECharts</title>
  6.     <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
  7. </head>
  8. <body>
  9.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  10.     <div id="bar" style="width: 600px;height:400px;"></div>
  11.  
  12.     <div id="pie" style="width: 600px;height:400px;"></div>    
  13.  
  14. </body>
  15. <script type="text/javascript">
  16.         // 基于准备好的dom，初始化echarts实例
  17.         var myBarChart = echarts.init(document.getElementById('bar'));
  18.         var n1 = Math.floor(Math.random()*500+1);
  19.         var n2 = Math.floor(Math.random()*500+1);
  20.         var n3 = Math.floor(Math.random()*500+1);
  21.         var n4 = Math.floor(Math.random()*500+1);
  22.         var n5 = Math.floor(Math.random()*500+1);
  23.         var n6 = Math.floor(Math.random()*500+1);
  24.         // 指定图表的配置项和数据
  25.         var option = {
  26.             title: {
  27.                 text: 'ECharts 入门示例'
  28.             },
  29.             tooltip: {
  30.                 triggerEvent:true},
  31.             legend: {
  32.                 data:['销量',"趋势"]
  33.             },
  34.             xAxis: {
  35.                 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
  36.                 triggerEvent:true,  //可以点击x轴坐标,
  37.                 axisTick: {
  38.                     alignWithLabel: true //坐标值是否在刻度中间
  39.                 }
  40.             },
  41.             yAxis: {
  42.                 type: 'value',
  43.                 splitArea: {
  44.                     show: true
  45.                 },
  46.                 //百分比显示Y轴
  47.                 axisLabel: {
  48.                   show: true,
  49.                   interval: 'auto'
  50.                 },
  51.                 show: true,
  52.                 triggerEvent:true //可以点击y轴坐标
  53.             },
  54.             series: [{
  55.                 name: '销量',
  56.                 type: 'bar',
  57.                 data: [n1, n2, n3, n4, n5, n6],
  58.                 itemStyle: {
  59.                     normal: {
  60.                         label: {
  61.                             show: true,
  62.                             position: 'top'
  63.                         }
  64.                     }
  65.                 }
  66.             },{
  67.                 name: '趋势',
  68.                 type: 'line',
  69.                 data: [n1, n2, n3, n4, n5, n6],
  70.                 smooth:false,   //是否为曲线,默认为false
  71.                 itemStyle:{
  72.                     normal:{
  73.                         lineStyle:{
  74.                             width:1,       // 虚线的宽度
  75.                             type:'dotted'  //'dotted'虚线 'solid'实线
  76.                         }
  77.                     }
  78.                 }
  79.             }]
  80.         };
  81.         // 使用刚指定的配置项和数据显示图表。
  82.         myBarChart.setOption(option);
  83.         //方法1：https://zhuanlan.zhihu.com/p/33050579
  84.         // var ids = [55,66,85,86,55,544,5,6,8,4,88,89];
  85.       //这样就可以获取到点击柱子或者文本标签对应的id了
  86.       // myBarChart.on('click', function (params) {
  87.       //     if(params.componentType =="xAxis"){
  88.       //         alert("单击了"+params.value+"x轴标签, 你点击的是第"+(Number(params.event.target.anid.split("_")[1])+1)+"个X标签；当前对应的id为："+ids[params.event.target.anid.split("_")[1]]);
  89.       //     }else{
  90.       //         alert("单击了"+params.name+"柱状图, 你点击的是第"+(params.dataIndex+1)+"个柱状图；当前对应的id为："+ids[params.dataIndex]);   //数组下标是从0开始的哦，图也是从0开始的
  91.       //     }
  92.       // });
  93.       //方法二：https://blog.csdn.net/sophia_xiaoma/article/details/78055947
  94.       myBarChart.on('click', function (params) {
  95.         // 当componentType == "xAxis"或者 ==“yAxisx”时，取被点击时坐标轴的值params.value
  96.             alert("单击了"+params.componentType+"x轴标签"+params.value);
  97.         if(params.componentType == "xAxis"){
  98.             alert("单击了"+params.value+"x轴标签"+params.name);
  99.         }else{
  100.             alert("单击了"+params.name+"柱状图"+params.value);
  101.         }
  102.       });
  103.       //方法三：http://www.jb51.net/article/125820.htm
  104.       // myBarChart.on("click", barConsole);
  105.       // function barConsole(param) {
  106.       //   //     获取data长度
  107.       //   // 　　alert(option.series[0].data.length);
  108.       //   //      获取地N个data的值
  109.       //   　　alert(option.series[0].data[i]);
  110.       //   //     获取series中param.dataIndex事件对应的值
  111.       //   // 　　alert(option.series[param.seriesIndex].data[param.dataIndex]);
  112.       //       // alert(param.value); //与上一行等价
  113.       //   //    获取xAxis当前点击事件索引对应的值，可以用作传参了
  114.       //         // alert(option.xAxis.data[param.dataIndex]);
  115.       //   　　//param.dataIndex 获取当前点击索引，
  116.       //   // 　　alert(param.dataIndex);
  117.       //   //  当前点击事件位于series中的索引
  118.       //   //   alert(param.seriesIndex);
  119.       //   // 　　clickFunc(param.dataIndex);//执行点击效果
  120.       //   //param具体包含的参数见 https://blog.csdn.net/allenjay11/article/details/76033232
  121.  
  122.       //   //刷新页面
  123.       //   // location.reload();
  124.       //   // window.location.reload();
  125.       //       refresh();
  126.  
  127.       //   }
  128.  
  129.       //方法四：饼图添加事件示例 https://www.cnblogs.com/zhzhair-coding/p/6953982.html?utm_source=itdadao&utm_medium=referral
  130. </script>
  131.  
  132. <script type="text/javascript">
  133.     // 基于准备好的dom，初始化echarts实例
  134.     var myPieChart = echarts.init(document.getElementById('pie'));
  135.     var n1 = Math.floor(Math.random()*500+1);
  136.     var n2 = Math.floor(Math.random()*500+1);
  137.     var n3 = Math.floor(Math.random()*500+1);
  138.     var n4 = Math.floor(Math.random()*500+1);
  139.     var n5 = Math.floor(Math.random()*500+1);
  140.     // 指定图表的配置项和数据
  141.     var option = {
  142.                 "legend":{
  143.                     "orient":"vertical",
  144.                     "left":"left"
  145.                 },
  146.                 "series":[
  147.                     {
  148.                         "data":[
  149.                             {
  150.                                 "name":"直接访问",
  151.                                 "value":n1
  152.                             },
  153.                             {
  154.                                 "name":"邮件营销",
  155.                                 "value":n2
  156.                             },
  157.                             {
  158.                                 "name":"联盟广告",
  159.                                 "value":n3
  160.                             },
  161.                             {
  162.                                 "name":"视频广告",
  163.                                 "value":n4
  164.                             },
  165.                             {
  166.                                 "name":"搜索引擎",
  167.                                 "value":n5
  168.                             }
  169.                         ],
  170.                         "center":[
  171.                             "50%",
  172.                             "60%"
  173.                         ],
  174.                         "name":"访问来源",
  175.                         "itemStyle":{
  176.                             "normal":{
  177.                                 "label":{
  178.                                     "formatter":"{b}\n{c}\n{d}%",
  179.                                     "show":true
  180.                                 }
  181.                             },
  182.                             "emphasis":{
  183.                                 "shadowOffsetX":0,
  184.                                 "shadowBlur":10,
  185.                                 "shadowColor":"rgba(0, 0, 0, 0.5)"
  186.                             }
  187.                         },
  188.                         "radius":"55%",
  189.                         "type":"pie"
  190.                     }
  191.                 ],
  192.                 "tooltip":{
  193.                     "formatter":"{a} <br/>{b} : {c} ({d}%)",
  194.                     "trigger":"item"
  195.                 },
  196.                 "title":{
  197.                     "subtext":"纯属虚构",
  198.                     "x":"center",
  199.                     "text":"某站点用户访问来源"
  200.                 }
  201.             };
  202.     // 使用刚指定的配置项和数据显示图表。
  203.     myPieChart.setOption(option);
  204.  
  205.     myPieChart.on("click", pieConsole);
  206.   //方法三：http://www.jb51.net/article/125820.htm
  207.   function pieConsole(param) {
  208.     //     获取data长度
  209.     　　alert(option.series[0].data.length);
  210.     //      获取地N个data的值
  211.     // 　　alert(option.series[0].data[i]);
  212.     //     获取series中param.dataIndex事件对应的值
  213.         alert(param.value);
  214.         alert(param.name);
  215.     　  alert(option.series[param.seriesIndex].data[param.dataIndex].value);
  216.         alert(option.series[param.seriesIndex].data[param.dataIndex].name);
  217.         // 　　clickFunc(param.dataIndex);//执行点击效果,触发相应js函数
  218.     //param具体包含的方法见 https://blog.csdn.net/allenjay11/article/details/76033232
  219.  
  220.     //刷新页面
  221.     // location.reload();
  222.     // window.location.reload();
  223.     }
  224. </script>
  225.  
  226. <!--每5秒自动刷新页面-->
  227. <script type="text/javascript">
  228.     function refresh(){
  229.     // 刷新页面
  230.     // location.reload();
  231.         window.location.reload();
  232.     };
  233.  
  234.     // setInterval(refresh, 5000);//5秒钟执行一次
  235. </script>
  236. </html>

显示效果如下：

ECharts 报表事件联动系列三：柱状图，饼状图实现联动的更多相关文章

  1. Echarts 简单报表系列三：饼状图

    代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. iNeuOS工业互联平台，发布：消息管理、子用户权限管理、元件移动事件、联动控制和油表饼状图，v3.4版本

    目       录 1.      概述... 2 2.      平台演示... 2 3.      消息管理... 2 4.      子用户权限管理... 3 5.      元件移动事件... ...

  3. ECharts 报表事件联动系列四：柱状图，折线图，饼状图实现联动

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  4. D3.js系列——布局：饼状图和力导向图

    一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...

  5. JupyterLab绘制:柱状图,饼状图,直方图,散点图,折线图

    JupyterLab绘图 喜欢python的同学,可以到 https://v3u.cn/(刘悦的技术博客) 里面去看看,爬虫,数据库,flask,Django,机器学习,前端知识点,JavaScrip ...

  6. PSP 进度条 柱状图 饼状图

    9号 类别 开始时间 结束时间 间隔 净时间 燃尽图 8::00 8:20 0 20分钟 站立会议 8:20 8:50 0 30分钟 读构建之法 9:20 13:20 120分钟 120分钟 四人小组 ...

  7. ExtJS 饼状图报表

    简单的ExtJS饼状图报表. 先上源码,咱再慢慢解析: Ext.onReady(function(){ var store = Ext.create('Ext.data.JsonStore', { f ...

  8. C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计

    在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...

  9. Java-jfree报表（学习整理）----饼状图、柱状图、折线统计图

    1.使用的报表工具: jfree报表 2.下载网址: http://www.jfree.org/ 下载之后先解压:如下图 下载后:需要的jar包!如下图: 打开:找到以下的两个jar包 再导入开发项目 ...

随机推荐

  1. Python 编码规范 PEP8

    1 Introduction Guido 的核心思想是:对于代码而言,相比于写,它更多是被用来读的.这个指导旨在使Python代码更易读,且具有更强的协调性. 2 A Foolish Consiste ...

  2. 20165306学习基础和C语言基础调查

    20165306学习基础和C语言基础调查 技能学习心得 我认为兴趣.责任感.毅力对技能的获得非常重要. 因为我从小五音不全.肢体不协调,所以看春晚等节目的时候会把更多的关注点放在主持人身上.小时候觉得 ...

  3. Python 爬虫常用的库

    一.常用库 1.requests 做请求的时候用到. requests.get("url") 2.selenium 自动化会用到. 3.lxml 4.beautifulsoup 5 ...

  4. react native 第三方组件react-native-swiper 轮播组件

    github地址:https://github.com/leecade/react-native-swiper 使用方法:安装:npm i react-native-swiper –save 查看模块 ...

  5. 宠物属性控制_pet

    classIndex 职业索引 DmgAddPct 根据职业的法伤或攻强来计算宠物增加的物理伤害,增加的伤害值等于玩家法伤或攻强的百分比 SpAddPct 根据职业的法伤或攻强来计算宠物增加的法术伤害 ...

  6. config配置

    <?php /** * User: Eden * Date: 2019/3/30 * 共有内容 */ /** CREATE TABLE `tf_configs` ( `id` int(11) N ...

  7. hashtable详解

    hashtable也比称作哈希表,键值对或者关联数组 1. 先引用using System.Collections;命名空间 用于处理和表现key/value的键值对,其中key通常用来快速查找,同时 ...

  8. 能改变this各种情况下的总结，还有没有总结到的，请留言！！

    1.. 在函数参数中的,回调函数的this ,指向window 如: promise中的回调函数, 可以在方法外,转存this 2..构造函数中,this指向,实例对象  , 在全局中this是win ...

  9. 力扣（LeetCode） 104. 二叉树的最大深度

    给定一个二叉树,找出其最大深度. 二叉树的深度为根节点到最远叶子节点的最长路径上的节点数. 说明: 叶子节点是指没有子节点的节点. 示例: 给定二叉树 [3,9,20,null,null,15,7], ...

  10. Codeforces 920F - SUM and REPLACE

    920F - SUM and REPLACE 思路1: 线段树(982 ms) 每个点最多更新6次 代码: #include<bits/stdc++.h> using namespace ...