aria-line-bar.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <script src="lib/esl.js"></script>
  5. <script src="lib/config.js"></script>
  6. <script src="lib/jquery.min.js"></script>
  7. <script src="lib/facePrint.js"></script>
  8. <script src="lib/testHelper.js"></script>
  9. <meta name="viewport" content="width=device-width, initial-scale=1" />
  10. </head>
  11. <body>
  12. <style>
  13. h1 {
  14. line-height: 60px;
  15. height: 60px;
  16. background: #146402;
  17. text-align: center;
  18. font-weight: bold;
  19. color: #eee;
  20. font-size: 14px;
  21. }
  22. .chart {
  23. height: 600px;
  24. }
  25. </style>
  26. <div id="main" class="chart"></div>
  27. <script>
  28. require(
  29. (testHelper.hasURLParam('en')
  30. ? [
  31. 'echarts',
  32. // 'echarts/lang/en',
  33. ]
  34. : [
  35. 'echarts'
  36. ]
  37. ).concat(
  38. [
  39. // 'echarts/chart/bar',
  40. // 'echarts/chart/line',
  41. // 'echarts/component/legend',
  42. // 'echarts/component/graphic',
  43. // 'echarts/component/grid',
  44. // 'echarts/component/tooltip',
  45. // 'echarts/component/brush',
  46. // 'echarts/component/toolbox',
  47. // 'echarts/component/title',
  48. // 'zrender/vml/vml'
  49. ]
  50. ),
  51. function (echarts) {
  52. var chart = echarts.init(document.getElementById('main'));
  53. chart.setOption({
  54. aria: {
  55. show: true,
  56. series: {
  57. multiple: {
  58. prefix: '{seriesCount}个图表系列组成了该图表。'
  59. }
  60. }
  61. },
  62. tooltip : {
  63. trigger: 'axis',
  64. axisPointer : { // 坐标轴指示器,坐标轴触发有效
  65. type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  66. }
  67. },
  68. legend: {
  69. data:['热度', '正面', '负面']
  70. },
  71. grid: {
  72. left: '3%',
  73. right: '4%',
  74. bottom: '3%',
  75. containLabel: true
  76. },
  77. xAxis : [
  78. {
  79. type : 'value'
  80. }
  81. ],
  82. yAxis : [
  83. {
  84. type : 'category',
  85. axisTick : {show: false},
  86. data : ['汽车之家','今日头条','百度贴吧','一点资讯','微信','微博','知乎']
  87. }
  88. ],
  89. series : [
  90. {
  91. name:'热度',
  92. type:'bar',
  93. label: {
  94. normal: {
  95. show: true,
  96. position: 'inside'
  97. }
  98. },
  99. data:[300, 270, 340, 344, 300, 320, 310]
  100. },
  101. {
  102. name:'正面',
  103. type:'bar',
  104. stack: '总量',
  105. label: {
  106. normal: {
  107. show: true
  108. }
  109. },
  110. data:[120, 102, 141, 174, 190, 250, 220]
  111. },
  112. {
  113. name:'负面',
  114. type:'bar',
  115. stack: '总量',
  116. label: {
  117. normal: {
  118. show: true,
  119. position: 'left'
  120. }
  121. },
  122. data:[-20, -32, -21, -34, -90, -130, -110]
  123. }
  124. ]
  125. });
  126. window.onresize = chart.resize;
  127. }
  128. );
  129. </script>
  130. </body>
  131. </html>