Echarts南丁格尔玫瑰图、锥形柱状图、渐变曲线图

张美丽呀

已于 2023-03-01 09:20:19 修改

阅读量1.7k

点赞数 3

分类专栏： Vue 文章标签： echarts 前端

于 2022-08-12 23:32:37 首次发布

本文链接：https://blog.csdn.net/slient033/article/details/126312891

版权

1、南丁格尔玫瑰图

option = {
    title: {
        text: '作物占比',
        left: 50,     // 组件离容器左侧的距离
        top: 20
    },

    legend: {
        top: '52%',
        x: 'center',
        y: 'top',
        width: 180,
        height: 60,
        itemGap: 30,
        itemWidth: 15,
        itemHeight: 15,
    },
    tooltip: {
        //触发方式
        trigger: 'item',
    },

    series:
    {
        type: 'pie',
        radius: [20, 90],        //饼图半径，第一项是内半径，第二项是外半径，内半径设大可以显示成圆环图
        center: ['50%', '32%'],  // 饼图的中心(圆心)坐标，第一项是横坐标，第二项是纵坐标
        roseType: 'radius',      //定义饼形图变成南丁格尔玫瑰图，两种模式:使用radius可以用圆心角展现数据百分比，半径来展示数据大小；使用area圆心角相同，通过半径展示数据
        itemStyle: {
            borderRadius: 5
        },
        //单个扇区的标签配置
        label: {
            show: false
        },
        //高亮样式设置
        emphasis: {
            label: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                }
            }
        },
        color: ['#87CEFA', '#66CD00', '#EEAD0E', '#EE7942', '#87CEFA', '#6B8E23', '#FF8C00', '#9370DB', '#8B8970', '#CAE1FF'],
        data: [
            { value: 36, name: '小麦' },
            { value: 33, name: '烟草' },
            { value: 30, name: '玉米' },
            { value: 26, name: '荔枝' },
            { value: 21, name: '水稻' },
            { value: 16, name: '石榴' },
            { value: 12, name: '花生' },
            { value: 10, name: '番茄' },
            { value: 8, name: '马铃薯' },
            { value: 7, name: '葡