echarts玫瑰图

一、echarts玫瑰图扇形

echarts玫瑰图是一种数据可视化类型，可以将数据以扇形的形式展现，每个扇形的大小表示对应数据的大小。可以通过设置扇形的半径大小，扇形的颜色，以及扇形的角度来控制玫瑰图的展示效果。

// echarts玫瑰图扇形示例代码
option = {
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
            show: false,
            position: 'center'
        },
        emphasis: {
            label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
            }
        },
        labelLine: {
            show: false
        },
        data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 274, name: '联盟广告'},
            {value: 235, name: '视频广告'},
            {value: 400, name: '搜索引擎'}
        ]
    }]
};

二、echarts玫瑰图设置

在使用echarts玫瑰图时，还可以通过一些设置来调整玫瑰图的展示效果。比如，可以设置扇形之间的间隔大小，设置扇形开始的角度，以及设置玫瑰图的标题等。

// echarts玫瑰图设置示例代码
option = {
    title: {
        text: 'echarts玫瑰图',
        subtext: '数据来源',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} 
{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 274, name: '联盟广告'},
                {value: 235, name: '视频广告'},
                {value: 400, name: '搜索引擎'}
            ]
        }
    ]
};

三、echarts玫瑰图数据为0怎么处理

在使用echarts玫瑰图时，如果有些数据为0，玫瑰图会出现异常的展示效果，此时可以通过将这些数据转换为极小值来避免玫瑰图出现异常。

// echarts玫瑰图数据为0处理示例代码
var data = [350, 0, 0, 0, 0];
var minNum = 0.01;
data = data.map(function(item) {
    if (item === 0) {
        return minNum;
    } else {
        return item;
    }
});
option = {
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
            show: false,
            position: 'center'
        },
        emphasis: {
            label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
            }
        },
        labelLine: {
            show: false
        },
        data: [
            {value: data[0], name: '直接访问'},
            {value: data[1], name: '邮件营销'},
            {value: data[2], name: '联盟广告'},
            {value: data[3], name: '视频广告'},
            {value: data[4], name: '搜索引擎'}
        ]
    }]
};

四、echarts玫瑰图的label设置

在echarts玫瑰图中，可以通过设置label属性来调整扇形中文本显示的位置、颜色、大小等属性。

// echarts玫瑰图label设置示例代码
option = {
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
            show: true,
            position: 'outside',
            color: '#000',
            formatter: '{b}: {c} ({d}%)',
            fontSize: 14
        },
        emphasis: {
            label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
            }
        },
        labelLine: {
            show: true,
            length: 10,
            length2: 10,
            lineStyle: {
                color: '#999'
            }
        },
        data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 274, name: '联盟广告'},
            {value: 235, name: '视频广告'},
            {value: 400, name: '搜索引擎'}
        ]
    }]
};

五、echarts玫瑰图设置圆角

在echarts玫瑰图中，还可以通过设置圆角属性来给扇形添加圆角效果，让展示效果更加美观。

// echarts玫瑰图设置圆角示例代码
option = {
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
            show: true,
            position: 'outside',
            color: '#000',
            formatter: '{b}: {c} ({d}%)',
            fontSize: 14
        },
        emphasis: {
            label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
            }
        },
        labelLine: {
            show: true,
            length: 10,
            length2: 10,
            lineStyle: {
                color: '#999'
            }
        },
        data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 274, name: '联盟广告'},
            {value: 235, name: '视频广告'},
            {value: 400, name: '搜索引擎'}
        ],
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            normal: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            }
        }
    }]
};

六、echarts玫瑰图拯救极小值

当数据中存在极小值时，通过设置最小值的处理方法来达到较好的展示效果。

// echarts玫瑰图拯救极小值示例代码
let data = [350, 0, 0, 0, 0];
let minNum = 0.01;
data = data.map((item) => {
    if (item === 0) {
        return minNum;
    } else {
        return item;
    }
});
let total = data.reduce((total, num) => total + num);
let angleArr = data.map((num) => num / total * 360);
let option = {
    tooltip: {
        show: true,
        formatter: "{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        right: 10,
        top: 20,
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: [30, 110],
        center: ['50%', '50%'],
        roseType: 'radius',
        label: {
            color: '#333',
            formatter: '{b}: {c} ({d}%)'
        },
        data: [
            {
                value: data[0],
                name: '直接访问'
            },
            {
                value: data[1],
                name: '邮件营销'
            },
            {
                value: data[2],
                name: '联盟广告'
            },
            {
                value: data[3],
                name: '视频广告'
            },
            {
                value: data[4],
                name: '搜索引擎'
            }]
    }]
};

七、echarts饼图

echarts饼图是一种数据可视化类型，可以将数据以饼形的形式展现。与玫瑰图不同的是，饼图的扇形大小表示对应数据占总数据的比重。

// echarts饼图示例代码
option = {
    title: {
        text: 'echarts饼图',
        subtext: '数据来源',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} 
{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 274, name: '联盟广告'},
                {value: 235, name: '视频广告'},
                {value: 400, name: '搜索引擎'}
            ]
        }
    ]
};

八、echarts折线图

echarts折线图是一种数据可视化类型，可以将数据以一系列折线的形式展现。折线图可以用来展示数据在时间轴上的分布趋势。

// echarts折线图示例代码

option = {

    title: {

        text: 'echarts折线图'

    },

    tooltip: {

        trigger: 'axis'

    },

    legend: {

        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']

    },

    grid: {

        left: '3%',

        right: '4%',

        bottom: '3%',

        containLabel: true

    },

    xAxis: {

        type: 'category',

        boundaryGap: false,

        data: ['周一','周二','周三','周四','周五','周六','周日']

    },

    yAxis: {

        type: 'value'

    },

    series: [

        {

            name:'邮件营销',

            type:'line',

            stack: '总量',

            data:[120, 132, 101, 134, 90, 230, 210]

        },

        {

            name:'联盟广告',

            type:'line',

            stack: '总量',

            data:[220, 182, 191, 234, 290, 330, 310]

        },

        {

            name:'视频广告',

            type:'line',

            stack: '总量',

            data:[150, 232, 201, 154, 190, 330, 410]

        },

        {

            name 

                                                        
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/236598.html