最新公告
  • 欢迎您光临码巴巴,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 若依 elements-ui 绘制带线饼图,并给出值和单位

    若依 elements-ui 绘制带线饼图,并给出值和单位 最后编辑:2024-06-12
    增值服务: 自动发货 使用说明 安装指导 环境配置二次开发BUG修复

    1.废话不多说,先看效果图

     

     

    2.直接上代码,组件开发,在componets/people目录下新建 peopleItem.vue 文件。(没有文件夹则新建)

    <template>
      <div style="width: 100%;height: 100%" ref="chart1"></div>
    </template>
    <script >
    import * as echarts from "echarts";
    
    export default {
      props: {
        manValue: {
          type:Number,
          default:90
        },
        womanValue: {
          type:Number,
          default:80
        },
        color: {
          type:String,
          default:'#8a8a8a'
        },
        unit: {
          type:String,
          default:'人'
        },
        items: {
          type: Array,
          default: function() {
            return [];
          }
        }
      },
      mounted() {
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(this.$refs.chart1,'dark');
    
        // 指定图表的配置项和数据
        var option;
    
       option = {
       backgroundColor:'',
       tooltip: {
        trigger: 'item'
      },
        legend: {
           show:false,
            top: '0%',
            left: 'center'
          },
      series: [
        {
    
          type: 'pie',
           radius: ['40%', '60%'],
          avoidLabelOverlap: true,
          itemStyle: {
            borderRadius: 3,
            borderColor: this.color,
            borderWidth: 0
          },
          label: {
                normal: {
                  show: true,//开启提示线文字
                  position: 'outer',//设置文字的所在的位置
                  formatter: '{b}:{c}' + this.unit,//设置展示的内容
                  borderWidth: 20,//大小设置
                  borderRadius: 4,
                  color: '#000000',//文字颜色
                  rich: {
                    //设置字体,c代表数据内容,b代表数据名称(这两个都可以在option中的data里面看到)
                    c: {
                      fontSize: 16,
                      lineHeight: 12,
                    }
                  },
                }
    
          },
          data: this.items,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    };
    </script>
    <style scoped lang="scss">
    
    </style>
    

     

    formatter: ‘{b}:{c}’ + this.unit   设置展示的内容  “{b} 为键,也就是上图中村名称”  “{c}” 为值上图中村名称后面的数字。  this.unit为单位

     

    2.页面中导入组件

    import peopleItem from "@/components/people/peopleItem.vue"; //引入组件

    3.页面中声明组件

    components: {
            peopleItem
    },

    4.使用组件

    <peopleItem  :color="'#b7b7b7'" unit="人"  :key="falushKey" :items="indexData.cultivateds"></peopleItem>

    unit:图表中单位,如上图中的热

    :key 实时刷新

    :item 图标中的数据

    5.数据格式

    [
        {
            "name": "其他",
            "value": 22
        },
        {
            "name": "小麦",
            "value": 11
        },
    ]

     

     

     

     

     

     

    猜你喜欢

    猜你在找

    1. 本站所有资源来源于用户上传和网络,如有侵权请及时联系站长!

    2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!

    3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!

    5. 如有链接无法下载、失效或广告,请联系管理员处理!

    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

    7. 如遇到加密压缩包,默认解压密码为"mababa.xin",如遇到无法解压的请联系管理员!


    码巴巴-优质代码创造者 » 若依 elements-ui 绘制带线饼图,并给出值和单位

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    一个高级程序员模板开发平台
    问问管理员?
    • 2024-06-12Hi,初次和大家见面了,请多关照!

    发表评论

    • 47会员总数(位)
    • 96资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 1568稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    升级SVIP尊享更多特权立即升级