echarts画个爱心

echarts画个爱心

echarts官网粘贴下面 代码片.,然后点击运行


function generateData() {
    let data = [];

 // tt 代表弧度
        let tt=0;
        // vtt 代表 tt 的增量
        let vtt = 0.01;
        // maxt 代表 tt 的最大值
        let maxt = 2*Math.PI;
        // 需要循环的次数
        let maxi = Math.ceil(maxt/vtt);
        // 保存所有点的坐标的数组
        let pointArr=[];
        // 控制心形大小
        let size = 10;
        // xx 用来暂时保存每次循环得到的 xx 坐标
        let xx=0;
        // yy 用来暂时保存每次循环得到的 yy 坐标
        let yy=0;
        // 根据方程得到所有点的坐标
        for(let i=0;i<=maxi;i++){
            let xx = 16 * Math.pow(Math.sin(tt),3);
            let yy = 13 * Math.cos(tt) - 5 * Math.cos(2 * tt) -2 * Math.cos(3 * tt)- Math.cos(4 * tt);
            tt+=vtt;
            data.push([xx*size,yy*size]);
           
        }
        debugger;
    return data;
}

option = {
    animation: false,
    grid: {
        top: 40,
        left: 50,
        right: 40,
        bottom: 50
    },
    xAxis: {
        name: 'x',
        minorTick: {
            show: false
        },
        splitLine: {
            lineStyle: {
                color: 'FFC0CB'
            }
        },
        minorSplitLine: {
            show: false,
            lineStyle: {
                color: 'FFC0CB'
            }
        }
    },
    yAxis: {
        name: 'y',
        min: -170,
        max: 120,
        minorTick: {
            show: false
        },
        splitLine: {
            lineStyle: {
                color: '#FFC0CB'
            }
        },
        minorSplitLine: {
            show: false,
            lineStyle: {
                color: 'FFC0CB'
            }
        }
    },
    dataZoom: [{
        show: true,
        type: 'inside',
        filterMode: 'none',
        xAxisIndex: [0],
        startValue: -99999999,
        endValue: 99999999
    }, {
        show: false,
        type: 'inside',
        filterMode: 'none',
        yAxisIndex: [0],
        startValue: -99999999,
        endValue: 99999999
    }],
    series: [
        {
            type: 'line',
            showSymbol: false,
            clip: false,
            color: '#FF00FF',
            data: generateData()
        }
    ]
};

在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页