Skip to content
当前页

玫瑰图使用示例(仅供参考)

  • 1.表现形式

提示

下图中的选项框不在下面代码中

  • 2.配置
js
// 接口数据
        const res = {
            data: [
                {"name":"快包","value":921087},
                {"name":"其他","value":788428},
                {"name":"特快","value":403114}]
        }
        const returnTotal = (num) => {
            return parseFloat(String(num)).toLocaleString();
        };

        const returnAllTotal = (arr) => {
            let num = 0;
            for (let i = 0; i < arr.length; i++) {
                num += arr[i].value;
            }
            return num;
        };
        // 图表配置
        option = {
          legend: {
            orient: 'vertical',
            selectedMode: false,
            icon: 'rect', //图例形状
            data: ['快包', '特快', '其他'],
            top: '20px',
            right: '20px',
            // right: 40,
            itemWidth: 6, // 图例标记的图形宽度。[ default: 25 ]
            itemHeight: 50, // 图例标记的图形高度。[ default: 14 ]
            itemGap: 20, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔,纵向布局时为纵向间隔。
            formatter: function (name) {
              let target;
              for (let i = 0; i < pieData.length; i++) {
                if (pieData[i].name === name) {
                  target = pieData[i].value;
                }
              }
              let arr = [
                ' {title|' + name + '}',
                ' {value|' + returnTotal(target) + '}' + ' {unit|' + '' + '}',
              ];
              return arr.join('\n');
            },

            textStyle: {
              rich: {
                value: {
                  color: '#ffffff',
                  fontSize: '20px',
                  align: 'left',
                  padding: [3, 8, 0, 5],
                },
                title: {
                  fontSize: '14px',
                  color: '#aab1d0',
                  align: 'left',
                  padding: [0, 0, 12, 5],
                },
                unit: {
                  color: '#aab1d0',
                },
              },
            },
          },
          title: {
            text: returnTotal(returnAllTotal(res.data)),
            left: '29%',
            textAlign: 'center',
            top: '55%',
            textStyle: {
              fontSize: 20,
              color: '#ffffff',
            },
          },
          series: [
            {
              name: '数量',
              type: 'pie',
              radius: ['60%', '80%'],
              center: ['30%', '60%'],
              roseType: 'radius',
              label: {
                show: false,
                position: 'center',
              },
              emphasis: {
                label: {
                  show: false,
                },
              },
              labelLine: {
                show: false,
              },
              color: ['#23D5FF', '#17F2C3', '#E65152'],
              data: res.data,
            },
          ],
        }