erchar學習[999].官網測試 笛卡爾心形曲線

var data = [];
var dataCount = 180;
var a = 2;
for (var i = 0; i < dataCount; i++) {
    // var val = Math.random() * 1000;
    // let θ = i*Math.PI/180;
    let t = i*Math.PI/180;
    data.push([
        // echarts.number.round(Math.random() * 100),
        // echarts.number.round(Math.random() * 400)
        
        // 2*(1-Math.cos(θ)),
        // 2*(1-Math.sin(θ))
        // θ,1-Math.sin(θ)
       2+ (a*Math.cos(t)-Math.cos(a*t)),
       2+ (a*Math.sin(t)-Math.sin(a*t))
    ]);
}
for (var i = 0; i < dataCount; i++) {
    // var val = Math.random() * 1000;
    // let θ = i*Math.PI/180;
    let t = i*Math.PI/180;
    data.push([
        // echarts.number.round(Math.random() * 100),
        // echarts.number.round(Math.random() * 400)
        
        // 2*(1-Math.cos(θ)),
        // 2*(1-Math.sin(θ))
        // θ,1-Math.sin(θ)
        2-(a*Math.cos(t)+Math.cos(a*t)),
        2-(a*Math.sin(t)+Math.sin(a*t))
    ]);
}
// for (var i = 0; i < dataCount; i++) {
//     // var val = Math.random() * 1000;
//     let θ = i*Math.PI/180;
//     data.push([
//         // echarts.number.round(Math.random() * 100),
//         // echarts.number.round(Math.random() * 400)
        
//         1+Math.cos(θ),
//         1+Math.sin(θ)
//     ]);
// }
function renderItem(params, api) {
    if (params.context.rendered) {
        return;
    }
    params.context.rendered = true;

    var points = [];
    for (var i = 0; i < data.length; i++) {
        points.push(api.coord(data[i]));
    }
    var color = api.visual('color');

    return {
        type: 'polygon',
        shape: {
            points: echarts.graphic.clipPointsByRect(points, {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
            })
        },
        style: api.style({
            fill: color,
            stroke: echarts.color.lift(color)
        })
    };
}

option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['bar', 'error']
    },
    dataZoom: [{
        type: 'slider',
        filterMode: 'none',
        height: 8,
        bottom: 20,
        borderColor: 'transparent',
        backgroundColor: '#e2e2e2',
        handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
        handleSize: 20,
        handleStyle: {
            shadowBlur: 6,
            shadowOffsetX: 1,
            shadowOffsetY: 2,
            shadowColor: '#aaa'
        }
    }, {
        type: 'inside',
        filterMode: 'none'
    }],
    xAxis: {},
    yAxis: {},
    series: [{
        type: 'custom',
        renderItem: renderItem,
        data: data
    }]
};

 

官網