echarts数据点为空心

在echarts中，要将数据点设置为空心，可以使用饼图的radius属性来实现。radius属性可以设置一个数组，数组的第一个值表示内圆的半径，第二个值表示外圆的半径。通过将内圆的半径设置为一个小于外圆的值，就可以实现数据点为空心的效果。例如，可以将radius属性设置为\['20%','70%'\]，其中20%表示内圆的半径，70%表示外圆的半径。这样就可以得到一个空心的饼图了。\[3\]
#### 引用[.reference_title]
- *1* *2* *3* [数据可视化的echarts的常用设置](https://blog.csdn.net/weixin_42150719/article/details/126464029)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

相关问题

echarts 折线点空心

要在 ECharts 折线图中设置折线点为空心，你可以通过在 series 中设置 symbol 属性以及 symbolSize 属性实现。具体步骤如下：

1. 在 series 中设置 symbol 属性为一个自定义的图形，例如 "circle" 或 "rect"，或者是一个 SVG 路径字符串。

series: [{
    type: 'line',
    symbol: 'circle', // 设置为实心圆
    symbolSize: 8, // 设置符号大小
    data: [10, 20, 30, 40, 50]
}]

2. 在 symbol 样式中设置边框颜色和填充颜色的透明度，从而实现折线点为空心的效果。

series: [{
    type: 'line',
    symbol: 'circle', // 设置为实心圆
    symbolSize: 8, // 设置符号大小
    itemStyle: {
        borderColor: '#fff', // 边框颜色
        borderWidth: 2, // 边框宽度
        opacity: 0 // 填充颜色透明度为0，即为空心
    },
    data: [10, 20, 30, 40, 50]
}]

通过以上方法，你可以将 ECharts 折线图中的折线点设置为空心，从而实现更加个性化的图表显示效果。

echarts 饼图为空心圆

要让 echarts 饼图为空心圆，可以通过设置 series 中的 radius 和 labelLine 属性来实现。具体做法是将 radius 的第二个值设置为一个小于 1 的小数，例如 0.6，同时将 labelLine 的 show 属性设置为 false，这样就可以让饼图变成空心圆了。

示例代码如下：

option = {
    series: [{
        type: 'pie',
        radius: ['50%', '60%'], // 将第二个值设置为小于 1 的小数
        labelLine: {
            show: false // 不显示标签引导线
        },
        data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 234, name: '联盟广告'},
            {value: 135, name: '视频广告'},
            {value: 1548, name: '搜索引擎'}
        ]
    }]
};