vue3使用echarts

首先我们需要下载

npm install echarts --save
 

下载好了之后引入

<template>
	<div class="promotion-page">
		<div class="promotion-box">
			<div class="title">
				通证估值
			</div>
			<div ref="chart" style="width: 100%; height: 400px;"></div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';

	export default {
		name: 'EChartsComponent',
		data() {
			return {
				chart: null,
			};
		},
		mounted() {
			this.chart = echarts.init(this.$refs.chart);
			this.drawChart();
		},
		methods: {
			drawChart() {
				const option = {
				  title: {
				    text: ''
				  },
				  tooltip: {
				    trigger: 'axis',
				    axisPointer: {
				      type: 'cross',
				      label: {
				        backgroundColor: '#fff'
				      }
				    }
				  },
				  legend: {
				    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
				  },
				  toolbox: {
				    feature: {
				      saveAsImage: {}
				    }
				  },
				  grid: {
				    left: '3%',
				    right: '4%',
				    bottom: '3%',
				    containLabel: true
				  },
				  xAxis: [
				    {
				      type: 'category',
				      boundaryGap: false,
				      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				    }
				  ],
				  yAxis: [
				    {
				      type: 'value'
				    }
				  ],
				  series: [
				    {
				      name: 'Email',
				      type: 'line',
				      stack: 'Total',
					  color: '#F35555',
				      areaStyle: {
				        opacity: 0.8,
				        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
				          {
				            offset: 0,
				            color: '#F35555'
				          },
				          {
				            offset: 1,
				            color: '#FFFFFF'
				          }
				        ])
				      },
				      emphasis: {
				        focus: 'series'
				      },
				      data: [120, 132, 101, 134, 90, 230, 210]
				    }
				  ]
				};
				this.chart.setOption(option);
			},
		},
	};
</script>
<style scoped lang="scss">
	.promotion-page {
		padding: 16px;

		.promotion-box {
			padding: 16px;
			min-width: 1280px;
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0px 1px 4px 1px #E5E9F2;
			border-radius: 5px 5px 5px 5px;
		}
	}
	// 盒子的标题
	.title {
		margin-bottom: 0;
		text-align: left;
		font-size: 24px;
		font-weight: 500;
		color: #31394d;
		font-weight: bold;
	}
</style>

想用什么直接去官网Apache ECharts看一下使用替换option 就可以了。