Vue + EChart4.0 从0到1打造商业级数据报表项目

环境搭建

相关配置

cmd中查看相关程序版本,没有自行安装
参考

安装脚手架

cnmp i -g @vue/cli

查看脚手架版本

创建项目

// 在项目名后添加淘宝镜像,加快创建速度
vue create 项目名 --registry=https://registry.npm.taobao.org
例如:
vue create imocc-devpote --registry=https://registry.npm.taobao.org

总览下

项目初始化

项目初始化

安装element插件

终端输入

vue add element

检查:

安装echarts

cnpm i -S echarts

引用echars

import Echarts from 'echarts'

Vue.prototype.$echarts = Echarts

组件

创建组件

基本格式

<template>
  <div>top viewdiv>
template>

<script>
export default {

}
script>

<style scoped>

style>

嵌套组件到Home组件

<template>
  <div class="home">
    <top-view/>
    <sales-view/>
    <bottom-view/>
    <map-view/>
  div>
template>

<script>
// 1.引入组件
import BottomView from '../components/BottomView'
import MapView from '../components/MapView'
import SalesView from '../components/SalesView'
import TopView from '../components/TopView'

export default {
  name: 'HomeView',
  components: {
    // 2.注册组件
    BottomView,
    MapView,
    TopView,
    SalesView
  }
}
script>

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

TopView：开发卡片组件

引入卡片组件，布局组件等

公共组件CommonCard

<template>
  
  <div class="common-card">
    <div class="title">{{ title }}div>
    <div class="value">{{ value }}div>
    <div class="chart">
      
      <slot>slot>
    div>
    <div class="line"/>
    <div class="total">
      
      <slot name="footer">slot>
    div>
  div>
template>

<script>
export default {
  props: {
    title: String,
    value: String
  }
}
script>

<style scoped>
.title {
  font-size: 12px;
  color: #999;
}

.value {
  font-size: 25px;
  color: #000;
  margin-top: 5px;
  letter-spacing: 1px;
}

.chart {
  height: 50px;
}

.line {
  margin: 10px 0;
  border-top: 1px solid #eee;
}

.total {
  font-size: 12px;
  color: #666;
}
style>

公共组件引入脚本js

commonCardMixin.js

// 注册公共组件
import CommonCard from '../components/CommonCard/index.vue'
export default {
  components: {
    CommonCard
  }
}

TopView卡片模块

TopView

<template>
  <div class="top-view">
    
    <el-row>
      
      <el-col :span="6">
        <el-card shadow="hover">
          
          <total-sales/>
        el-card>
      el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          
          <total-orders/>
        el-card>
      el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          
          <today-users/>
        el-card>
      el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          
          <total-users/>
        el-card>
      el-col>
    el-row>
  div>
template>

<script>
import TotalSales from '../TotalSales/index.vue'
import TotalUsers from '../TotalUsers/index.vue'
import TodayUsers from '../TodayUsers/index.vue'
import TotalOrders from '../TotalOrders/index.vue'

export default {
  components: {
    TotalSales,
    TotalUsers,
    TodayUsers,
    TotalOrders
  }
}
script>

<style scoped>
style>

4组件初始代码

<template>
  
  <common-card/>
template>

<script>

import commonCardMixin from '@/mixins/commonCardMixin'

export default {
  // 应用公共样式
  mixins: [commonCardMixin]
}
script>

<style scoped>

style>

效果

累计销售额组件TotalSales

开发1

<template>
  
  <common-card
    title="累计销售额"
    value="¥ 2,350"
  >
    
    <template>
      <div class="compare">

      div>
    template>
    
    <template v-slot:footer>
       <span>昨日销售额span>
       <span class="money">¥ 5,220,000span>
    template>
  common-card>
template>

<script>
import commonCardMixin from '@/mixins/commonCardMixin'

export default {
  // 应用公共样式
  mixins: [commonCardMixin]
}
script>

<style scoped>
span {
  font-size: 12px;
}
.compare{
  height: 100%;
  background: yellow;
}
.money {
  margin-left: 5px;
  color: #333;
  font-weight: 700;
}
style>

开发2

<template>
  
  <common-card
    title="累计销售额"
    value="¥ 2,350"
  >
    
    <template>
      <div class="compare-wrapper">
        <div class="compare">
          <span>日同比span>
          <span class="emphasis">7.33%span>
        div>
        <div class="compare">
          <span>月同比span>
          <span class="emphasis">38.79%span>
        div>
      div>
    template>
    
    <template v-slot:footer>
      <span>昨日销售额span>
      <span class="emphasis">¥ 5,220,000span>
    template>
  common-card>
template>

<script>
import commonCardMixin from '@/mixins/commonCardMixin'

export default {
  // 应用公共样式
  mixins: [commonCardMixin]
}
script>

<style lang="scss" scoped>
.compare-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  /*垂直居中*/
  justify-content: center;

  .compare {
    font-size: 12px; /*文字大小*/
    //background: yellow;
    margin-top: 3px;
    color: #666;
  }
}
style>

CommonCard

<template>
  
  <div class="common-card">
    <div class="title">{{ title }}div>
    <div class="value">{{ value }}div>
    <div class="chart">
      
      <slot>slot>
    div>
    <div class="line"/>
    <div class="total">
      
      <slot name="footer">slot>
    div>
  div>
template>

<script>
export default {
  props: {
    title: String,
    value: String
  }
}
script>

<style scoped>
.title {
  font-size: 12px;
  color: #999;
}

.value {
  font-size: 25px;
  color: #000;
  margin-top: 5px;
  letter-spacing: 1px;
}

.chart {
  height: 50px;
}

.line {
  margin: 10px 0;
  border-top: 1px solid #eee;
}

.total {
  font-size: 12px;
  color: #666;
}
style>

<style lang="scss">
//强调样式
.emphasis {
  margin-left: 5px;
  color: #333;
  font-weight: 700;
}
style>

开发3

TotalSales

<template>
  
  <common-card
    title="累计销售额"
    value="¥ 2,350,000"
  >
    
    <template>
      <div class="compare-wrapper">
        <div class="compare">
          <span>日同比span>
          <span class="emphasis">7.33%span>
          
          <div class="increase"/>
        div>
        <div class="compare">
          <span>月同比span>
          <span class="emphasis">38.79%span>
          
          <div class="decrease"/>
        div>
      div>
    template>
    
    <template v-slot:footer>
      <span>昨日销售额span>
      <span class="emphasis">¥ 5,220,000span>
    template>
  common-card>
template>

<script>
import commonCardMixin from '@/mixins/commonCardMixin'

export default {
  // 应用公共样式
  mixins: [commonCardMixin]
}
script>

<style lang="scss" scoped>
.compare-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  /*垂直居中*/
  justify-content: center;

  .compare {
    display: flex;
    align-items: center;
    font-size: 12px; /*文字大小*/
    //background: yellow;
    margin-top: 3px;
    color: #666;
  }

}
style>

CommonCard

<template>
  
  <div class="common-card">
    <div class="title">{{ title }}div>
    <div class="value">{{ value }}div>
    <div class="chart">
      
      <slot>slot>
    div>
    <div class="line"/>
    <div class="total">
      
      <slot name="footer">slot>
    div>
  div>
template>

<script>
export default {
  props: {
    title: String,
    value: String
  }
}
script>

<style scoped>
.title {
  font-size: 12px;
  color: #999;
}

.value {
  font-size: 25px;
  color: #000;
  margin-top: 5px;
  letter-spacing: 1px;
}

.chart {
  height: 50px;
}

.line {
  margin: 10px 0;
  border-top: 1px solid #eee;
}

.total {
  font-size: 12px;
  color: #666;
}
style>

<style lang="scss">
//强调样式
.emphasis {
  margin-left: 5px;
  color: #333;
  font-weight: 700;
}

//上三角
.increase {
  width: 0;
  height: 0;
  border-width: 3px;
  border-color: transparent transparent red transparent;
  border-style: solid;
  margin: 0 0 3px 5px;
}

//下三角
.decrease {
  width: 0;
  height: 0;
  border-width: 3px;
  border-color: green transparent transparent transparent;
  border-style: solid;
  margin: 3px 0 0 5px;
}
style>

累计订单量组件开发

TotalOrders

<template>
  
  <common-card
    title="累计订单量"
    value="2,157,000">
    
    <template>
      <div id="total-orders-chart" />
    template>
    
    <template v-slot:footer>
      <span>昨日订单量span>
      <span class="emphasis">2,100span>
    template>
  common-card>
template>

<script>

import commonCardMixin from '@/mixins/commonCardMixin'

export default {
  // 应用公共样式
  mixins: [commonCardMixin]
}
script>

<style scoped>

style>

echars和vue-echarts

安装

npm install echarts vue-echarts -S

注册

运行报错
参考文档

SalesView模块

<template>
  <div style='width:100vw'>
    <v-chart :option='option_column' style="height: 400px">v-chart>
  div>
template>

<script>
export default {
  data() {
    return {
      option_column: {
        xAxis: {
          type: 'category'
          // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            type: 'line',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
    }
  }
}
script>

<style scoped lang='scss'>
style>

v-charts

安装

cnpm i -S v-charts

引入

时间组件开发

日期选择器

最近一周功能