Echarts饼图x,y,x2,y2是什么含义?

color: {
type: 'linear',
x: 0,
y: 0,
x2: .1,
y2: 1,
colorStops: [{
offset: 0, color: '#4dcdfc' // 0% 处的颜色,蓝绿色
},
{
offset: 1, color: '#3F77FE' // 100% 处的颜色,蓝色
}],
globalCoord: true // 缺省为 false
},

普通坐标是下图这种:

图片说明

饼图的X坐标的0起点是哪里,往哪个方向是增大的?Y坐标起点是哪里?往哪个方向是增大的?
我尝试了一下,X好像是从左往右递增,Y是从往上下递增,取值范围不是0-1,而是可以更大,而且不能取负数。
另外globalCoord是什么意思?

完整代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>EChartsTest</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;background-color:#081C28"></div>

    <script type="text/javascript">

        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
        series: [
            {
                name: '',
                type: 'pie',
                radius: ['68%', '83%'], //半径
                avoidLabelOverlap: true, //是否启用防止标签重叠策略
                hoverAnimation: false,    //是否开启 hover 在扇区上的放大动画效果
                color: ["#ff726b", "#87da76"], //默认色板:粉红色,绿色
                //设置值域标签
                label: {
                    normal: {
                        fontSize: '14',
                        position: 'center', //'outer'在饼图外,'inner'在饼图上,'center'在饼图中心
                        color: '#00FFFC',  //浅蓝色
                        // formatter: '{b}\n\n{d}%' // {b}:数据名; {c}:数据值; {d}:百分比
                        formatter: function (data) {
                            return '{name|' + data.name + '}\n\n{num|' + data.percent + '%}';
                        },
                        //富文本编辑,用于设置文本样式
                        rich: {
                            name: {
                                color: '#00FFFC',
                                fontSize: '14',
                                textShadowColor: 'rgba(0,255,252,1)', //浅蓝绿色
                                textShadowBlur: '4' //文字光影模糊度,其实就是阴影外延出来的长度
                            },
                            num: {
                                color: '#06BEFF',  //亮蓝绿色
                                fontSize: '30'
                            }
                        }
                    },
                },
                //标签的指向线
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {
                        value: 60,
                        name: '授权使用率',
                        itemStyle: {
        //线性渐变,前四个参数分别是 x, y, x2, y2, 范围从 0 - 1,相当于百分比,如果 globalCoord 为'true',则该四个值是绝对的像素位置,
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: .1,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#4dcdfc' // 0% 处的颜色,蓝绿色
                            },
                            {
                                offset: 1, color: '#3F77FE' // 100% 处的颜色,蓝色
                            }],
                            globalCoord: true // 缺省为 false
                        }, 
                            shadowColor: 'rgba(0,62,198,0.75)', //饼图的阴影颜色(本例是环形图),宝蓝色
                            shadowBlur: 10 //光影模糊度,本质就是阴影外延出去的长度
                        }
                    }, {
                        value: 28,
                        name: '占位标签',
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: .1,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#97d0fe' // 0% 处的颜色
                                },
                                {
                                    offset: 1, color: '#8ecdfe' // 100% 处的颜色
                                }],
                                globalCoord: true // 缺省为 false
                            }, 
                            shadowColor: 'rgba(0,62,198,0.75)',
                            shadowBlur: 10
                        }, 
                        //这部分用于填充空白,不显示标签。
                        label: {
                            normal: {
                                show: false
                            }
                        }
                    },
                ]
            }
        ]
    };

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

    </script>

</body>
</html>

1个回答

(x,y),(x2, y2)分别表示线性渐变的起始点和结束点,globalCoord 为true 表示两个坐标点是绝对坐标

qq_33477377
爱前端不爱恋爱 楼上正解
12 个月之前 回复
qiudechao1
leo_qiu_s 回复Bealing: 没有删除,是做了补充,不好意思
12 个月之前 回复
bealing
Bealing 回复leo_qiu_s: 额外说一句,你的提问想要得到一个比较满意的答复就不要随便删,对答友来说看到一个404的结果是很不爽的
12 个月之前 回复
bealing
Bealing 一两句话解释不清楚,你要想弄清楚的话,建议你了解一下线性渐变的常见情况,对角渐变,垂直渐变,水平渐变,都是怎么实现的
12 个月之前 回复
qiudechao1
leo_qiu_s 我试了一下,好像从左往右是X递增,从上往下是Y递增,XY都没有负数,而且XY取值范围不是0-1,可以更大。
12 个月之前 回复
qiudechao1
leo_qiu_s 大佬,饼图的X坐标的0起点是哪里,往哪个方向是增大的?Y坐标起点是哪里?往哪个方向是增大的?
12 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐