uni-app实现环形图功能每个数据宽度依次增加且可自定义颜色并展示标题

uniapp里面能实现一个环形图，每个数据的宽度依次增加（每个宽度不一样），能自定义颜色，展示标题等，主要是更改环形图每个区域的宽度

开发环境	版本号	项目创建方式
uniapp	未知	未知

yuanlaile 1楼•1 天前

有尝吗

sinazl 2楼•1 天前

在uni-app中实现环形图功能，并且每个数据宽度依次增加且可自定义颜色并展示标题，可以使用ECharts图表库。以下是一个简单的实现案例，展示了如何配置环形图并满足你的需求。

首先，确保你已经安装了ECharts组件。在pages.json中配置好页面路径，然后在你的页面中引入ECharts。

1. 安装ECharts组件

在HBuilderX中，可以通过HBuilderX插件市场安装echarts组件，或者直接在项目中手动引入ECharts库。

2. 页面代码实现

2.1 引入ECharts

在你的页面中引入ECharts库，并创建一个容器来展示图表。

<template>
  <view>
    <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas>
  </view>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      ec: {
        onInit: this.initChart
      }
    };
  },
  methods: {
    initChart(canvas, width, height, dpr) {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      canvas.setChart(chart);

      const option = {
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 335, itemStyle: { color: '#c23531', width: 10 } },
              { value: 310, itemStyle: { color: '#2f4554', width: 20 } },
              { value: 234, itemStyle: { color: '#61a0a8', width: 30 } },
              { value: 135, itemStyle: { color: '#d48265', width: 40 } },
              { value: 1548, itemStyle: { color: '#91c7ae', width: 50 }, label: { show: true, formatter: '标题' } }
            ]
          }
        ]
      };

      chart.setOption(option);
      return chart;
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要调整 */
</style>

3. 解释

radius: ['50%', '70%']：设置环形图的内环和外环半径。
itemStyle：用于自定义每个数据块的颜色和宽度。
label：用于展示标题，在data中通过label.show和label.formatter来设置。

4. 注意事项

确保你的页面已经正确引入了ECharts组件。
在pages.json中配置好页面路径和组件路径。
ec-canvas组件是ECharts在uni-app中的适配组件，确保你使用的版本支持。