1.自定义组件

1.确定样式是否全部一致，元素种类和个数是否全部一致
1.1页面传入参数list（页面展示数据由后台传入，存在默认值），type也传入负责对组件进行个性化设置（角标是否显示，有几个模块left，center，right）
1.2样式结构，相同部分用数组
2.type组件在同一页面时，父组件调用同一方法根据type区分何处组件
3.子组件传递父组件所有可获得数据index、item、type
3.1props：type、parentData
4.宽、高
5.带有默认值
6.边距、背景、标题分开（各自独立）

<template>
  <div class="box">
    <div class="content">
      <ul>
        <li v-for="(item,index) in parentValue"
            :key="item.value">
          <button :class="[{activeBtn:activeIndex===index}]"
                  @click="onChoose({...item,index})">{{item.label}}</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// 小导航组件

const dataList = [
  // 默认导航列表
 {
    label: '企业法人单位行业占比情况', //  页面展示的值
    value: 'zygycpcl', // 真正的值
    unitLabel: '法人单位', // 单位的label
    unit: '个', // 单位
  },
]

export default {
  props: {
    type: {
      // 类型
      type: String,
      default: 'economic'
    },
    parentValue: {
      // 导航列表
      type: Array,
      default: () => {
        return dataList
      }
    }
  },
  data() {
    return {
      activeIndex: 0 // 选中的index
    }
  },
  methods: {
    // 按钮选中
    onChoose(obj) {
      this.activeIndex = obj.index
      this.$emit('fromChild', { ...obj, type: this.type })
    }
  }
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
img {
  display: block;
}
li {
  list-style-type: none;
}
a {
  display: block;
  color: #096;
  text-decoration: none;
}
/* 清除浮动 */
.clearfix:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1;
  /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.float-L {
  float: left;
}
.float-R {
  float: right;
}
button {
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: 1px solid transparent;
  outline: none;
}
.box {
  width: 100%;
  height: 100%;
  .content {
    width: 100%;
    height: 100%;
  }
}
</style>

<style lang="scss" scoped>
ul {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
button {
  display: block;
  padding: 0.5rem 2rem;
  font-size: 1rem;
  color: #fff;
  background-color: #5197f7;
}
.activeBtn {
  background-color: #0064bc;
}
</style>

1.1父组件data

pie: {
        // 饼图
        type: 'foodPie',
        samllNavList: [],
        unit: '',
        option: {} // echarts的option
      },

2.父组件调用方法

// 子传父
// smallNav组件

    handlesmallNav (obj) {
      console.log(obj)
     if (obj.type === 'economyPie' && obj.value === 'frdw') {
        this.pie.unit = obj.unit
        this.apigetUnitPersonal({
          ...obj
        })
        return
      }
      if (obj.type === 'economicBarTwo') {
        this.barTwo.unit = obj.unit
        return
      }
    }

3.命名

<div class="small-nav">
              <small-nav type="pie.type"
                        :parentValue="pie.samllNavList"
                        @fromChild="handlesmallNav"></small-nav>
            </div>

let viewTable = [           // 普查中心左边
    {
        label: '查看表格',
        value: 'viewTable'
    }
]

4.根据数据的值书写配置项

1.vue视图文件，props（config
1.1确定变量，设置默认值
2.config.js文件，参数（data）
3.把不确定因素变为确定因素
4.传参都传type(包括config.js)，根据type自定义
5.相关写在一起，按钮改变了哪些值
6.组件包含vue、js文件，以结构、内容命名
7.关注结构，结构相同可复用
8.同一页面出现次数

// 工业
  // 环形饼图
  industrialPie (obj) {
    let unit = obj.unit
    let func = function (params) {
      let data = params.data
      let res = ''
      res += `
          {white|${data.name}}
          ${data.value} {white|${unit}}
    `
      return res
    }
    return func
  }

export const rowDefaultOption = (data) => {
  let dzVal = "";
  data.forEach((item) => {
    if (item.name == "达州市") {
      dzVal = item[item.key];
      item.itemStyle = {
        color: "#26FDF5",
      };
      item.label = {
        // color: "#26FDF5",
        show: false,
      };
    }
  });
  return {

5.流程

1.Index.vue页面
引入components组件，html使用组件，定义type，传值type，parentData，返回事件fromChild（包含parentData相关，传type）
2.SmallNav.vue组件
3.SmallNavData.js组件数据（不需要动态数据，不需要传参）
option.js组件数据需要传参（obj（type，单位，与之相关的obj）,data）
data传值之前对data进行处理，在获取data时对data进行处理，源头处理，保证传值字段一致
formatterLabel.js
传入obj，定义变量赋值，返回函数

9.分类

1.页面为一类
2.smallNavList为一类
3.echarts option为一类
4.fomatter为一类
5.formatterLabel为一类

10.分类（饼图、柱形图）合并

使用数组

运行结果
运行结果

11.分类

1.饼图、柱形图
2.数据结构不同（存放数据的结构）
3.表现方式不同（页面展示的样式）