crop_chart_c.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <template>
  2. <div class="crop_chart_c">
  3. <div id="crop_chart_c" style="width: 100%;height:400px;"></div>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: "crop_chart_c",
  9. props: {},
  10. data() {
  11. return {};
  12. },
  13. created() {},
  14. mounted() {
  15. this.drawChart();
  16. },
  17. methods: {
  18. drawChart() {
  19. // 基于准备好的dom,初始化echarts实例
  20. let myChart = this.$echarts.init(
  21. document.getElementById("crop_chart_c")
  22. );
  23. // 指定图表的配置项和数据
  24. let option = {
  25. title: {
  26. text: "未来保育猪数量预测",
  27. left: "center",
  28. bottom: 5
  29. },
  30. color: ["#3398DB"],
  31. tooltip: {
  32. trigger: "axis",
  33. axisPointer: {
  34. // 坐标轴指示器,坐标轴触发有效
  35. type: "line" // 默认为直线,可选为:'line' | 'shadow'
  36. }
  37. },
  38. toolbox: {
  39. show: true,
  40. feature: {
  41. dataView: { show: true, readOnly: true },
  42. magicType: { show: true, type: ["line", "bar"] },
  43. restore: { show: true },
  44. saveAsImage: { show: true }
  45. }
  46. },
  47. grid: {
  48. left: "10%",
  49. right: "10%",
  50. bottom: "13%",
  51. containLabel: true
  52. },
  53. xAxis: [
  54. {
  55. type: "category",
  56. data: [
  57. "七月",
  58. "八月",
  59. "九月",
  60. "十月",
  61. "十一月",
  62. "十二月"
  63. ],
  64. axisTick: {
  65. alignWithLabel: true
  66. }
  67. }
  68. ],
  69. yAxis: [
  70. {
  71. type: "value"
  72. }
  73. ],
  74. series: [
  75. {
  76. name: "数量",
  77. type: "bar",
  78. barWidth: "50%",
  79. data: [355, 200, 422, 390, 330, 220],
  80. encode: {
  81. // Map the "amount" column to X axis.
  82. x: "amount",
  83. // Map the "product" column to Y axis
  84. y: "product"
  85. },
  86. markPoint: {
  87. data: [
  88. { type: "max", name: "最大值" },
  89. { type: "min", name: "最小值" }
  90. ]
  91. },
  92. markLine: {
  93. data: [{ type: "average", name: "平均值" }]
  94. }
  95. }
  96. ]
  97. };
  98. // 使用刚指定的配置项和数据显示图表。
  99. myChart.setOption(option);
  100. }
  101. }
  102. };
  103. </script>
  104. <style lang="scss" scoped>
  105. </style>