Vue项目中使用Echarts 柱形图应用解析

最近在做一个可视化项目（vue+echarts+three.js），其中有六个echarts图表需求，所以在完成项目之后，将图表应用的一些基础参数记录，方便以后复用！提高开发效率。

HTML

<div id="windFarmWarning" style="width: 100%; height: 260px"></div>

JavaScript

<script>
import echarts from "echarts";
import {
    getLifeData } from "../../api/api.js";

export default {
   
    data() {
   
        return:{
   
            warnChartlist: []
        }
    },
    methods: {
   
        async getWarningChartHandle(wf) {
   
            const res = await getWarningChart({
    wf: wf })
            this.warnChartlist = res.data;
            // 生成图表
            this.windFarmWarningHandle();
        },
        windFarmWarningHandle() {
   
            const yMax = 500; // 图表y轴数值
            const data = []; // 主要数据
            const dataAxis = []; // x轴类别数据

            for (let i = 0; i < this.warnChartlist.length; i++) {
   
                data.push