echarts vue使用

最新推荐文章于 2024-09-27 10:54:32 发布

小蒜瓣

最新推荐文章于 2024-09-27 10:54:32 发布

阅读量142

点赞数

分类专栏：编码

本文链接：https://blog.csdn.net/messicr7/article/details/102783751

版权

编码专栏收录该内容

44 篇文章 2 订阅

订阅专栏

<template>
    <el-row :gutter="20" style="margin-top: 15px;">
        <el-col :span="12">
            <div  id="chart" class="grid-content bg-white" style="height: 300px;">
                 <div style="color: #000;">API调用次数</div>
                 <el-divider></el-divider>
                 <div style="height: 230px;" id="chart-1"></div>
            </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-white" style="height: 300px;">
                    <div style="color: #000;">API调用频率</div>
                    <el-divider></el-divider>
                    <div style="height: 230px;" id="chart-2"></div>
                </div>
            </el-col>
    </el-row>
</template>
<script>
    import echarts from 'echarts';
    import 'echarts/theme/infographic.js'
export default {
    data() {
        return {
            chartLine_1: null,
        }
    }
},
methods: {
    drawCharts() {
        this.chartLine_1 = echarts.init(document.getElementById('chart-1'),'infographic');
        let option = {},
        this.chartLine_1.setOption(option);
        this.chartLine_1.resize();
    }
},
mounted() {
        this.drawCharts();
        window.onresize = (() =>{ // 定义窗口大小变更通知事件
            if(document.getElementById("chart")){
                this.drawCharts();
            }
        })
    },
</script>

记录