需求：用最少的vue页面画多个echarts图表

原理：我这里是使用父子组件传值 父组件多次调用子组件就可以画多个图表。适用于一个页面画多个图表，柱状图，饼图，折线图

效果如图所示：

首先，画图表之前安装echarts已经不用说了吧，需要建两个vue文件，一个父组件About，一个子组件barChart

再然后开始愉快的敲代码 ：）
在敲代码之前先构思了一下，我那些东西是公用的，公用的都放在子组件里，不一样的都将它变成变量，由父组件传值给它。
我这里把标题，标签，x轴data和series作为变量，由父组件传值获得。
开始编写子组件的代码

<template>
  <div class="box">
    <!--    子组件需要得到的值  id 和 data-->
    <div v-bind:id=id ref="data" style="width: 300px;height: 300px"></div>
  </div>
</template>

这里v-bind:id就是绑定id，从父组件获得不同的id，不然id相同echarts画图时无法识别图表就显示不出来。ref绑定data用于同一个页面可以重复调用子组件，以便获得不同的data。

<!--开始在js里画图表 -->
<script>
  export default {
    name: "barChart",
    props: ["id", "data"], //接受从父组件传回的值
    data() {
      return {}
    },
    //实时监听父组件传过来的值
    //然后执行drawBar方法 重新绘制柱状图
    watch: {
      data: {
        handler(value) {
          this.drawBar(value)
        },
        deep: true//深度监听
      }
    },
    mounted() {
      this.drawBar(this.data)
    },
    methods: {
      drawBar({
                textTile = '',  // 标题 柱状图options里需要用的数据这里作为参数从data里面取值
                totalText = '',//标签
                nameArray = [],//x轴的数据
                series = [],//series的数据
              } = {}  //作为一个整体的参数
      ) {   //现在是真正开始画图表的时候
        let barBox = this.$echarts.init(document.getElementById(this.id));
        //给图表一个指定的容器dom
        let option = { //设置图表的options
          //1.先设置图表的标题
          title: {
            text: textTile,//使用父组件传过来的数据
            textStyle: {
              color: '#00CAB1',
              fontsize: 20
            }
          },
          //2.直角坐标系绘图区域
          grid: {
            top: '25%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          //3.x轴相关结构
          xAxis:
            {
              type: "category",
              data: nameArray,
              axisLine: {
                show: true,
                lineStyle: {
                  // color: 'white',
                }
              },
              axisLabel: {
                interval: 0,
                fontSize: 10,
                rotate: 40
              },
              boundaryGap: true,
              axisTick: {
                alignWithLabel: true
              },
            },
          //4.y轴相关结构
          yAxis:
            {
              type: "value",
              axisLine: {
                show: true,
                lineStyle: {
                  // color: 'white'
                }
              },
              splitLine: {
                show: false
              },
              // boundaryGap: true,
            },
          //5.固定说明文字
          graphic: [{
            type: 'group',
            id: 'textGroup1',
            left: '1%',
            top: '15%',

            // bounding: 'raw',
            children: [
              {
                type: 'text',
                z: 100,
                top: 'middle',
                left: 'center',
                style: {
                  // text: ['注册总人数为'+totalNumber],
                  text: totalText,
                  fontSize: 15,
                  fill: '#000',
                }
              }

            ]
          }],
          //6.图表的相关series设置
          series: series,
        };
        //柱状图的相关结构已经定义好了调用setoption
        barBox.setOption(option, true);
        console.log(option)
        window.addEventListener("resize", function () {
          barBox.resize();
        })
      }
    }
  }
</script>

传值的时候用props来接收。
子组件现在已经写完了，再来看父组件：

<template>
  <div class="Box">
    <!--  调用子组件  对应子组件的id=bar和data=objectData数据绑定-->
    <bar-chart :id="'bar'" :data="objectData"></bar-chart>
  </div>
</template>

:id 和 :data 也是用来绑定id和data进行传值的。
因为就举个简单的例子，都是静态的数据，没有结合后端实时捞取数据，所以js部分就是简单的给每个变量赋值就OK啦。

<script>
  import BarChart from "./barChart";

  export default {
    name: "About",
    components: {BarChart},
    data() {
      return {
        objectData: {
          textTile: "父子组件传值echarts案例",
          totalText: '这是一个test',
          nameArray: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          series: [],
        }
      }
    },
    mounted() {
      this.getSeries();
    },
    methods: {
      getSeries() {
        this.objectData.series.push({
          name: '温度',
          type: "bar",
          barWidth: "20%",
          data: ['32', '30', '28', '29', '36', '33', '25'],
          itemStyle: {
            normal: {
              //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
              color: function (params) {
                // build a color map as your need.
                var colorList = [
                  '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                  '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                  '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                ];
                return colorList[params.dataIndex]
              },
              label: {
                show: true,
                position: 'top',
                formatter: '{c}'
              }
            }
          }
        })
      }
    }
  }
</script>

到这里就结束了，这个版本可以画很多图，而且可以节省很多繁琐的代码，

比如要在一个页面画多个图表只需在父组件里多次调用子组件即可。

<template>
  <div id="about" class="box">
    <div class="row"></div>
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <!--  <el-button round @click="toggleFullscreen" type="primary">全屏</el-button>-->
      <div class="item">
        <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="toggleFullscreen" style="color: white;width: 25px;height: 25px"/>
      </div>
    </div>
    <div class="row">
      <div class="item">
        <sum-people></sum-people>
      </div>
      <div class="item">
        <barchart
          :id="'bar1'"
          :data="objectData1"></barchart>
      </div>
      <div class="item">
        <barchart
          :id="'bar2'"
          :data="objectData2"
        ></barchart>
      </div>
    </div>
    <div class="row">
      <div class="item">
        <barchart
          :id="'bar3'"
          :data="objectData3"></barchart>
      </div>
      <div class="item">
        <barchart
          :id="'bar4'"
          :data="objectData4"></barchart>
      </div>
      <div class="item">
        <barchart
          :id="'bar5'"
          :data="objectData5"></barchart>
      </div>
    </div>
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>

  </div>
</template>

这里我调用了五次，就是画了五个图表，这也是我目前为止想到最简单又好用的画echarts的方法了。
请大佬多多指点啊啾咪~