【体系课】数据可视化从入门到精通 =＞数据报表项目⑤

项目完成效果

开始创建项目

• 安装 vue-cli

  1.首先安装

	npm i -g @vue/cli

• 初始化项目

	vue create datav-report-dev

• 清除多余的文件：删除hello world.vue

• 安装 vue-router

	npm install vue-router --save

• 修改APP.vue

<template>
  <div id="app">
    <router-view />
  div>
template>

<script>
  export default {
       
    name: 'app'
  }
script>

<style>
  html, body, #app {
       
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
style>

• 修改Home.vue

<template>
  <div class="home">
    home
  div>
template>

<script>
  export default {
       
    name: 'Home',
  }
script>

<style>
  .home {
       
    width: 100%;
    padding: 20px;
    background: #eee;
    box-sizing: border-box;
  }
style>

• 创建router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
     
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = new VueRouter({
     
  routes
})

export default router

• main.js挂载router

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
     
  router,
  render: h => h(App),
}).$mount('#app')

• 看下面效果
  

• 安装 element-ui

vue add element

选择第二个按需导入
选择中文
element会给我们在app.vue里面加上多余的代码helloword代码

然后再把app.vue里面的代码 还原成之前的app.vue代码 就行了

• 安装 eCharts

npm i -S echarts

安装成功！

main.js引入echarts

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import ECharts from 'echarts'

Vue.config.productionTip = false
Vue.prototype.$echarts = ECharts

new Vue({
     
  router,
  render: h => h(App),
}).$mount('#app')

这样以后不需要import了，直接$echarts就可以使用了