VUE+ECharts making pie charts

The home page of the project needs to implement a pie chart (backend interface returns data)

Preparation: first install echarts in the project

cnpm install echarts --s

Then I introduced it in main.js

import echarts from 'echarts' // 引入echarts

Vue.prototype.$echarts = echarts

The following is the specific page implementation

HTML page section

 <!--客户报表-->
        <div class="pieBox" style="margin-right: 33px">
          <div class="title">
            <span class="s_tit">客户报表</span>
            <span class="s_English">Customer report</span>
          </div>
          <!-- 为 ECharts 准备一个具备大小（宽高）的 容器 -->
          <div style="display: flex">
            <div id="pieChart" class="pieSty"></div>
            <div class="wenzi">
              <template v-for="(item, index) in arrpie">
                <div class="pieNum" :key="index">
                  <span
                    :class="
                      index == 0
                        ? 'num1'
                        : index == item.length - 1
                        ? 'num3'
                        : 'num2'
                    "
                    >{
   
   { item.productName }}</span
                  ><span>{
   
   { item.customerNum }}</span>
                </div>
              </template>
            </div>
          </div>
        </div>

Partial requirements of the project:

It is displayed according to the required style (index == 0 uses num1 style, the first column (here refers to the total number of customers in the UI diagram), when the subscript is equal to the last number, use num3, and use num2 for the rest),

{ { item.productName }} is the name on the right, and { { item.customerNum }} is the number.

The following is the data format given by the backend interface, so it is converted into a string in the getAPui() method

{
    "code": 200,
    "message": "获取成功",
    "dataInfo": [
        {
            "customerNum": 1,
            "productName": "客户总数",
            "ratio": 0
        },
        {
            "customerNum": 1,
            "productName": "某某系统",
            "ratio": 100
        }
    ]
}

js part 

<script>
import { getCustomerReport } from "../../../api/api";//引入接口
import session from '../../../until/loginIntercept/loginIntercept'
export default {
  name: 'hello',
  data() {
    return {
      arrpie: [],//饼图
    }
  },
  mounted() {
    this.getAPui();//饼图-数据
  },
  methods: {
    /**
     * 饼图-数据 这里处理接口拿到的数据
     */
    getAPui() {
      getCustomerReport({ "supplierId": session.getLoginInfo().supplierId }).then(res => {
        if (res.data.code = 200) {
          var str = JSON.stringify(res.data.dataInfo);//JSON.stringify转字符串 左边饼图用的
          str = str.replace(/productName/g, 'name');//接口返回的productName 替换成name
          str = str.replace(/ratio/g, 'value');//接口返回的ratio 替换成value
          var arr = JSON.parse(str);
          this.arrpie = res.data.dataInfo;//左边饼图用
          arr.splice(0, 1);//arr.splice(开始删除下标，删除个数)，因为客户总数不需要显示在左边饼图上
          this.drawLine(arr);//处理好的数据传给drawLine方法
        }
      })
    },
    /**
     * 饼图-样式
     */
    drawLine(arr) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('pieChart'))
      // 绘制图表
      myChart.setOption({
        color: ['#5d88ff', '#9071fc', '#ffa05e', '#ffc85e', '#ff5f5d', '#63dfff'],//配置颜色
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '90%'],
            avoidLabelOverlap: false,
            label: {
              position: 'inner',
              fontSize: 14,
              formatter: '{d}%'//设置左边图上的%
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: arr //接收getAPui()方法的数据
          }
        ]
      });
    },
  }
}
</script>

 css section (this section styles)

<style scoped>
.s_tit {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
}
.s_English {
  color: #d3cece;
  font-size: 14px;
}
.pieBox {
  width: 48%;
  height: 355px;
  box-shadow: 1px 1px 5px 1px #e3e3e3;
}
.title {
  width: 90%;
  height: 25px;
  padding: 15px 20px 10px 7px;
  margin: 0px 0px 0px 10px;
  border-bottom: 1px solid #e8e8ed;
}
.pieSty {
  width: 50%;
  height: 240px;
  top: 30px;
}
.wenzi {
  width: 50%;
  padding: 57px 0px 0px 0px;
  display: flex;
  flex-direction: column;
}
.pieNum {
  margin: 15px 0px;
}
.num1 {
  font-weight: 600;
  margin-right: 75px;
  letter-spacing: 19px;
}
.num2 {
  margin-right: 89px;
  letter-spacing: 19px;
}
.num3 {
  margin-right: 89px;
  letter-spacing: 19px;
}