vue3 使用echarts

效果

先安装 echarts

pnpm install echarts --save

页面引入

<script setup lang="ts">
import { ref, onMounted,reactive } from "vue"
import * as echarts from "echarts"
import CustomTabs from "@/components/common/customTabs.vue"

const tabsData = ref([
	{
		key: "1",
		value: "按天",
	},
	{
		key: "2",
		value: "按月",
	},
	{
		key: "3",
		value: "按年",
	},
])
const dayTime = ref("")
let chartXdata = ref(["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00", "24:00"])
const type = ref<any>("time")
const formRef = ref()
const formState = reactive({
	checkPass: "",
	value: "1",
	paymethod: "",
})

const rules = {
	checkPass: [{ required: true, message: "请输入", trigger: "change" }],
	value: [{ required: true, message: "请选择", trigger: "change" }],
	paymethod: [{ required: true, message: "请选择", trigger: "change" }],
}

let myEcharts = echarts

const initChart = (xAxisdata) => {
	let chart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion")
	chart.setOption({
		xAxis: {
			type: "category",
			data: xAxisdata.value,
		},
		tooltip: {
			trigger: "axis",
		},
		yAxis: {
			axisLine: {
				show: false,
			},
			axisTick: {
				show: false,
			},
			axisLabel: {
				show: false,
			},
		},

		series: [
			{
				data: [606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737],
				type: "line",
				smooth: true,
				itemStyle: {
					normal: {
						label: {
							show: true,
							position: "top",
							formatter: "{c}",
						},
					},
				},
			},
		],
	})
	window.onresize = function () {
		chart.resize()
	}
}
const getDates = (date) => {
	let dataArr = []
	let time = new Date(date) // date为合法时间，也可为空；
	let year = time.getFullYear()
	let month = time.getMonth() + 1 // js中月份从0开始
	let dates = new Date(year, month, 0).getDate() // 返回当月最后一天既当月共多少天
	if (dates === 28) {
		dataArr=["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28"]
	}
	if (dates === 29) {
		dataArr=["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29"]
	}
	if (dates === 30) {
		dataArr=["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30"]
	}
	if (dates === 31) {
		dataArr=["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31"]
	}
	return dataArr
}
const handleTabs = (val: any) => {
	if (val === "1") {
		chartXdata.value = [
			"00:00",
			"02:00",
			"04:00",
			"06:00",
			"08:00",
			"10:00",
			"12:00",
			"14:00",
			"16:00",
			"18:00",
			"20:00",
			"22:00",
			"24:00",
		]
		type.value = "time"
	}
	if (val === "2") {
		const date = new Date();
		const currentMonth = date.getMonth() + 1;
		chartXdata.value = getDates(currentMonth)
		type.value = ""
	}
	if (val === "3") {
		chartXdata.value = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
		type.value = "month"
	}
	console.log(val, chartXdata, "chartXdata")

	initChart(chartXdata)
}

onMounted(() => {
	initChart(chartXdata)
})
</script>

	<div class="echarts-box">
			<div id="myEcharts" :style="{ width: '100%', height: '300px' }"></div>
		</div>