vue-admin
vue-monitor

echarts是百度的，现在已经到了版本4了，很强大的一个图表框架。而且上手特别简单，打开官网看看就知道怎么用， 至于具体的细节，那就是靠查API了，下面解释怎么在vue应用中使用 echarts。好看吗？

image.png

安装echarts

npm install echarts --save

这样就已经安装好了。

引用echarts

引用方式有两种：一种是全局引用；一种根据需求引用你要用到的部分。这里使用的是全局引用。
在 main.js 文件中，添加以下内容

import echarts from 'echarts'
Vue.prototype.$echarts = echarts 

然后使用的时候

<template>
  <div class="line1">
    <div id="line1" class="" style="width: 100%;height:680px;"></div>
  </div>
</template>

<script>
  export default {
    mounted() {
      this.myChart = this.$echarts.init(document.getElementById('line1'));
      this.initData();
    },
    methods: {
      initData() {
          const  option = xxx
          this.myChart.setOption(option);
    }
</script>

好了，手工！
不要好奇那个 const option = xxx是什么意思，你可以把它当作是配置，实际上它就是个配置，你需要显示什么图形，需要什么数据，都是在这里面配置，它是一个json对象，也就说，echarts的对象就是一个echarts对象。如果你实在不知道这个option是什么，有一个最简单的办法，你去官网上找一个例子，然后它代码拷贝出来就好了。至于具体显示什么图形，就得去查API了。

image.png