keji2.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <link type="text/css" href="${contextPath}/WebPages_170421/css/keji/keji.css" rel="stylesheet">
  7. <link href="${contextPath}/WebPages_170421/css/bootstrap/bootstrap.min.css" rel="stylesheet">
  8. <script type="text/javascript" src="${contextPath}/WebPages_170421/${contextPath}/WebPages_170421/jquery.js"></script>
  9. <script src="${contextPath}/WebPages_170421/js/bootstrap.min.js"></script>
  10. <script src="${contextPath}/WebPages_170421/js/echarts.js"></script>
  11. </head>
  12. <body>
  13. <div class="head">
  14. <p class="tit">吉林省科技创新创业资源公共服务平台</p>
  15. <p class="tit1">科技数据展示</p>
  16. <p class="tit2"><a href="javascript:history.go(-1);">返回首页</a></p>
  17. </div>
  18. <div class="container">
  19. <div id="main">
  20. <script type="text/javascript">
  21. // 基于准备好的dom,初始化echarts实例
  22. var myChart = echarts.init(document.getElementById('main'));
  23. myChart.setOption({
  24. title : {
  25. text: '合同登记数据展示',
  26. top:50,
  27. left:'center',
  28. textStyle: {
  29. color: '#fff',
  30. fontSize:35
  31. },
  32. subtext: '来源:吉林省科技厅',
  33. x:'center',
  34. subtextStyle: {
  35. color: '#fff',
  36. // fontSize:20
  37. }
  38. },
  39. tooltip : {
  40. trigger: 'item',
  41. formatter: "{a} <br/>{b} : {c} ({d}%)"
  42. },
  43. legend: {
  44. orient: 'vertical',
  45. left: 'right',
  46. top:'200',
  47. itemGap:25,
  48. textStyle: {
  49. color: '#fff'
  50. },
  51. // x : 'center',
  52. // y : '650px',
  53. data: ['直接访问','联盟广告','邮件营销','直接访问','搜索引擎','直接访问1','搜索引擎2']
  54. },
  55. // 背景颜色
  56. // backgroundColor: '#434343',
  57. // 文字颜色
  58. // textStyle: {
  59. // color: 'rgba(0, 0, 255, 0.8)'
  60. // },
  61. series : [
  62. {
  63. itemStyle: {
  64. emphasis: {
  65. shadowBlur: 200,
  66. shadowColor: 'rgba(0, 0, 0, 0.5)'
  67. }
  68. // normal: {
  69. // // 阴影的大小
  70. // shadowBlur: 200,
  71. // // 阴影水平方向上的偏移
  72. // shadowOffsetX: 0,
  73. // // 阴影垂直方向上的偏移
  74. // shadowOffsetY: 0,
  75. // // 阴影颜色
  76. // shadowColor: 'rgba(255, 255, 0, 0.5)'
  77. // }
  78. },
  79. center: ['50%', '60%'],
  80. name: '访问来源',
  81. type: 'pie',
  82. radius: '65%',
  83. roseType: 'angle',
  84. data:[
  85. {value:235, name:'视频广告'},
  86. {value:274, name:'联盟广告'},
  87. {value:310, name:'邮件营销'},
  88. {value:335, name:'直接访问'},
  89. {value:300, name:'搜索引擎'},
  90. {value:335, name:'直接访问1'},
  91. {value:200, name:'搜索引擎2'}
  92. ]
  93. }
  94. ],
  95. color: [
  96. '#c23531',
  97. '#69bcf5',
  98. '#61a0a8',
  99. '#d48265',
  100. '#91c7ae',
  101. '#749f83',
  102. '#ca8622'
  103. ]
  104. })
  105. </script>
  106. </div>
  107. </div>
  108. </body>
  109. </html>