uni-app ucharts中饼图与圆环图区别

项目情况:

uni-app的用于移动端H5项目,包使用uni_modules目录存放。

图表引用ucharts中的echarts配置的组件方式

区别1 饼图与圆环图在echarts使用的配置都是pie类型。但是配置raduis使用:

radius: ['40%', '70%']

区别2 组件type指明:type="ring", type='pie'

<view class="charts-box">

<qiun-data-charts :chartData="chartDataPie" :echartsH5="true" :echartsApp="true"

background="none" :eopts="eopts" />

</view>

<u-gap height="30" bg-color="#bfc"></u-gap>

<view class="charts-box">

<qiun-data-charts type="ring" :chartData="Ring2" :echartsH5="true" :echartsApp="true"

background="none" :eopts="eopts2"/>

</view>

示例源码

复制代码
<template>
  <view >
    <u-gap height="30" bg-color="#bfc"></u-gap>
    <view class="charts-box">
      <qiun-data-charts :chartData="chartDataPie" :echartsH5="true" :echartsApp="true"
                        background="none" :eopts="eopts" />
    </view>

    <u-gap height="30" bg-color="#bfc"></u-gap>
    <view class="charts-box">
      <qiun-data-charts type="ring" :chartData="Ring2" :echartsH5="true" :echartsApp="true"
                        background="none" :eopts="eopts2"/>
    </view>

  </view>
</template>

<script>
import UGap from "@/uview-ui/components/u-gap/u-gap.vue";
import UButton from "@/uview-ui/components/u-button/u-button.vue";

export default {
  components: {UButton, UGap},
  data() {
    return {
      eopts: {
        color: ["#3287f7", "#ffb87c", "#7cdeb9"],
        legend: {
          show: false
        }
      },
      chartDataPie: {
        "series": [{
          'type': 'pie',
          radius: '55%',
          label: {
            normal: {
              formatter: "{b}:\n{c}\n{d}%", //百分比之后换行显示文字
              color: '#555'
            },
            color: '#555'
          },
          data: [{"name":"生产部1","value":50},
            {"name":"生产部4","value":18},{"name":"生产部5","value":8}]
        }]
      },

      eopts2: {
        tooltip: {
          trigger: 'item'
        },
        extra: {
          pie: {
            offsetAngle: -45,
            ringWidth: 100,
            labelWidth: 15
          }
        },
        legend: {
          top: '5%',
          left: 'center'
        }
      },
      Ring2: {
        series: [
          {
            name: 'Access From',
            radius: ['40%', '70%'], //pie:饼图与圆环的区别配置在此radius
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1048, name: 'Search Engine'},
              {value: 735, name: 'Direct'},
              {value: 580, name: 'Email'}
            ]
          }
        ]
      },
    };
  },
  onLoad() {
    console.log('|--onLoad')
  },
  onReady() {
    setTimeout(() => {
      //1. 获取数据
      this.getServerData();
    }, 1000);

  },
  mounted() {
    console.log('|--mounted')
  },
  methods: {
    resetData() {
      this.Ring2 = {
        series: [
          {
            name: 'Access From',
            // type: 'pie',
            radius: ['40%', '70%'], //圆环:radius长度是2, 饼图:radius是一个
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1048, name: 'Search Engine'},
              {value: 735, name: 'Direct'},
              {value: 580, name: 'Email'},
              {value: 484, name: 'Union Ads'},
              {value: 300, name: 'Video Ads'}
            ]
          }
        ]
      }
      this.eopts2.series = this.Ring2
    },
  }
};
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸,组件自动识别宽高 */
.charts-box {
  width: 100%;
  height: 300px;
}
</style>

效果

相关推荐
努力往上爬de蜗牛13 小时前
文件下载 针对安卓系统
前端·javascript·vue.js
一粒马豆13 小时前
excel表格通过前端fetch上传至后端flask处理流程示例
前端·python·flask·excel·h5·js·fetch
江城开朗的豌豆13 小时前
前端异步难题?用Redux-Thunk轻松搞定!
前端·javascript·react.js
正义的大古13 小时前
OpenLayers地图交互 -- 章节十二:键盘平移交互详解
javascript·vue.js·openlayers
CodeSheep13 小时前
稚晖君公司最新合伙人,公开了!
前端·后端·程序员
Q_Q196328847514 小时前
python+springboot+uniapp基于微信小程序的巴马旅居养老系统 旅游养老小程序
spring boot·python·小程序·django·flask·uni-app·node.js
IT_陈寒14 小时前
3年Java老手:我用这5个Spring Boot优化技巧将系统吞吐量提升了200%!🚀
前端·人工智能·后端
正义的大古14 小时前
OpenLayers地图交互 -- 章节十一:拖拽文件交互详解
javascript·vue.js·microsoft·openlayers
肖老师xy14 小时前
uniapp 苹果端bug合集
java·服务器·uni-app
清木Moyu14 小时前
layui tree组件回显bug问题,父级元素选中导致子集全部选中
前端·bug·layui