- <template>
- <div ref="assetEchart" class="asset_echart"></div>
- </template>
- <script setup>
- import { init } from 'echarts';
- import { reactive, ref, onMounted, onBeforeUnmount, markRaw } from 'vue';
- import createResizeObserver from '@/utils/resizeObserver'
- const assetEchart = ref()
- const chart = ref(null)
- let unobserve = null
- const props = defineProps({
- echartData: {
- type: Object,
- default: () => ({})
- }
- });
- const { echartData } = props
- const initM = () => {
- chart.value = markRaw(init(assetEchart.value))
- chart.value.setOption({
- color: ['#CA9137', '#1D72FF', '#67CC4F'],
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- textStyle: {
- color: '#D1DEEE'
- },
- data: ['资料新增数', '阅读新增数', '归档新增数']
- },
- grid: {
- top: '18%',
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- axisLabel: {
- color: '#D1DEEE',
- margin: 16
- },
- data: echartData.timeList
- },
- yAxis: {
- type: 'value',
- minInterval: 1,
- splitLine: {
- lineStyle: {
- color: '#2C323C'
- }
- }
- },
- series: [
- {
- name: '资料新增数',
- type: 'line',
- data: echartData.fileAddNums
- },
- {
- name: '阅读新增数',
- type: 'line',
- data: echartData.readAddNums
- },
- {
- name: '归档新增数',
- type: 'line',
- data: echartData.archiveAddNums
- }
- ]
- })
- }
-
- const onResize = () => {
- chart.value && chart.value.resize()
- }
-
- onMounted(() => {
- initM()
- unobserve = createResizeObserver(assetEchart.value, onResize)
- })
-
- onBeforeUnmount(() => {
- unobserve()
- })
- </script>
-
- <style lang="scss" scoped>
- .asset_echart {
- height: 100%;
- }
- </style>