vue 两项数据对比图

最新推荐文章于 2024-11-04 16:08:47 发布

新宇最优秀

最新推荐文章于 2024-11-04 16:08:47 发布

阅读量1.4k

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/tendernessxy/article/details/117323126

版权

本文介绍了如何使用Vue.js框架创建一个展示两项数据对比的图表。通过实例代码，详细讲解了实现过程，帮助读者理解Vue.js在数据可视化方面的应用。

摘要由CSDN通过智能技术生成

实现效果：

在这里插入图片描述
实现代码：

<template>
  <div class="sexConstitute">
    <div ref="sexConstituteChart" style="width: 350px; height: 40px"></div>
    <div class="box">
      <div class="left">
        男性
        <span>{
   {
    (flowStatisticsInfoVOs.malePercent * 100).toFixed(0) }}%</span>
      </div>
      <div class="right">
        <span>{
   {
    (flowStatisticsInfoVOs.femalePercent * 100).toFixed(0) }}%</span>
        女性
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
   
  props: {
   
  // flowStatisticsInfoVOs是一个对象 { malePercent:0.5303,femalePercent:0.5303}
    flowStatisticsInfoVOs: