一.简介

　　参考ECharts快速入门：https://www.cnblogs.com/yszd/p/11166048.html

二.代码实现

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.     <meta charset="UTF-8">
  5.     <title>ECharts入门</title>
  6.  </head>
  7.  <body>
  8.     <!-- 为ECharts准备一个具备大小（宽高）的DOM容器-->
  9.      <div style='width:100%;height:100%'>
  10.          <div id='back' style='width:60%;height:400px;float:left;'></div>
  11.             <div id='main' style='width:40%;height:400px;float:left;'></div>
  12.             <div id='left' style='width:60%;height:400px;float:left;'></div>
  13.             <div id='right' style='width:40%;height:400px;float:left;'></div>
  14.      </div>
  15.  
  16.     <!-- 引入ECharts文件 -->
  17.     <script src='js/echarts-all.js'></script>
  18.     <script src='js/echarts-wordcloud.min.js'></script>
  19.     <script>
  20.         function createRandomItemStyle(){
  21.               return {
  22.                  normal: {
  23.                       color: 'rgb(' + [
  24.                          Math.round(Math.random() * 160),
  25.                          Math.round(Math.random() * 160),
  26.                          Math.round(Math.random() * 160)
  27.                      ].join(',') + ')'
  28.                  }
  29.              };
  30.          }
  31.          //基于准备好的DOM，初始化echarts实例
  32.          var myChart = echarts.init(document.getElementById('main'));
  33.          var myChart2 = echarts.init(document.getElementById('back'));
  34.          var myChart3 = echarts.init(document.getElementById('left'));
  35.          var myChart4 = echarts.init(document.getElementById('right'));
  36.  
  37.          /* var loadingTicket = myChart.showLoading({
  38.              text: 'loading',
  39.              color: '#4cbbff',
  40.              textColor: '#4cbbff',
  41.              maskColor: 'rgba(0, 0, 0, 0.9)',
  42.          });  */
  43.  
  44.            //指定图表的配置项和数据
  45.          option = {
  46.              title: {
  47.                  text: '文本分析算法词云'
  48.              },
  49.              tooltip:{
  50.                  trigger:'axis'
  51.                  },
  52.              toolbox: {
  53.                  show: true,
  54.                  feature:{
  55.                      mark:{show:true},
  56.                      dataView:{show:true,readOnly:false},
  57.                      magicType:{show:true,type:['line','bar']},
  58.                      restore:{show:true},
  59.                      saveAsImage:{show:true}
  60.                  }
  61.              },
  62.              series: [{
  63.                  name: '词云',
  64.                  type: 'wordCloud',
  65.                  size: ['80%', '80%'],
  66.                  textRotation : [0, 45, 90, -45],
  67.                  textPadding: 0,
  68.                  autoSize: {
  69.                      enable: true,
  70.                      minSize: 14
  71.                  },
  72.                  data:[
  73.                          {
  74.                                name: "质量",
  75.                                value: 6564,
  76.                                itemStyle: createRandomItemStyle()
  77.                          },
  78.                          {
  79.                              name: "稽查",
  80.                              value: 4181,
  81.                              itemStyle: createRandomItemStyle()
  82.                          },
  83.                          {
  84.                              name: "流程",
  85.                              value: 3386,
  86.                              itemStyle: createRandomItemStyle()
  87.                          },
  88.                          {
  89.                              name: "核实",
  90.                              value: 2655,
  91.                              itemStyle: createRandomItemStyle()
  92.                          },
  93.                          {
  94.                              name: "现场",
  95.                              value: 2467,
  96.                              itemStyle: createRandomItemStyle()
  97.                          },
  98.                          {
  99.                              name: "管理",
  100.                              value: 2244,
  101.                              itemStyle: createRandomItemStyle()
  102.                          },
  103.                          {
  104.                              name: "用户",
  105.                              value: 1898,
  106.                              itemStyle: createRandomItemStyle()
  107.                          },
  108.                          {
  109.                              name: "系统",
  110.                              value: 1484,
  111.                              itemStyle: createRandomItemStyle()
  112.                          },
  113.                          {
  114.                              name: "整改",
  115.                              value: 1112,
  116.                              itemStyle: createRandomItemStyle()
  117.                          },
  118.                          {
  119.                              name: "电力系统",
  120.                              value: 965,
  121.                              itemStyle: createRandomItemStyle()
  122.                          },
  123.                          {
  124.                              name: "河南供电局",
  125.                              value: 847,
  126.                              itemStyle: createRandomItemStyle()
  127.                          },
  128.                          {
  129.                              name: "交变电高压线路",
  130.                              value: 582,
  131.                              itemStyle: createRandomItemStyle()
  132.                          },
  133.                          {
  134.                              name: "Lewis Hamilton",
  135.                              value: 555,
  136.                              itemStyle: createRandomItemStyle()
  137.                          },
  138.                          {
  139.                              name: "KXAN",
  140.                              value: 550,
  141.                              itemStyle: createRandomItemStyle()
  142.                          },
  143.                          {
  144.                              name: "Mary Ellen Mark",
  145.                              value: 462,
  146.                              itemStyle: createRandomItemStyle()
  147.                          },
  148.                          {
  149.                              name: "Farrah Abraham",
  150.                              value: 366,
  151.                              itemStyle: createRandomItemStyle()
  152.                          },
  153.                          {
  154.                              name: "Rita Ora",
  155.                              value: 360,
  156.                              itemStyle: createRandomItemStyle()
  157.                          },
  158.                          {
  159.                              name: "Serena Williams",
  160.                              value: 282,
  161.                              itemStyle: createRandomItemStyle()
  162.                          },
  163.                          {
  164.                              name: "NCAA baseball tournament",
  165.                              value: 273,
  166.                              itemStyle: createRandomItemStyle()
  167.                          },
  168.                          {
  169.                              name: "Point Break",
  170.                              value: 265,
  171.                              itemStyle: createRandomItemStyle()
  172.                          }
  173.                      ]
  174.                  }]
  175.              };
  176.  
  177.      option2 = {
  178.              title: {
  179.                  text: '热词分布'
  180.              },
  181.              tooltip : {
  182.                  trigger: 'axis',
  183.                  axisPointer : {
  184.                      type: 'shadow'
  185.                  }
  186.              },
  187.              legend: {
  188.                  data:['稽查工单','隐患问题库','典型案例库'],
  189.                  axisLabel:{
  190.                      show:true,
  191.                      textStyle:{
  192.                          fontSize:16
  193.                      }
  194.                  }
  195.              },
  196.              toolbox: {
  197.                  show : true,
  198.                  orient : 'vertical',
  199.                  y : 'center',
  200.                  feature : {
  201.                      mark : {show: true},
  202.                      magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
  203.                      restore : {show: true},
  204.                      saveAsImage : {show: true}
  205.                  }
  206.              },
  207.              calculable : true,
  208.              xAxis : [
  209.                  {
  210.                      type : 'category',
  211.                      data : ["郑州","平顶山","商丘","洛阳","信阳","安阳","驻马店","新乡","开封","许昌","南阳","焦作","漯河","濮阳","周口","鹤壁","三门峡","济源"],
  212.                      axisLabel:{
  213.                          show:true,
  214.                          textStyle:{
  215.                              fontSize:16
  216.                          }
  217.                      }
  218.                  }
  219.              ],
  220.              yAxis : [
  221.                  {
  222.                      type : 'value',
  223.                      splitArea : {show : true},
  224.                      axisLabel:{
  225.                          show:true,
  226.                          textStyle:{
  227.                              fontSize:16
  228.                          }
  229.                      }
  230.                  }
  231.              ],
  232.              grid: {
  233.                  x2:40
  234.              },
  235.              series : [
  236.                  {
  237.                      name:'稽查工单',
  238.                      type:'bar',
  239.                      stack: '总量'
  240.                  },
  241.                  {
  242.                      name:'隐患问题库',
  243.                      type:'bar',
  244.                      stack: '总量'
  245.                  },
  246.                  {
  247.                      name:'典型案例库',
  248.                      type:'bar',
  249.                      stack: '总量',
  250.                      itemStyle:{
  251.                          normal:{
  252.                              label:{
  253.                                  show:true,
  254.                                  position:'top',
  255.                                  formatter:'{c}',
  256.                                  fontSize:16
  257.                              }
  258.                          }
  259.                      }
  260.                  }
  261.              ]
  262.          };
  263.  
  264.      option3 = {
  265.              title : {
  266.                  text: '一周内热词变化',
  267.                  subtext: '测试数据'
  268.              },
  269.              tooltip : {
  270.                  trigger: 'axis'
  271.              },
  272.              legend: {
  273.                  data:['最高热词','最低热词']
  274.              },
  275.              toolbox: {
  276.                  show : true,
  277.                  feature : {
  278.                      mark : {show: true},
  279.                      dataView : {show: true, readOnly: false},
  280.                      magicType : {show: true, type: ['line', 'bar']},
  281.                      restore : {show: true},
  282.                      saveAsImage : {show: true}
  283.                  }
  284.              },
  285.              calculable : true,
  286.              xAxis : [
  287.                  {
  288.                      type : 'category',
  289.                      boundaryGap : false,
  290.                      data : ['周一','周二','周三','周四','周五','周六','周日']
  291.                  }
  292.              ],
  293.              yAxis : [
  294.                  {
  295.                      type : 'value',
  296.                      axisLabel : {
  297.                          formatter: '{value}'
  298.                      }
  299.                  }
  300.              ],
  301.              series : [
  302.                  {
  303.                      name:'最高热词',
  304.                      type:'line',
  305.                      data:[114, 131, 125, 213, 412, 143, 310],
  306.                      markPoint : {
  307.                          data : [
  308.                              {type : 'max', name: '最大值'},
  309.                              {type : 'min', name: '最小值'}
  310.                          ]
  311.                      },
  312.                      markLine : {
  313.                          data : [
  314.                              {type : 'average', name: '平均值'}
  315.                          ]
  316.                      }
  317.                  },
  318.                  {
  319.                      name:'最低热词',
  320.                      type:'line',
  321.                      data:[114, 131, 125, 213, 412, 143, 310],
  322.                      markPoint : {
  323.                          data : [
  324.                              {name : '周最低', value : 114, xAxis: 0, yAxis: 1.5}
  325.                          ]
  326.                      },
  327.                      markLine : {
  328.                          data : [
  329.                              {type : 'average', name : '平均值'}
  330.                          ]
  331.                      }
  332.                  }
  333.              ]
  334.          };
  335.  
  336.      option4 = {
  337.              title : {
  338.                  text: '热词层级',
  339.                  subtext: '测试数据'
  340.              },
  341.              tooltip : {
  342.                  trigger: 'item',
  343.                  formatter: "{a} <br/>{b} : {c} ({d}%)"
  344.              },
  345.              legend: {
  346.                  orient : 'vertical',
  347.                  x : '0px',
  348.                  y : '60px',
  349.                  data:['直达','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
  350.              },
  351.              toolbox: {
  352.                  show : true,
  353.                  feature : {
  354.                      mark : {show: true},
  355.                      dataView : {show: true, readOnly: false},
  356.                      magicType : {
  357.                          show: true,
  358.                          type: ['pie', 'funnel']
  359.                      },
  360.                      restore : {show: true},
  361.                      saveAsImage : {show: true}
  362.                  }
  363.              },
  364.              calculable : false,
  365.              series : [
  366.                  {
  367.                      name:'访问来源',
  368.                      type:'pie',
  369.                      selectedMode: 'single',
  370.                      radius : [0, 70],
  371.  
  372.                      // for funnel
  373.                      x: '20%',
  374.                      width: '40%',
  375.                      funnelAlign: 'right',
  376.                      max: 1548,
  377.  
  378.                      itemStyle : {
  379.                          normal : {
  380.                              label : {
  381.                                  position : 'inner'
  382.                              },
  383.                              labelLine : {
  384.                                  show : false
  385.                              }
  386.                          }
  387.                      },
  388.                      data:[
  389.                          {value:335, name:'典型案例库'},
  390.                          {value:679, name:'隐患问题库'},
  391.                          {value:1548, name:'稽查工单', selected:true}
  392.                      ]
  393.                  },
  394.                  {
  395.                      name:'访问来源',
  396.                      type:'pie',
  397.                      radius : [100, 140],
  398.  
  399.                      // for funnel
  400.                      x: '60%',
  401.                      width: '35%',
  402.                      funnelAlign: 'left',
  403.                      max: 1048,
  404.  
  405.                      data:[
  406.                          {value:335, name:'直达'},
  407.                          {value:310, name:'邮件营销'},
  408.                          {value:234, name:'联盟广告'},
  409.                          {value:135, name:'视频广告'},
  410.                          {value:1048, name:'百度'},
  411.                          {value:251, name:'谷歌'},
  412.                          {value:147, name:'必应'},
  413.                          {value:102, name:'其他'}
  414.                      ]
  415.                  }
  416.              ]
  417.          };
  418.  
  419.          var series = option["series"];
  420.          var series2 = option2["series"];
  421.          var loc = 0;
  422.          var fun = function (params) {
  423.                  var data = 0;
  424.                  for(var i=0,len = series2.length;i<len;i++){
  425.                      data += series2[i].data[loc];
  426.                  }
  427.                  loc += 1;
  428.                  return data
  429.              }
  430.          //设置每种类别的值
  431.          series2[0]['data'] = [320, 332, 301, 334, 390, 330, 320, 342, 223, 123, 301, 334, 390, 330, 320, 342, 223, 123]
  432.          series2[1]['data'] = [320, 332, 301, 334, 390, 330, 320, 342, 223, 123, 301, 334, 390, 330, 320, 342, 223, 123]
  433.          series2[2]['data'] = [320, 332, 301, 334, 390, 330, 320, 342, 223, 123, 301, 334, 390, 330, 320, 342, 223, 123]
  434.  
  435.          //加载页面时候替换最后一个series的formatter
  436.          series2[series2.length-1]["itemStyle"]["normal"]["label"]["formatter"] = fun 
  437.  
  438.          //使用刚指定的配置项和数据显示图表
  439.          //clearTimeout(loadingTicket);
  440.          loadingTicket = setTimeout(function (){
  441.              //myChart.hideLoading();
  442.              myChart.setOption(option);
  443.  
  444.              //myChart2.hideLoading();
  445.              myChart2.setOption(option2);
  446.  
  447.              myChart3.setOption(option3);
  448.              myChart4.setOption(option4);
  449.          },300);
  450.  
  451.          myChart.connect(myChart2);
  452.          myChart2.connect(myChart);
  453.  
  454.          setTimeout(function (){
  455.              window.onresize = function () {
  456.                  myChart.resize();
  457.                  myChart2.resize();
  458.              }
  459.          },200)
  460.  
  461.          myChart.on('click', function (params) {
  462.              //获取随机数
  463.              var jc = Math.random();
  464.              var yh = (1 - jc) * Math.random();
  465.              var dx = (1 - jc) - yh;
  466.  
  467.              series2[0]['data'] = [parseInt(params.value * jc), 332, 301, parseInt(params.value * dx), 390, 330, 320, 342, 223, 123, 301, 334, 390, 330, 320, 342, 223, 123]
  468.              series2[1]['data'] = [parseInt(params.value * yh), 332, 301, 334, 390, 330, parseInt(params.value * jc), 342, 223, 123, 301, 334, 390, 330, 320, 342, 223, 123]
  469.              series2[2]['data'] = [parseInt(params.value * dx), 332, 301, 334, 390, 330, 320, 342, 223, 123, 301, 334, 390, 330, 320, parseInt(params.value * jc), 223, 123]
  470.  
  471.              var loc = 0;
  472.              var fun = function (params) {
  473.                      var data = 0;
  474.                      for(var i=0,len = series2.length;i<len;i++){
  475.                          data += series2[i].data[loc];// - parseInt(Math.random() * 100)
  476.                      }
  477.                      loc += 1;
  478.                      return data
  479.                  }
  480.  
  481.              //加载页面时候替换最后一个series的formatter
  482.              series2[series2.length-1]["itemStyle"]["normal"]["label"]["formatter"] = fun
  483.              myChart2.setOption(option2);
  484.          }); 
  485.  
  486.          myChart2.on('click', function (params){
  487.              series[series.length-1]['data'][0]['name'] = '资产'
  488.              series[series.length-1]['data'][0]['value'] = parseInt(Math.random() * 10000)
  489.              myChart.setOption(option);
  490.          })
  491.     </script>
  492.  </body>
  493.  </html>

三.效果

ECharts大屏可视化【词云，堆积柱状图，折线图，南丁格尔玫瑰图】的更多相关文章

  1. ECharts学习（2）--饼状图之南丁格尔图

    1.上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所 ...

  2. 基于 HTML5 的工业组态高炉炼铁 3D 大屏可视化

    前言 在大数据盛行的现在,大屏数据可视化也已经成为了一个热门的话题.大屏可视化可以运用在众多领域中,比如工业互联网.医疗.交通.工业控制等等.将各项重要指标数据以图表.各种图形等形式表现在一个页面上, ...

  3. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  4. Echarts大数据可视化物流航向省份流向迁徙动态图，开发全解+完美参数注释

    最近在研究Echarts的相关案例,毕竟现在大数据比较流行,比较了D3.js.superset等相关的图表插件,还是觉得echarts更简单上手些. 本文是以原生JS为基础,如果使用Vue.js的话, ...

  5. 【拖拽可视化大屏】全流程讲解用python的pyecharts库实现拖拽可视化大屏的背后原理，简单粗暴！

    "整篇文章较长,干货很多!建议收藏后,分章节阅读." 一.设计方案 整体设计方案思维导图: 整篇文章,也将按照这个结构来讲解. 若有重点关注部分,可点击章节目录直接跳转! 二.项目 ...

  6. Python 词云可视化

    最近看到不少公众号都有一些词云图,于是想学习一下使用Python生成可视化的词云,上B站搜索教程的时候,发现了一位UP讲的很不错,UP也给出了GitHub上的源码,是一个很不错的教程,这篇博客主要就是 ...

  7. Scrapy+eChart自动爬取生成网络安全词云

    因为工作的原因,近期笔者开始持续关注一些安全咨询网站,一来是多了解业界安全咨询提升自身安全知识,二来也是需要从各类安全网站上收集漏洞情报. 作为安全情报领域的新手,面对大量的安全咨询,多少还是会感觉无 ...

  8. flex布局构建大屏框架并支持翻页动画、滚动表格功能

      本文将利用flex属性构建大屏可视化界面.界面主要分标题栏.工具栏.数据可视化窗口.其中,翻页动画以及滚动表格功能分别分布在数据可视化界面两侧. 鼠标点击标题,可看到左侧窗口翻转动画: 整体布局效 ...

  9. vue+echarts可视化大屏,全国地图下钻,页面自适应

    之前写过一篇关于数据大屏及地图下钻的文章 https://www.cnblogs.com/weijiutao/p/13977011.html ,但是存在诸多问题,如地图边界线及行政区划老旧,无法自适应 ...

随机推荐

  1. ASP.NET Core中的运行状况检查

    由卢克·莱瑟姆和格伦Condron ASP.NET Core提供了运行状况检查中间件和库,用于报告应用程序基础结构组件的运行状况. 运行状况检查由应用程序公开为HTTP终结点.可以为各种实时监视方案配 ...

  2. odoo开发笔记 -- 提高访问安全性的一种方式

    场景描述: 最近在做项目的过程中,需要需要将odoo应用集成到其他系统中, 在对方的系统中点击我们的应用,打开对应系统,但是界面不做跳转,在当前页面打开,并且浏览器地址栏只显示IP+应用名,不让显示o ...

  3. mongo 分片机如何建立库和实例（数据表）

    mongo分片创建表和实例 第一步:首先在admin账户下: mongo 'mongodb://root:abcccSRP@s-2ze333323gggg.mongodb.rds.aliyuncs.c ...

  4. CentOS使用yum安装最新版nginx步骤

    sudo yum install yum-utilsvi  /etc/yum.repos.d/nginx.repo 输入: [nginx-stable]name=nginx stable repoba ...

  5. CSAGAN：LinesToFacePhoto: Face Photo Generation from Lines with Conditional Self-Attention Generative Adversarial Network - 1 - 论文学习

    ABSTRACT 在本文中,我们探讨了从线条生成逼真的人脸图像的任务.先前的基于条件生成对抗网络(cGANs)的方法已经证明,当条件图像和输出图像共享对齐良好的结构时,它们能够生成视觉上可信的图像.然 ...

  6. PHP计算思源字体宽度, 并把文字绘制到图片上

    2019-6-19 9:18:54 星期三 思源字体是一套开源的字体, 那字体宽度是多少呢? 测试场景, 将包含汉字, 数字, 大小写字符的一段文字写到图片中去, 但不能出现超出的情况,  这就要计算 ...

  7. Performance-Schema

    https://yq.aliyun.com/articles/640181?spm=a2c4e.11153940.0.0.347359d3DAu7sW MySQL Performance-Schema ...

  8. a dynamic resume

    介绍 发现一款开源的动画简历工程, 很是吸引眼球, 分享出来. 技术: 1. npm工程管理 2. vuejs 设计上,将工程分为两个组件: 0.程序入口组件 1. 编辑器组件 2. 简历展示组件 流 ...

  9. POI 读取Excel文件 并解析JSON数据

    package skuPrice; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundEx ...

  10. 将网页html文件离线下载保存到本地的方法

    (1)复制想要离线的网页的网址: 范例:http://bbs.xyaz.cn/thread-52540-1-1.html (2)将网址放入迅雷中,让其将html文件下载下来. (3)下载结果