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>

效果

相关推荐
学不会•1 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS2 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index4 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
开心工作室_kaic5 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年6 小时前
react中useMemo的使用场景
前端·react.js·前端框架