使用vue開發echarts圓環統計圖組件--legend 多列展示 和 legend 分頁展示

開發背景就不過多贅述了，直接先來幾張效果圖吧

 

 

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

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

2.然后執行 npm install；

3.接下來就開始編寫相關組件文件，代碼量較大，建議直接復制下來按步驟運行： 

3.1.創建組件文件  pieLoopChart.vue 代碼如下：

<template>
  <!-- 餅狀 圓環 echarts -->
  <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} <br/>{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中的調色與透明度：https://www.cnblogs.com/jindao3691/p/16093404.html

echarts柱狀折線圖綜合vue組件：https://www.cnblogs.com/jindao3691/p/16093535.html

 

每天進步一點點，點滴記錄，積少成多。

以此做個記錄，

如有不足之處還望多多留言指教！