echart 环形图案例

### ECharts 环形图 示例

为了创建一个简单的环形图表，可以使用 `echarts` 库中的配置项来设置图表样式。以下是构建基本环形图所需的 JavaScript 代码：

// 初始化 echarts 实例
var myChart = echarts.init(document.getElementById('main'));

// 配置项
var option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'], // 设置内外半径比例形成环状
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: true,
                position: 'outside'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '20',
                    fontWeight: 'bold'
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

此示例展示了如何通过调整 `series.radius` 属性将饼图转换成环形图[^1]。

对于数据处理方面，在显示数值时可能需要用到单位格式化函数，如提供的 `unitFormatter()` 函数用于确保当传入的数据为空或不存在有效值的情况下返回合适的默认字符串表示形式。