Echarts模板语法，无需看视频教程，快速上手。

文章目录

一、项目需求

这里是Vue2项目，所以使用的是单文件组件方式进行封装echarts组件.
谈起可视化最不可或缺的就是echarts，但找了好多网上的教程都偏向于新手学习，不适于用来进行快速开发的人去学习。经过半天时间的摸索，我总结出了一个模板供大家使用，使用这套模板很快就能将图表插入到项目中。

二、步骤

1、安装echarts

npm install echarts

2、先在main.js中全局引入echarts

//全局引入
import Vue from 'vue'
import echarts from 'echarts'
//挂载echarts到原型对象上
Vue.prototype.$echarts = echarts

3、打开echarts官网

Examples - Apache ECharts

在此页面选择你想插入的图表后点击进入。在JS代码编辑内部可以明确的看到有option这个对象，简单的图表只有一个option，像有一些图表还有函数和变量。
若需修改数据可直接将option里的数据项修改成自己的即可，若有后端可调用接口传入。
在这里插入图片描述

4、创建chart1.vue组件

按照这个模板添加内容，样式和名称都可去修改，但要保证一致

<template>
<!--在这里调节图标长宽等样式-->
  <div ref="myChart" id="myChart" style="width: 200px; height: 200px"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  mounted() {
    this.setChart();
  },
  methods: {
    setChart() {
        //放入常量变量
      const myEcharts = echarts.init(this.$refs.myChart);
      // 指定图表的配置项和数据
      var option = {
        //这里放入option对象里的内容
      };
        //其他函数,例如：
      setInterval(function () {
        myEcharts.setOption({
          series: [
            {
              data: [
                {
                  value: random,
                },
              ],
            },
            {
              data: [
                {
                  value: random,
                },
              ],
            },
          ],
        });
      }, 2000);
      // 使用刚指定的配置项和数据显示图表。
      myEcharts.setOption(option);
    },
  },
};
</script>

5、在需要插入图表的组件内引入组件

<template>
          <div class="t">
            <chart-1 class="chart" />
          </div>
</template>
<script>
import chart1 from "./chart1.vue";
export default {
  components: { chart1 },
  name: "EM",
  data() {
    return {};
  },
};
</script>

经过以上步骤后，echarts的图表就可以显示在自己的vue项目内了。
在这里插入图片描述