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(this.warnChartlist[i].warningCount);
                dataAxis.push(this.warnChartlist[i].model_name);
            }
            const showed = this.warnChartlist.length ? false : true; // 没有数据的时候显示暂无数据的title
            const option = {
                title: {
                    show: showed, // 是否显示title
                    text: '暂无数据',
                    left: 'center',
                    top: 'center',
                    textStyle: {
                        color: '#c6c0dc',
                        fontSize: 14
                    }
                },
                // 鼠标移入图表数据上的信息提示
                tooltip: {
                    // 提示框浮层的移动动画过渡时间。一般设置为0 不然鼠标首次移入图表会出现滚动条闪动
                    transitionDuration: 0,
                    // 提示触发类型：值为axis时 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
                    trigger: "axis", 
                    // 鼠标移入图表的信息提示数据，params[0]表示series中的第一个对象数据。
                    formatter: function(params, t, c) {
                        const result = params[0].name + '：' + params[0].data + '次';
                        return result
                    }
                },
                // 直角坐标系的位置和大小设置
                grid: {
                    height: '70%',
                    left: '10%',
                    top: 'middle'
                },
                // x轴设置
                xAxis: {
                    type:'category', // 类目轴，最常用;也可以是value等，具体可见官方文档
                    name: '模型统计次数', // 坐标轴名称
                    nameGap: 10, // 坐标轴名称与轴线之间的距离。
                    nameLocation: 'center', // 坐标轴名称显示位置
                    nameTextStyle: { // 坐标轴名称的文字样式。可设置的样式有很多，具体可见官方文档
                        color: '#c6c0dc'
                    },
                    data: dataAxis, // x轴类目数据
                    // 坐标轴标签文字设置
                    axisLabel: {
                        show: false
                    },
                    // 坐标轴刻度相关设置。
                    axisTick: {
                        show: false
                    },
                    // 坐标轴轴线相关设置。
                    axisLine: {
                        show: true,
                        // 轴线宽度颜色等相关设置
                        lineStyle: {
                            color: "#271351",
                            width: 2
                        }
                    },
                    z: 10 // 控制图形的前后顺序。z值小的图形会被z值大的图形覆盖（一般不需要设置）
                },
                // y轴设置 （x,y轴的相关设置基本类似）
                yAxis: {
                    // 坐标轴在 grid 区域中的分隔线。
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "#271351",
                            width: 1
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#271351",
                            width: 2
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#999"
                        }
                    }
                },
                //  用于区域缩放，从而能自由关注细节的数据信息。
                dataZoom: [
                    {
                        type: "inside"
                    }
                ],
                // 列表对象数组，可以有多个对象
                series: [
                    {
                        type: "bar", // 决定是什么图表类型，bar(柱状图)
                        barWidth: "40%", // 柱条的宽度
                        // 柱条的样式
                        itemStyle: {
                            barBorderRadius: [10, 10, 0, 0],
                            color: '#569787'
                        },
                        // 图表数据
                        data: data
                    }
                ]
            };
            // 初始化图表对象
            const windFarmWarningChart = echarts.init(
                document.getElementById("windFarmWarning")
            );
            // 先清空图表数据
            windFarmWarningChart.clear();
            // 开启加载
            windFarmWarningChart.showLoading({
                text: '加载中......',
                textColor: '#fff',
                maskColor: 'rgba(255, 255, 255, 0)',
                zlevel: 0
            });
            // 开启定时器
            setTimeout(() => {
                // 渲染图表
                windFarmWarningChart.setOption(option, true);
                // 关闭加载
                windFarmWarningChart.hideLoading();
            }, 1000);
            // 监听窗口，调整窗口大小的时候重载图表
            window.addEventListener("resize", function() {
                windFarmWarningChart.resize();
            });
        },
    }
}
</script>

一个基本的echarts图表应用就是这些参数配置，我们可以根据自己的需求修改相关的配置，在使用的时候删除多余注释。希望可以给有需要的朋友一些帮助，如果有问题的朋友可以评论留言（如果文章有问题也可以指出）。