section.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <template>
  2. <hc-card title="章节完成投资柱状图">
  3. <template #extra>
  4. <div class="w-40">
  5. <el-select v-model="searchForm.key1" filterable block placeholder="选择工区">
  6. <el-option label="一工区" value="1" />
  7. <el-option label="二工区" value="1" />
  8. </el-select>
  9. </div>
  10. </template>
  11. <hc-charts :option="chartsOption" />
  12. </hc-card>
  13. </template>
  14. <script setup>
  15. import { ref } from 'vue'
  16. defineOptions({
  17. name: 'PeriodsLedgersSection',
  18. })
  19. //搜索表单
  20. const searchForm = ref({
  21. key1: null,
  22. })
  23. const chartsOption = ref({
  24. color: ['#99CC98', '#FF999A'],
  25. legend: {},
  26. tooltip: {},
  27. grid: {
  28. top: '50px',
  29. left: '0',
  30. right: '6px',
  31. bottom: '0',
  32. containLabel: true,
  33. },
  34. dataset: {
  35. source: [
  36. ['product', '变更后金额', '累计计量金额'],
  37. ['100章', 43.3, 85.8],
  38. ['200章', 83.1, 73.4],
  39. ['300章', 86.4, 65.2],
  40. ],
  41. },
  42. xAxis: { type: 'category' },
  43. yAxis: {},
  44. series: [{ type: 'bar' }, { type: 'bar' }],
  45. })
  46. </script>
  47. <style scoped lang="scss">
  48. </style>