Newer
Older
KaiFengPC / src / views / document / thematicMap / echart / center / top.vue
@zhangdeliang zhangdeliang on 23 May 1 KB 初始化项目
  1. <template>
  2. <div ref="assetEchart" class="asset_echart"></div>
  3. </template>
  4. <script setup>
  5. import { init } from 'echarts';
  6. import { reactive, ref, onMounted, onBeforeUnmount, markRaw } from 'vue';
  7. import createResizeObserver from '@/utils/resizeObserver'
  8. const assetEchart = ref()
  9. const chart = ref(null)
  10. let unobserve = null
  11. const props = defineProps({
  12. echartData: {
  13. type: Object,
  14. default: () => ({})
  15. }
  16. });
  17. const { echartData } = props
  18. const initM = () => {
  19. chart.value = markRaw(init(assetEchart.value))
  20. chart.value.setOption({
  21. color: ['#CA9137', '#1D72FF', '#67CC4F'],
  22. tooltip: {
  23. trigger: 'axis'
  24. },
  25. legend: {
  26. textStyle: {
  27. color: '#D1DEEE'
  28. },
  29. data: ['资料新增数', '阅读新增数', '归档新增数']
  30. },
  31. grid: {
  32. top: '18%',
  33. left: '3%',
  34. right: '4%',
  35. bottom: '3%',
  36. containLabel: true
  37. },
  38. xAxis: {
  39. type: 'category',
  40. boundaryGap: false,
  41. axisLabel: {
  42. color: '#D1DEEE',
  43. margin: 16
  44. },
  45. data: echartData.timeList
  46. },
  47. yAxis: {
  48. type: 'value',
  49. minInterval: 1,
  50. splitLine: {
  51. lineStyle: {
  52. color: '#2C323C'
  53. }
  54. }
  55. },
  56. series: [
  57. {
  58. name: '资料新增数',
  59. type: 'line',
  60. data: echartData.fileAddNums
  61. },
  62. {
  63. name: '阅读新增数',
  64. type: 'line',
  65. data: echartData.readAddNums
  66. },
  67. {
  68. name: '归档新增数',
  69. type: 'line',
  70. data: echartData.archiveAddNums
  71. }
  72. ]
  73. })
  74. }
  75.  
  76. const onResize = () => {
  77. chart.value && chart.value.resize()
  78. }
  79.  
  80. onMounted(() => {
  81. initM()
  82. unobserve = createResizeObserver(assetEchart.value, onResize)
  83. })
  84.  
  85. onBeforeUnmount(() => {
  86. unobserve()
  87. })
  88. </script>
  89.  
  90. <style lang="scss" scoped>
  91. .asset_echart {
  92. height: 100%;
  93. }
  94. </style>