vue3，echarts图表的使用

首先是先引入echarts图表

第一步： 安装

npm install echarts --save

在main.js引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import * as echarts from 'echarts' 

const app = createApp(App)
// 全局方法
app.config.globalProperties.$echarts = echarts
app.use(router).use(store)
app.config.globalProperties.$axios = axios
app.mount('#app')

第二步： 使用
这里目前使用的是全局引用，没有去做按需导入，另外，引用的时候只需要在需要图表的组件中引用即可。

 

import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance,
	} from 'vue'

	export default {
		setup() {
			onMounted(() => {
				options();
			})
			const { proxy } = getCurrentInstance()

			const options = () => {
				var add = [3, 1, 2, 0, -2, 2, 0]
				
				var myChart = proxy.$echarts.init(document.getElementById('myChart '));
				if (myChart != null && myChart != "" && myChart != undefined) {
					myChart.dispose(); //销毁
				}
				var myChart = proxy.$echarts.init(document.getElementById('myChart '))
				var option = {
					grid: {        //离容器上下左右的距离
						left: "10%",
						top: "20%",
						right: "5%",
						bottom: "15%"
					},
					xAxis: {
						data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00'],
						axisLabel: { //修改坐标系字体颜色
							show: true,
							textStyle: {
								color: "#ffffff"
							}
						},
					},
					yAxis: {
						name: "单位 : 米",
						nameTextStyle: {    //name字体颜色
							color: "rgba(255, 255, 255, 1.0)"
						},
						type: 'value',
						axisLabel: { //修改坐标系字体颜色
							show: true,
							textStyle: {
								color: "#ffffff"
							}
						},
					},
					series: [{
						smooth: true,    //曲线
						type: 'line',    //折线
						data: add,
						lineStyle: {
							color: "rgba(132, 0, 255, 1.0)"
						}
					}, ],
				}
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option)
			}

			return {
				
			}
		},
	}