基于echart组件开发总结

本次自定义组件开发主要是通过echart的饼图、文本和关系图组成的。本文主要对pie进行阐述。

echart饼图

饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。饼图更适合表现数据相对于总数的百分比等关系。下面介绍饼图的实现步骤

饼图的实现步骤

• 步骤1 ECharts 最基本的代码结构

• 步骤2 准备数据

步骤3 准备配置项 在 series 下设置 type:pie

经过以上三步，初步的饼图就绘制完成了。

注意：

• 饼图的数据是由 name 和 value 组成的字典所形成的数组。
• 饼图无须配置 xAxis 和 yAxis

series配置项

以上组件的展示都需要数据填充才有一定的展示效果，因此都要进行series配置，series的类型，如'line'、'graph'、'pie'、'scatter'等。 以下是以饼图举例:

    type: 'pie', // 图表类型，必选项
    id: 'pie', // 组件 ID
    name: '', // 数据列名称
    legendHoverLink: true, // 是否启用图例 hover(悬停)时的联动高亮
    hoverAnimation: true, // 是否开启 hover 在扇区上的放大动画效果
    hoverOffset: 10, // 鼠标悬停在扇区上时的偏移量
    selectedMode: false, // 是否开启选中模式
    selectedOffset: 10, // 选中扇区的偏移量
    clockwise: true, // 是否顺时针排布扇区
    startAngle: 90, // 起始角度，支持范围[0, 360]
    minAngle: 0, // 最小角度，支持范围[0, 360]
    minShowLabelAngle: 0, // 低于此角度（包括此角度）时不显示标签
    roseType: false, // 是否启用南丁格尔图模式（通过半径表示数据大小）
    avoidLabelOverlap: true, // 是否启用标签重叠避免策略
    stillShowZeroSum: true, // 数据和为 0 时是否仍显示扇区
    label: { // 饼图图形上的文本标签
        show: true, // 是否显示标签
        position: 'outer', // 标签位置，可选项：'outer'，'inner'，'center'
        formatter: null, // 标签内容格式器
        textStyle: {
            fontSize: 12, // 字体大小
            fontWeight: 'normal', // 字体粗细
            color: '#333' // 字体颜色
        },
        alignTo: 'none', // 标签对齐方式，可选项：'none'，'labelLine'，'edge'
        margin: 8, // 文本标签与图形元素的间距
        bleedMargin: 0, // 边缘处文本标签的溢出间距
        padding: 0, // 文本标签的内边距
        silent: false // 是否取消标签鼠标响应事件
    },
    labelLine: { // 标签的视觉引导线样式
        show: true, // 是否显示视觉引导线
        length: 20, // 视觉引导线的长度
        length2: 5, // 视觉引导线第二段的长度
        smooth: false, // 是否平滑曲线显示
        lineStyle: {
            width: 1, // 引导线宽度
            type: 'solid', // 引导线类型
            color: '#333' // 引导线颜色
        }
    },
    itemStyle: { // 扇区的样式
        borderWidth: 0, // 扇区边框宽度
        borderColor: '#fff', // 扇区边框颜色
        borderType: 'solid', // 扇区边框类型
        shadowBlur: 0, // 扇区阴影大小
        shadowOffsetX: 0, // 扇区阴影 X 偏移量
        shadowOffsetY: 0, // 扇区阴影 Y 偏移量
        shadowColor: 'rgba(0, 0, 0, 0)', // 扇区阴影颜色
        opacity: 1 // 扇区透明度
    },
    emphasis: { // 高亮样式
        scale: true, // 是否启用缩放动画效果
        scaleSize: 10, // 高亮时扇区的放大尺寸
        label: { // 高亮时的标签样式
            show: true, // 是否显示标签
            position: 'outer', // 标签位置，可选项：'outer'，'inner'，'center'
            formatter: null, // 标签内容格式器
            textStyle: {
                fontSize: 12, // 字体大小
                fontWeight: 'normal', // 字体粗细
                color: '#333' // 字体颜色
            }
        },
        labelLine: { // 高亮时的标签视觉引导线样式
            show: true, // 是否显示视觉引导线
            length: 20, // 视觉引导线的长度
            length2: 5, // 视觉引导线第二段的长度
            smooth: false, // 是否平滑曲线显示
            lineStyle: {
                width: 1, // 引导线宽度
                type: 'solid', // 引导线类型
                color: '#333' // 引导线颜色
            }
        },
        itemStyle: { // 高亮时的扇区样式
            borderWidth: 0, // 扇区边框宽度
            borderColor: '#fff', // 扇区边框颜色
            borderType: 'solid', // 扇区边框类型
            shadowBlur: 0, // 扇区阴影大小
            shadowOffsetX: 0, // 扇区阴影 X 偏移量
            shadowOffsetY: 0, // 扇区阴影 Y 偏移量
            shadowColor: 'rgba(0, 0, 0, 0)', // 扇区阴影颜色
            opacity: 1 // 扇区透明度
        }
    },
    data: [] // 饼图数据

其中，饼图的数据格式为： 

data: [
    { value: 335, name: '直接访问' },
    { value: 310, name: '邮件营销' },
    { value: 234, name: '联盟广告' },
    { value: 135, name: '视频广告' },
    { value: 1548, name: '搜索引擎' }
]
其中，value 表示数据值，name 表示数据名称。