Echarts 饼图 基础知识点总结

option = {

    // 给每个扇形设置颜色 直接写在全局下 用[]  全局调色板

    // color: [

    //    'red', 'pink', 'blue', 'green', 'yellow'

    // ],

    // 如果只设置一种颜色 即只有明暗度的变化，也可以通过 visualMap 组件将数值的大小映射到明暗度

    visualMap: {

        show: false, // 若为true 则左下角会出现一个颜色变化框 = visualMap 组件

        min: 80,

        max: 600,

        inRange: {

            // 明暗度的范围

            colorLightness: [0, 1]

        }

    },

    // 图例 标记的位置

    legend: {

        orient: 'vertical',

        data: ['视频', '联盟','邮件','直接','搜索'],

        left: 'left'

    },

    // 鼠标hover 上去显示的内容

    tooltip : {

        trigger: 'item',

        // {a} 是指 series 里面的name值  {b} 是指 series.data里面的name值 {c}是指 series.data里面的value 值

        formatter: "{a} <br/>{b} : {c} "

    },

    // 设置主体的数据

    series : [

        {

            // roseType: 'angle',  设置为 南丁格尔图

            name: '哈哈哈',

            type: 'pie',

            radius: '55%',  // 饼图的大小

            data:[

                {value:235, name:'视频广告'},

                {value:274, name:'联盟广告'},

                {value:310, name:'邮件营销'},

                {value:335, name:'直接访问'},

                {value:100, name:'搜索引擎'}

            ],

            // 文字样式

            label: {

                normal: {

                    textStyle: {

                        color: 'rgba(0, 0, 0, 0.8)'

                    }

                }

            },

            // 指示线的样式 (视觉引导线)

            labelLine: {

                normal: {

                    // 写在normal 内才有效

                    length: 50,

                    lineStyle: {

                        color: 'rgba(255, 255, 255)'

                    }

                },

            },

            // 设置图形元素的颜色

            // 也可以在这里 设置扇形的颜色  阴影

            itemStyle: {

                normal: {

                    // 设置扇形颜色 这里只能设置一种颜色

                    color: '#c23531',

                    // 阴影部分大小

                    shadowBlur: 200,

                    //阴影颜色

                    shadowColor: 'rgba(0, 0, 0, 0.5)',

                    label: {

                        // 标签文字 的位置

                        position: 'inner',

                        textStyle: {

                            fontSize: 20,  // 文字大小

                            fontWeight: 200  // 文字粗细

                        }

                    }

                }

            }

        }

    ]

};

补充图片~

Echarts 饼图 基础知识点总结 Echarts 饼图 基础知识点总结

刚刚入前端的坑 小白一枚 只是想在简书里面 做笔记  方便以后查看  如果有什么错误不足的地方 欢迎指出~ 

大家多多交流 才会进步嘛~