ECharts饼图

功能概述

饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。

ECharts 饼图插件与内置的饼图组件侧重点不同，它可以通过开放的自定义属性定制出更丰富的视觉效果，下图是部分示例：

示例文件包：可下载后直接导入系统参考查看。

ECharts饼图示例.zip

添加ECharts饼图插件

单击可视化插件按钮展开插件列表，然后在 ECharts 插件中将饼图插件拖拽至编辑区，即可添加一个 ECharts 饼图插件。

数据绑定

添加图表后，数据绑定面板会自动打开，在数据绑定面板中选择数据集或数据模型。

示例中我们使用的是一个数据集。

将数据集或模型中的字段拖拽到组件的各个绑定区域完成数据绑定，在左侧编辑区可见组件已经按照绑定的字段进行了绘制。

数据绑定区域	说明
数值	绑定数值类字段，可绑定一个或多个字段。如果已经在系列区域绑定了字段，则数值区域将无法绑定多个字段。
系列	绑定组件分析的系列，扩展分类维度，可绑定一个字段。如果数值中已绑定多个字段，则不可绑定系列。
提示标签	提示标签是指当鼠标移至图形时，会出现相应的提示信息。使用方法详见鼠标提示标签。

数据绑定区域

说明

数值

绑定数值类字段，可绑定一个或多个字段。

如果已经在系列区域绑定了字段，则数值区域将无法绑定多个字段。

系列

绑定组件分析的系列，扩展分类维度，可绑定一个字段。

如果数值中已绑定多个字段，则不可绑定系列。

提示标签

提示标签是指当鼠标移至图形时，会出现相应的提示信息。使用方法详见鼠标提示标签。

数据处理

ECharts 插件与内置图表类似都可一进行数据处理，如对数据进行聚合运算，修改数据的显示格式和单位等等，使其更符合使用场景的需要。

数据处理详细操作介绍请参考数据处理。

数据探索与分析

ECharts 插件同样支持丰富的数据探索分析能力，可为您的数据可视化分析过程提供强有力的支撑。

比如为组件添加过滤器、排名筛选、切换类型等等。

有关具体操作的介绍，请参考数据探索与分析中对应的介绍。

基本属性外观设置

在编辑区右侧选择属性设置或者双击该图表，打开属性设置面板可进行图表外观属性的设置。

绝大部分的属性设置项目与内置图表一致，请参考单个组件外观与属性设置。本文中主要举例介绍不同的属性设置项。

环形图

灵活设置饼图圆的半径范围，轻松实现环形图效果。

自定义属性

ECharts 插件与普通内置图表最大的不同点是可以自定义属性，使用 JS 代码进行深度定制。

自定义属性窗口编写区可直接编写JS代码，具体配置项与 ECharts 一致，请您参考 ECharts 官网 https://echarts.apache.org/zh/option.html#title。

窗口右上角的查看配置项按钮可查看产品图表中默认的配置项，当与定制内容重复时，以定制内容优先。

示例

例如使用JS 代码自定义属性修改了饼图的显示样式，使其显示了嵌套环形的效果。预览效果如下：

具体代码如下，供您参考。

let dbData=[]
let middleData = []
let xbData = []
let legendData = []
option.series[0].data.forEach(item => {
  legendData.push(item.name)
	if(item.name==='东北')
    {
      let tmp = {value:item.value, name:item.name}
      dbData.push(tmp)
    }else if(item.name==='西北')
    {
      let tmp = {value:item.value, name:item.name}
      xbData.push(tmp)
    }else
    {
      let tmp = {value:item.value, name:item.name}
      middleData.push(tmp)
    }
})
let total = 0
middleData.forEach(item => {
  total +=item.value
})

legendData.unshift('中部地区')
let opt= {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    data: legendData
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      selectedMode: 'single',
      radius: [0, '30%'],
      label: {
        position: 'inner',
        fontSize: 14
      },
      labelLine: {
        show: false
      },
      data: [
        { value: dbData[0].value, name: dbData[0].name },
        { value: xbData[0].value, name: xbData[0].name },
        { value: total, name: '中部地区', selected: true }
      ]
    },
    {
      name: 'Access From',
      type: 'pie',
      radius: ['45%', '60%'],
      labelLine: {
        length: 30
      },
      label: {
        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
        backgroundColor: '#F6F8FC',
        borderColor: '#8C8D8E',
        borderWidth: 1,
        borderRadius: 4,
        rich: {
          a: {
            color: '#6E7079',
            lineHeight: 22,
            align: 'center'
          },
          hr: {
            borderColor: '#8C8D8E',
            width: '100%',
            borderWidth: 1,
            height: 0
          },
          b: {
            color: '#4C5058',
            fontSize: 14,
            fontWeight: 'bold',
            lineHeight: 33
          },
          per: {
            color: '#fff',
            backgroundColor: '#4C5058',
            padding: [3, 4],
            borderRadius: 4
          }
        }
      },
      data: option.series[0].data
    }
  ]
};

return opt