经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Echarts » 查看文章
vue echarts实现柱状图动态展示
来源:jb51  时间:2021/9/6 10:18:04  对本文有异议

本文实例为大家分享了vue echarts实现柱状图动态展示的具体代码,供大家参考,具体内容如下

轮播图形式展现

  1. <template>
  2. <div class="dan">
  3. <div id="scalesize" :style="{width: '100%', height: '100%'}"></div>
  4. </div>
  5. </template>
  6. <script>
  7. import echarts from "echarts";
  8. export default {
  9. data() {
  10. return {
  11. texts: 111
  12. };
  13. },
  14. mounted() {
  15. this.drawLine();
  16. },
  17. methods: {
  18. drawLine() {
  19. // 基于准备好的dom,初始化echarts实例
  20. let myChart = this.$echarts.init(document.getElementById("scalesize"));
  21. var fanfa = [
  22. {
  23. name: "育苗基地",
  24. type: "bar",
  25. barWidth: "15%",
  26. itemStyle: {
  27. normal: {
  28. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  29. {
  30. offset: 0,
  31. color: "#fccb05"
  32. },
  33. {
  34. offset: 1,
  35. color: "#f5804d"
  36. }
  37. ]),
  38. barBorderRadius: 12
  39. }
  40. },
  41. data: [100, 120, 160, 180, 220, 400]
  42. },
  43. {
  44. name: "种植基地",
  45. type: "bar",
  46. barWidth: "15%",
  47. itemStyle: {
  48. normal: {
  49. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  50. {
  51. offset: 0,
  52. color: "#8bd46e"
  53. },
  54. {
  55. offset: 1,
  56. color: "#09bcb7"
  57. }
  58. ]),
  59. barBorderRadius: 11
  60. }
  61. },
  62. data: [270, 320, 420, 650, 821,907]
  63. },
  64. {
  65. name: "托管面积",
  66. type: "bar",
  67. barWidth: "15%",
  68. itemStyle: {
  69. normal: {
  70. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  71. {
  72. offset: 0,
  73. color: "#248ff7"
  74. },
  75. {
  76. offset: 1,
  77. color: "#6851f1"
  78. }
  79. ]),
  80. barBorderRadius: 11
  81. }
  82. },
  83. data: [140, 180, 215, 320, 396, 520]
  84. },
  85. {
  86. name: "联建基地",
  87. type: "bar",
  88. barWidth: "15%",
  89. itemStyle: {
  90. normal: {
  91. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  92. {
  93. offset: 0,
  94. color: "#B88080"
  95. },
  96. {
  97. offset: 1,
  98. color: "#983A3A"
  99. }
  100. ]),
  101. barBorderRadius: 11
  102. }
  103. },
  104. data: [140, 180, 215, 320, 396, 420]
  105. }
  106. ];
  107. myChart.setOption({
  108. tooltip: {
  109. trigger: "axis",
  110. axisPointer: {
  111. // 坐标轴指示器,坐标轴触发有效
  112. type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
  113. }
  114. },
  115. grid: {
  116. left: "2%",
  117. right: "4%",
  118. bottom: "14%",
  119. top: "16%",
  120. containLabel: true
  121. },
  122. legend: {
  123. data: ["育苗基地", "种植基地", "托管面积", "联建基地"],
  124. right: 10,
  125. top: 12,
  126. textStyle: {
  127. color: "#fff"
  128. },
  129. itemWidth: 12,
  130. itemHeight: 10
  131. // itemGap: 35
  132. },
  133. xAxis: {
  134. type: "category",
  135. data: [
  136. "2014",
  137. "2015",
  138. "2016",
  139. "2017",
  140. "2018",
  141. "2019"
  142. ],
  143. axisLine: {
  144. lineStyle: {
  145. color: "white"
  146. }
  147. },
  148. axisLabel: {
  149. // interval: 0,
  150. // rotate: 40,
  151. textStyle: {
  152. fontFamily: "Microsoft YaHei"
  153. }
  154. }
  155. },
  156. yAxis: {
  157. type: "value",
  158. axisLine: {
  159. show: false,
  160. lineStyle: {
  161. color: "white"
  162. }
  163. },
  164. splitLine: {
  165. show: true,
  166. lineStyle: {
  167. color: "rgba(255,255,255,0.3)"
  168. }
  169. },
  170. axisLabel: {}
  171. },
  172. dataZoom: [
  173. {
  174. show: true,
  175. height: 12,
  176. xAxisIndex: [0],
  177. bottom: "8%",
  178. handleIcon:
  179. "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
  180. handleSize: "110%",
  181. handleStyle: {
  182. color: "#d3dee5"
  183. },
  184. textStyle: {
  185. color: "#fff"
  186. },
  187. borderColor: "#90979c"
  188. },
  189. {
  190. type: "inside",
  191. show: true,
  192. height: 15,
  193. start: 1,
  194. end: 35
  195. }
  196. ],
  197. series: fanfa
  198. });
  199. let app = {
  200. currentIndex: -1
  201. };
  202. setInterval(function() {
  203. let dataLen = fanfa[1].data.length;
  204. // 取消之前高亮的图形
  205. myChart.dispatchAction({
  206. type: "downplay",
  207. seriesIndex: 0,
  208. dataIndex: app.currentIndex
  209. });
  210. app.currentIndex = (app.currentIndex + 1) % dataLen;
  211. //console.log(app.currentIndex);
  212. // 高亮当前图形
  213. myChart.dispatchAction({
  214. type: "highlight",
  215. seriesIndex: 0,
  216. dataIndex: app.currentIndex
  217. });
  218. // 显示 tooltip
  219. myChart.dispatchAction({
  220. type: "showTip",
  221. seriesIndex: 0,
  222. dataIndex: app.currentIndex
  223. });
  224. }, 1000);
  225. window.onresize = myChart.resize;
  226. }
  227. }
  228. };
  229. </script>
  230. <style lang="less" scoped>
  231. .dan {
  232. height: 90%;
  233. }
  234. </style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号