【vue3】组件中使用引入echarts方法

任尔东西南北风_A

已于 2024-01-23 11:12:19 修改

阅读量253

点赞数

分类专栏： vue框架文章标签： echarts javascript vue.js

于 2023-04-04 19:34:28 首次发布

本文链接：https://blog.csdn.net/m0_67986791/article/details/129960204

版权

vue框架专栏收录该内容

6 篇文章 0 订阅

订阅专栏

index.vue代码

<template>
	<div >
	  <Chart v-if="model == 'parking' && source?.way == 'Playback'" />
	</div>
</template>
<script lang="ts" setup>
import { defineAsyncComponent } from 'vue'
const Chart = defineAsyncComponent(()=>import('@/components/Chart.vue'))

Chart.vue 代码

<template>
	<div class="parkingChart" id="chart" style="height:100%;width:90%;"></div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'

function pageInit() {
	var Chart = echarts.init(document.getElementById('chart')
	var option = ({
		title: {
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross'
			}
		},
		xAxis: {
			name: '',
			nameLocation: 'middle',
			type: 'category',
			boundaryGap: false,
			data: ['-14', '-13', '-12', '-11', '-10', '-9', '-8', '-7'],
			nameTextStyle: {
				lineHeight: 20
			}
		},
		legend: {
			data: ['FF', 'FS'],
			textStyle: {
				color: "(232, 219, 219, 1)"
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		toolbox: {
			right: 10,
			feature: {
				dataZoom: {
					yAxisIndex: 'none'
				},
				restore: {},
			}
		},
		yAxis: {
			name: '',
			nameLocation: 'middle',
			type: 'value',
			boundaryGap: false,
			nameTextStyle: {
				lineHeight: 20
			}
		},
		dataZoom: [
			{
				type: 'inside'
			}
		],
		series: [
			{
				name: 'FF',
				type: 'line',
				stack: 'Total',
				data: [120, 132, 101, 134, 90, 230, 210]
			},
			{
				name: 'FS',
				type: 'line',
				stack: 'Total',
				data: [220, 182, 191, 234, 290, 330, 310]
			}
		]
	})
	Chart.setOption(option)
}

onMounted(() => {
	pageInit()
})

折线图显示