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')

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

<div id="myChart" :style="{ width: '300px', height: '300px' }"></div>
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 {
				
			}
		},
	}

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值