VUE+ECharts 制作饼图

前端展示：ECharts实现动态饼图数据可视化

原创已于 2022-03-08 09:56:30 修改 · 4k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#vue #echarts

于 2022-03-07 18:35:38 首次发布

本文介绍了如何使用ECharts在Vue项目中根据后端接口数据动态创建饼状图，展示了如何处理数据并定制样式，包括不同索引位置的样式变化和数据格式转换。

项目的首页需要实现一个饼图（后端接口返回数据）

准备工作：首先在项目里面安装echarts

cnpm install echarts --s

然后我是在main.js里引入了

import echarts from 'echarts' // 引入echarts

Vue.prototype.$echarts = echarts

下面是具体页面实现

HTML页面部分

 <!--客户报表-->
        <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>

项目部分需求：

其中按照需求样式显示（index == 0 用 num1样式，第一列（这里指UI图中的客户总数），下标等于最后一个数的时候用num3，其余用num2），

{{ item.productName }}为右边名称，{{ item.customerNum }}为数字。

以下是后端接口给的数据格式，所以在getAPui()方法中转成了字符串

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

js部分

<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部分（这个部分样式）

<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;
}