Echarts柱状图3d立体效果

被窝是圆的

已于 2022-06-27 14:11:35 修改

阅读量3.8k

点赞数 2

文章标签： echarts

于 2022-06-27 14:08:06 首次发布

本文链接：https://blog.csdn.net/m0_61169066/article/details/125482672

版权

import * as echarts from "echarts";//引用echarts
import { onMounted } from "vue";//引入方法onMounted 
import * as service from "./request/request";//接口方法

	onMounted(async () => {//一进来就调用一遍这个方法
		temData();
	});

const temData = async () => {
		//年月日
		let data = {
			startingTime: SearchFrom.value.startingTime,
			endTime: SearchFrom.value.endTime,
			unit: SearchFrom.value.unit,
			status: tab.value,
		};
		const res = await service.ljfsWeight(data);
		xdata.value = res.data.time;
		y1data.value = res.data.grossWeight; //毛重
		y2data.value = res.data.tare; //皮重
		y3data.value = res.data.netWeight; //净重
		let xdaaaata = [45, 45, 45, 0, 80, 78, 14, 7, 19, 23, 15, 10];
		var chartDom = document.getElementById("main");
		var myChart = echarts.init(chartDom);
		var option;
		option = {
			tooltip: {
				trigger: "axis",
				confine: true,
				axisPointer: { type: "none" },
				textStyle: { fontSize: 12, fontWeight: 500 },
				formatter(params) {
					// 只展示柱子对应的内容，把顶部底部的 tooltip 过滤掉
					return params.reduce((pre, i) => {
						if (i.componentSubType === "bar") {
							i.marker = i.marker.replace(/[object Object]/, i.color.colorStops[1].color);
							i.value = `<span style="flex: 1; text-ali