element將echarts封裝成vue組件。用著還不錯(cuò)衷恭，v-charts文檔有詳細(xì)說明此叠。這里來體驗(yàn)部分圖表。

安裝

npm i v-charts echarts -S

效果圖

圖表效果圖

代碼

編輯文件/src/project/admin/views/Dashboard.vue

<script>
import Vue from 'vue'
import VCharts from 'v-charts'
Vue.use(VCharts)
export default {
  name: 'AdminDashboard',
  data () {
    return {
      histogramChartData: {
        columns: ['日期', '直接訪問', '郵件營(yíng)銷', '聯(lián)盟廣告', '視頻廣告', '搜索引擎', '百度', '谷歌', '必應(yīng)', '其他'],
        rows: [{
          '日期': '周一', '直接訪問': 320, '郵件營(yíng)銷': 120, '聯(lián)盟廣告': 220, '視頻廣告': 150, '搜索引擎': 862, '百度': 620, '谷歌': 120, '必應(yīng)': 60, '其他': 62
        }, {
          '日期': '周二', '直接訪問': 332, '郵件營(yíng)銷': 132, '聯(lián)盟廣告': 182, '視頻廣告': 232, '搜索引擎': 1018, '百度': 732, '谷歌': 132, '必應(yīng)': 72, '其他': 82
        }, {
          '日期': '周三', '直接訪問': 301, '郵件營(yíng)銷': 101, '聯(lián)盟廣告': 191, '視頻廣告': 201, '搜索引擎': 964, '百度': 701, '谷歌': 101, '必應(yīng)': 71, '其他': 91
        }, {
          '日期': '周四', '直接訪問': 334, '郵件營(yíng)銷': 134, '聯(lián)盟廣告': 234, '視頻廣告': 154, '搜索引擎': 1026, '百度': 734, '谷歌': 134, '必應(yīng)': 74, '其他': 84
        }, {
          '日期': '周五', '直接訪問': 390, '郵件營(yíng)銷': 90, '聯(lián)盟廣告': 290, '視頻廣告': 190, '搜索引擎': 1679, '百度': 1090, '谷歌': 290, '必應(yīng)': 190, '其他': 109
        }, {
          '日期': '周六', '直接訪問': 330, '郵件營(yíng)銷': 230, '聯(lián)盟廣告': 330, '視頻廣告': 330, '搜索引擎': 1600, '百度': 1130, '谷歌': 230, '必應(yīng)': 130, '其他': 110
        }, {
          '日期': '周日', '直接訪問': 320, '郵件營(yíng)銷': 210, '聯(lián)盟廣告': 310, '視頻廣告': 410, '搜索引擎': 1570, '百度': 1120, '谷歌': 220, '必應(yīng)': 110, '其他': 120
        }]
      },
      histogramChartSettings: {
        metrics: ['直接訪問', '郵件營(yíng)銷', '聯(lián)盟廣告', '視頻廣告', '搜索引擎', '百度', '谷歌', '必應(yīng)', '其他'],
        dimension: ['日期'],
        stack: {
          '廣告': ['郵件營(yíng)銷', '聯(lián)盟廣告', '視頻廣告'],
          '搜索引擎': ['百度', '谷歌', '必應(yīng)', '其他']
        }
      },
      histogramChartMarkLine: {
        data: [
          [{type: 'min'}, {type: 'max'}]
        ]
      },
      lineChartData: {
        columns: ['日期', '成本', '利潤(rùn)', '占比', '其他'],
        rows: [{
          '成本': 1523, '日期': '1月1日', '利潤(rùn)': 1523, '占比': 0.12, '其他': 100
        }, {
          '成本': 1223, '日期': '1月2日', '利潤(rùn)': 1523, '占比': 0.345, '其他': 100
        }, {
          '成本': 2123, '日期': '1月3日', '利潤(rùn)': 1523, '占比': 0.7, '其他': 100
        }, {
          '成本': 4123, '日期': '1月4日', '利潤(rùn)': 1523, '占比': 0.31, '其他': 100
        }, {
          '成本': 3123, '日期': '1月5日', '利潤(rùn)': 1523, '占比': 0.12, '其他': 100
        }, {
          '成本': 7123, '日期': '1月6日', '利潤(rùn)': 1523, '占比': 0.65, '其他': 100
        }]
      },
      lineChartSettings: {
        metrics: ['成本', '利潤(rùn)'],
        dimension: ['日期']
      },
      lineChartMarkPoint: {
        data: [{
          name: '最大值',
          type: 'max'
        }]
      },
      pieChartData: {
        columns: ['日期', '成本', '利潤(rùn)'],
        rows: [{
          '日期': '1月1號(hào)', '成本': 123, '利潤(rùn)': 3
        }, {
          '日期': '1月2號(hào)', '成本': 1223, '利潤(rùn)': 6
        }, {
          '日期': '1月3號(hào)', '成本': 2123, '利潤(rùn)': 90
        }, {
          '日期': '1月4號(hào)', '成本': 4123, '利潤(rùn)': 12
        }, {
          '日期': '1月5號(hào)', '成本': 3123, '利潤(rùn)': 15
        }, {
          '日期': '1月6號(hào)', '成本': 7123, '利潤(rùn)': 20
        }]
      },
      pieChartSettings: {
        dimension: '成本',
        metrics: '利潤(rùn)'
      },
      ringChartData: {
        columns: ['日期', '成本', '利潤(rùn)'],
        rows: [{
          '日期': '1月1號(hào)', '成本': 123, '利潤(rùn)': 3
        }, {
          '日期': '1月2號(hào)', '成本': 1223, '利潤(rùn)': 6
        }, {
          '日期': '1月3號(hào)', '成本': 2123, '利潤(rùn)': 90
        }, {
          '日期': '1月4號(hào)', '成本': 4123, '利潤(rùn)': 12
        }, {
          '日期': '1月5號(hào)', '成本': 3123, '利潤(rùn)': 15
        }, {
          '日期': '1月6號(hào)', '成本': 7123, '利潤(rùn)': 20
        }]
      },
      ringChartSettings: {
        dimension: '成本',
        metrics: '利潤(rùn)'
      }
    }
  },
  created: function () {
  },
  methods: {
  }
}
</script>

<template>
  <el-main>
    <el-scrollbar class="default-scrollbar" wrap-class="default-scrollbar__wrap" view-class="p20-scrollbar__view">
      <el-row :gutter="20">
        <el-col :span="12" class="echarts-item">
          <div class="content-title">柱狀圖</div>
          <ve-histogram :data="histogramChartData" :settings="histogramChartSettings" :mark-line="histogramChartMarkLine"></ve-histogram>
        </el-col>
        <el-col :span="12" class="echarts-item">
          <div class="content-title">折線圖</div>
          <ve-line :data="lineChartData" :settings="lineChartSettings" :mark-point="lineChartMarkPoint"></ve-line>
        </el-col>
        <el-col :span="12" class="echarts-item">
          <div class="content-title">餅圖</div>
          <ve-pie :data="pieChartData" :settings="pieChartSettings"></ve-pie>
        </el-col>
        <el-col :span="12" class="echarts-item">
          <div class="content-title">環(huán)形圖</div>
          <ve-ring :data="ringChartData" :settings="ringChartSettings"></ve-ring>
        </el-col>
      </el-row>
    </el-scrollbar>
  </el-main>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content-title{
  clear: both;
  font-weight: 400;
  line-height: 50px;
  padding: 10px 10px;
  font-size: 22px;
  color: #1f2f3d;
}
</style>