使用vue开发echarts圆环统计图组件--legend 多列展示 和 legend 分页展示

开发背景就不过多赘述了，直接先来几张效果图吧

 1.首先在 package.json 中添加echarts：

{
  "dependencies": {
    "echarts": "^5.0.0",
  }
}

2.然后执行 npm install；

3.接下来就开始编写相关组件文件，代码量较大，建议直接复制下来按步骤运行： 

3.1.创建组件文件  pieLoopChart.vue 代码如下：

<template>
  
  <div :id="id" style="height: 100%; width: 100%">div>
template>

<script>
//echarts 饼状图组件2
export default {
  props: {
    "id": {
      type: String,
      default: "pieLoopChart"
    },
    "color": {
      type: String,
      default: ""
    }, 
    "pieData": {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      pieLoopChart: undefined,
      colors: [ '#FF6347','#F4A460','#FF8C00','#FFE4B5','#FFD700', 
                '#FFFF00','#7CFC00','#32CD32','#00FF7F','#48D1CC',                                            
                '#00FFFF','#00BFFF','#8A2BE2','#EE82EE','#FFC0CB'
              ],
      legendData: [],
      seriesData: [
              { value: 7283, value1: 1, name: '公共租赁房' },
              { value: 6283, value1: 1, name: '经济适用房' },
              { value: 5820, value1: 1, name: '廉租房' },
              { value: 2671, value1: 1, name: '定向安置房' },
              { value: 7283, value1: 1, name: '两限商品房' },
              { value: 271, value1: 1, name: '安居商品房' }
              ,
              { value: 7283, value1: 1, name: '公共租赁房2' },
              { value: 6283, value1: 1, name: '经济适用房2' },
              { value: 5820, value1: 1, name: '廉租房2' },
              { value: 2671, value1: 1, name: '定向安置房2' },
              { value: 7283, value1: 1, name: '两限商品房2' },
              { value: 271, value1: 1, name: '安居商品房2' }
              ,
              { value: 7283, value1: 1, name: '公共租赁房3' },
              { value: 6283, value1: 1, name: '经济适用房3' },
              { value: 5820, value1: 1, name: '廉租房3' },
              { value: 2671, value1: 1, name: '定向安置房3' },
              { value: 7283, value1: 1, name: '两限商品房3' },
              { value: 271, value1: 1, name: '安居商品房3' }
              ,
              { value: 7283, value1: 1, name: '公共租赁房5' },
              { value: 6283, value1: 1, name: '经济适用房5' },
              { value: 5820, value1: 1, name: '廉租房5' },
              { value: 2671, value1: 1, name: '定向安置房5' },
              { value: 7283, value1: 1, name: '两限商品房5' },
              { value: 271, value1: 1, name: '安居商品房5' }
            ]
    }
  },
  methods: {
    initChart() {
      var echarts = require("echarts");
      // 基于准备好的dom，初始化echarts实例
      this.pieLoopChart = echarts.init(document.getElementById(this.id));

      // 绘制图表
      if (this.pieData.seriesData && this.pieData.seriesData.length > 0) {
        var tmpData = [];
        for (var j = 0, m = this.pieData.seriesData.length; j < m; j++) {
          if (this.pieData.seriesData[j].value && this.pieData.seriesData[j].name) {
            tmpData.push(this.pieData.seriesData[j]);
          }
        }
        if (tmpData.length > 0) {
          this.seriesData = tmpData;
        }
      }

      // 填充legendData 数据
      for (var i = 0, n = this.seriesData.length; i < n; i++) {
        this.legendData.push(this.seriesData[i].name);
        // this.seriesData[i].value = this.seriesData[i].value1;
      }

      const seriesData = this.seriesData;

      this.pieLoopChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: "{a} 
{b} : {c} ({d}%)"
        },
        grid: {
          top: '50%',
          left: 90
        },
        legend: [
          {
            top: 0,
            // right: 10,
            left: '45%',
            orient: 'vertical',
            formatter: function(name) {
              var v;
              for (var i = 0, n = seriesData.length; i < n; i++) {
                if (name == seriesData[i].name) {
                  v = seriesData[i].value;
                }
              }
              return `{name|${name}} {val|${v}}`;
            },
            data: this.legendData.slice(0, 9),  // 切割 legend.data 进行分列展示  第一列
            textStyle: {
              color: '#fff',
              // fontSize: 12,
              // padding: [0, -5, 0, 0], // 修改文字和图标距离
              rich: {
                name: {
                  color: '#A9FDFF'
                },
                val: {
                  color: '#ffffff'
                }
              }
            },
          },{
            top: 0,
            left: '71%',
            bottom: 150,
            type: 'scroll',                 // legend.data 分页展示
            orient: 'vertical',
            data: this.legendData.slice(9),  // 切割 legend.data 进行分列展示  第二列
            formatter: function(name) {
              var v;
              for (var i = 0, n = seriesData.length; i < n; i++) {
                if (name == seriesData[i].name) {
                  v = seriesData[i].value;
                }
              }
              return `{name|${name}} {val|${v}}`;
            },
            textStyle: {
              color: '#fff',
              rich: {
                name: {
                  color: '#A9FDFF'
                },
                val: {
                  color: '#ffffff'
                }
              }
            }
          }
        ],
        series: [
          {
            name: this.pieData.name,
            type: 'pie',
            radius: ['66%', '95%'],
            center: ['23%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
              // normal: {
              //   padding: [0, -16],
              //   formatter: "{white|{b}}\n\n{blue|{c}}",
              //   borderWidth: 10,
              //   borderRadius: 10,
              //   rich: {
              //     //线上文字不同样式
              //     white: {
              //       color: "#000",
              //     },
              //     blue: {
              //       color: "#2AD0FF",
              //       fontWeight: 1000,
              //     },
              //   },
              // },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 12,
                color: '#ffffff',
                // fontWeight: 'bold',
                formatter: "{fs20|{b}}\n{c} ({d}%)",
                rich: {
                  fs20: {
                    fontSize: 20
                  }
                }
              }
            },
            labelLine: {
              show: false,
              // smooth: 0.01,
              // length: 20,
              // length2: 10,
            },
            data: this.seriesData
          }
        ]
      });

      //自适应函数
      this.updateRsize(this.pieLoopChart);
    },
    genData(arr) {
      arr.forEach((item) => {
        item.label = {
          show: (function () {
            if (item.value == 0) {
              return false;
            } else {
              return true;
            }
          })(),
        };
        item.labelLine = {
          show: (function () {
            if (item.value == 0) {
              return false;
            } else {
              return true;
            }
          })(),
        };
      });
      return arr;
    },
  },
  mounted() {
    // this.initChart();
  },
  watch: {
    //动态监听数据是否变化
    pieData() {
      this.initChart();
    },
  },
};
script>

<style>
style>

其中 legend 多列展示 和  legend 分页展示 的关键代码如下：

legend: [
          {
            top: 0,
            // right: 10,
            left: '45%',
            orient: 'vertical',
            formatter: function(name) {
              var v;
              for (var i = 0, n = seriesData.length; i < n; i++) {
                if (name == seriesData[i].name) {
                  v = seriesData[i].value;
                }
              }
              return `{name|${name}} {val|${v}}`;
            },
            data: this.legendData.slice(0, 9),  // 切割 legend.data 进行分列展示  第一列
            textStyle: {
              color: '#fff',
              // fontSize: 12,
              // padding: [0, -5, 0, 0], // 修改文字和图标距离
              rich: {
                name: {
                  color: '#A9FDFF'
                },
                val: {
                  color: '#ffffff'
                }
              }
            },
          },{
            top: 0,
            left: '71%',
            bottom: 150,
            type: 'scroll',                 // legend.data 分页展示
            orient: 'vertical',
            data: this.legendData.slice(9),  // 切割 legend.data 进行分列展示  第二列
            formatter: function(name) {
              var v;
              for (var i = 0, n = seriesData.length; i < n; i++) {
                if (name == seriesData[i].name) {
                  v = seriesData[i].value;
                }
              }
              return `{name|${name}} {val|${v}}`;
            },
            textStyle: {
              color: '#fff',
              rich: {
                name: {
                  color: '#A9FDFF'
                },
                val: {
                  color: '#ffffff'
                }
              }
            }
          }
        ],

3.2.创建文件 securityOverviewChart.vue  并引入刚创建的组件， 代码如下：

<template>
  <div class="cloud_wrap">
    <border-tem-py :width="'100%'">
      
      <div class="title" slot="title">保障房概览div>
      <div class="content-box" slot="content">
        <div class="layui-row layui-col-space10">
          <div class="layui-col-md12">
            <pie-loop-chart-py :id="'securityPieChart'" :pieData="pieData" />
          div>
        div>
      div>
    border-tem-py>
  div>
template>
<script>
import pieLoopChartPy from '../../../../common/pieLoopChartPY.vue'; // 路径根据自己实际项目中的进行修改
export default {
  components: { pieLoopChartPy },
  data() {
    return {
      active: 'y',
      content: '',
      pieData: {},
    };
  },
  methods:{
    btnClick(val) {
      this.active = val;
      this.loadData();
    },
    loadData() {
      let params = {
        type: this.active,
        year: this.year
      };
      this.content = JSON.stringify(params)
      //  alert(this.content);
      this.pieData = {
        name: '',
        seriesData: [
          {name: '', value: 0},
          {name: '', value: 0}
        ]
      };
    }
  },
  mounted() {
    this.loadData();
  },
};
script>

<style scoped>
* {
  font-family: MicrosoftYaHei;
}

.cloud_wrap{
  z-index: 1;
  position: relative;
  cursor: pointer;
}

.cloud_wrap .btns-box .btn {
  padding: 2px 12px;
}

.cloud_wrap .layui-col-md12 {
  min-width: 175px;
  height: 230px;
}
style>

3.3.然后再相关页面中再引入 securityOverviewChart.vue 并使用即可；

小贴士：

百度Echarts官网：https://echarts.apache.org/examples/zh/index.html

html中的调色与透明度：

echarts柱状折线图综合vue组件：

每天进步一点点，点滴记录，积少成多。

以此做个记录，

如有不足之处还望多多留言指教！