原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
Echarts示例（柱状图） YouTube数据集的柱状图示例 * PPT课件 用柱状图可视化不同类型视频分布的代码如下： 1. !DOCTYPE html 2. html lang=en 3. head 4. meta charset=UTF-8 5. titleYouTube数据集条形图示例/title 6. style type=text/css 7. #a{ 8. width: 800px; 9. height: 400px; 10. background: #ccc; 11. } 12. /style 13. /head 14. body 15. div id=a/div 16. button点击查看YouTube数据集柱状图/button 17. //JS文件引入 18. script type=text/javascript src=/javascripts/ajax-1.0.js/script 19. script type=text/javascript src=/javascripts/echarts.js/script 20. script type=text/javascript 21. //初始化操作 22. var myChart = echarts.init(document.getElementById(a)); 23. var btn = document.querySelector(button); 24. //以单击按钮响应函数展现页面 25. btn.onclick = function(){ 26. //通过Ajax请求数据: 27. Ajax(JSON).get(/show-data,function(data){ 28. //数组声明用于接收数据: 29. //d1接收视频类型 30. var d1 = []; 31. //d2接收上传数量 32. var d2 = []; 33. //接收数据存放在d1中: 34. for(var a=0;adata.length;a++){ 35. d1.push( 36. data[a].type 37. ); 38. } 39. //接收数据存放在d2中: 40. for(var a=0;adata.length;a++){ 41. d2.push( 42. data[a].times 43. ); 44. } 45. //指定图表配置项和相关数据 46. var option = { 47. //标题 48. title: { 49. text: 使用YouTube数据集 50. }, 51. //提示框 52. tooltip: {}, 53. //图例 54. legend: { 55. data:[各类型视频上传数量] 56. }, 57. xAxis:{ 58. data:d1, 59. axisLabel:{ Echarts示例（柱状图） * PPT课件 60. interval:0, 61. //数据名称过长采用rotate将数据类型名以其数值角度倾斜 62. rotate:-20, 63. } 64. }, 65. yAxis: {}, 66. series: [{ 67. name: 各类型视频上传数量, 68.
文档评论（0）