chevron_left

Vue 2 实践教程
免费
第 11.3 回

教程文档

Vue 2 实践教程 - 数据可视化 echarts 的使用

2023年11月24日
Vue 2 实践教程

数据可视化 echarts 的使用

安装

yarn add echarts

使用

<template>
  <div class="home">
    <div id="main" style="width:100%;height:500px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { fetchArticleCount } from '@/api/dashboard';

export default {
  data() {
    return {
      myChart: ''
    };
  },
  // 需要在mounted生命周期中使用，只有这时候DOM才生成。
  // 记住：created生命周期还没有生成DOM
  mounted() {
    this.countArticles();

    // 当浏览器尺寸变更时，图表尺寸自动适应
    window.on...
请登录后查看更多expand_more

课程介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

目录

适合这样的人

新手

授课老师