echarts(3)——饼图

案例

注释代码

源码地址：https://www.makeapie.com/editor.html?c=x1zOZDoSxq

option = {
    backgroundColor: '#273454',
    color: ['#FF9966', '#FFFFCC', '#0099CC', '#99CC33', '#99CCCC'],
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}个(占比{d}%)',
        textStyle: {
            fontSize: 15,
        },
    },
    legend: {
        data: ['栀子', '老竹', '茉莉红', '梧桐', '青竹'],
        orient: 'vertical',
        right: '5%',
        top: '13%',
        top: 'center',
        itemWidth: 20,
        itemHeight: 20,
        itemGap: 30,
        textStyle: {
            color: '#',
            fontSize: 16,
        },
    },
    grid: {
        containLabel: true,
        left: 0,
        right: 0,
        bottom: 0,
        top: '80px',
    },
    series: [
        {
            name: 'TITLE',
            type: 'pie',
            clockwise: false,
            startAngle: 90,
            radius: '70%',//图大小
            //radius: ['60%', '70%'],//设置空心饼状图//分别是图形占画布大小及中心空的程度
            center: ['41%', '50%'],//左右上下位置
            hoverAnimation: false,
            roseType: 'radius', //angle
            data: [
                {
                    value: 23,
                    name: '栀子',
                },
                {
                    value: 22,
                    name: '老竹',
                },
                {
                    value: 24,
                    name: '茉莉红',
                },
                {
                    value: 21,
                    name:  '梧桐', 
                },
                {
                    value: 21,
                    name: '青竹',
                },
            ],
            itemStyle: {
                //饼状图每一个项的间距
                normal: {
                    borderColor: '#273454',
                    borderWidth: '5',
                },
            },
            label: {
                show: true,
                position: 'outside',
                formatter: '{a|{b}：{d}%}\n{hr|}',//{hr|}图例组件小圆点
                rich: {
                    hr: {
                        backgroundColor: 't',//t小圆点颜色
                        borderRadius: 100,
                        width: 0,
                        height: 10,
                        padding: [3, 3, 0, -16],//？
                        shadowColor: '#1c1b3a',//设置阴影样式
                        shadowBlur: 1, //阴影模糊系数
                        shadowOffsetX: '2',
                        shadowOffsetY: '2',
                    },
                    a: {
                        padding: [-35, 15, -20, 5],//？
                    },
                },
            },
            labelLine: {//项标注线
                normal: {
                    length: 20,
                    length2: 30,
                    lineStyle: {
                        width: 1,
                    },
                },
            },
            // label: {//内部标注样式
            //     normal: {
            //         show: true,
            //         position: 'inside',
            //         formatter: '{d}%',
            //         formatter: function(data){
            //             return data.percent.toFixed(0)+"%";
            //         },
            //         textStyle : {
            //             align : 'center',
            //             baseline : 'middle',
            //             fontFamily : '微软雅黑',
            //             fontSize : 15,
            //             fontWeight : 'bolder'
            //         }
            //     },
            // },
        },
    ],
};

关于formatter

首先ECharts官网API提供了一些formatter格式化参数模板：

1. 字符串模板

模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为’axis’ 的时候，会有多个系列的数据，此时可以通过{a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的{a}，{b}，{c}，{d}含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：

u 折线（区域）图、柱状（条形）图、K线图: {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）

u 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）

u 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）

u 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

2. 回调函数

回调函数格式：(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string

饼图的类型

参考链接：echarts实用篇（一）——饼状图_BloodyMandoo的博客-CSDN博客

饼图分为：基本饼图、南丁格尔图（玫瑰图）、空心饼状图（环形图）、嵌套环形图

南丁格尔图只需设置roseType: 'angle',即可。

它有 ‘radius’ 和 ‘area’ 两种选择，意味着用半径或面积来体现数值的大小

空心饼状图设置radius: ['60%', '70%'],即可。两个参数按大小区分，一小一大分别是中心空的占比及图形占画布大小。

嵌套环形图有中心圆和外层环形组成。

option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} 
{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            selectedMode: 'single',//multiple多选，与下面的selected:true配合使用
            radius: [0, '30%'],//与'30%'等同
            label: {
                normal: {
                    position: 'inner'//描述文字位置
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直达', selected:true},//默认选中
                {value:679, name:'营销广告'},
                {value:1548, name:'搜索引擎'}
            ]
        },
        {
            name:'访问来源',
            type:'pie',
            radius: ['40%', '55%'],
            data:[
                {value:335, name:'直达'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1048, name:'百度'},
                {value:251, name:'谷歌'},
                {value:147, name:'必应'},
                {value:102, name:'其他'}
            ]
        }
    ]
};

定制饼图：

option = {
    backgroundColor: '#2c343c',

    title: {
        text: 'Customized Pie',
        left: 'center',
        top: 20,
        textStyle: {
            color: '#ccc',
        },
    },

    tooltip: {
        trigger: 'item',
        formatter: '{a} 
{b} : {c} ({d}%)',
    },

    //根据数值大小配置颜色
    //这种需要跟随数据变化的通常称为定制饼状图。
    visualMap: {
        show: false,
        min: 80,
        max: 600,
        inRange: {
            colorLightness: [0, 1],
        },
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
                { value: 335, name: '直接访问' },
                { value: 310, name: '邮件营销' },
                { value: 274, name: '联盟广告' },
                { value: 235, name: '视频广告' },
                { value: 400, name: '搜索引擎' },
            ].sort(function (a, b) {
                return a.value - b.value;
            }),
            //改变数据的排序方式，这里是递增
            roseType: 'radius',
            label: {
                normal: {
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.3)',
                    },
                },
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)',
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20,
                },
            },
            itemStyle: {
                normal: {
                    color: '#c23531',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
            },

            //用于修改鼠标悬浮的动画方式
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            },
        },
    ],
};

Echarts学习之十五：visualMap

visualMap=[                                     //视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。视觉元素可以是：symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。
                                                 // colorAlpha: 图元的颜色的透明度。opacity: 图元以及其附属物（如文字标签）的透明度。colorLightness: 颜色的明暗度。colorSaturation: 颜色的饱和度。colorHue: 颜色的色调。
    {
        show:true,                              //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
        type: 'continuous',                     // 定义为连续型 viusalMap
        min:10,                                  //指定 visualMapContinuous 组件的允许的最小值
        max:100,                                 //指定 visualMapContinuous 组件的允许的最大值
        range:[15, 40],                          //指定手柄对应数值的位置。range 应在 min max 范围内
        calculable:true,                        //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
        realtime:true,                          //拖拽时，是否实时更新
        inverse:false,                          //是否反转 visualMap 组件
        precision:0,                            //数据展示的小数精度，默认为0，无小数点
        itemWidth:20,                           //图形的宽度，即长条的宽度。
        itemHeight:140,                         //图形的高度，即长条的高度。
        align:"auto",                           //指定组件中手柄和文字的摆放位置.可选值为：'auto' 自动决定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。
        text:['High', 'Low'],                   //两端的文本
        textGap:10,                              //两端文字主体之间的距离，单位为px
        dimension:2,                            //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
        seriesIndex:1,                          //指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列
        hoverLink:true,                         //鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮
        inRange:{                               //定义 在选中范围中 的视觉元素
            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
            symbolSize: [30, 100]
        },
        outOfRange:{  //定义 在选中范围外 的视觉元素。
            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
            symbolSize: [30, 100]
        },
        zlevel:0,                                   //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
        z:2,                                         //所属组件的z分层，z值小的图形会被z值大的图形覆盖
        left:"center",                              //组件离容器左侧的距离,'left', 'center', 'right','20%'
        top:"top",                                   //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
        right:"auto",                               //组件离容器右侧的距离,'20%'
        bottom:"auto",                              //组件离容器下侧的距离,'20%'
        orient:"vertical",                         //图例排列方向
        padding:5,                                   //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
        backgroundColor:"transparent",            //标题背景色
        borderColor:"#ccc",                         //边框颜色
        borderWidth:0,                               //边框线宽
        textStyle:mytextStyle,                      //文本样式
        formatter: function (value) {                 //标签的格式化工具。
            return 'aaaa' + value;                    // 范围标签显示内容。
        }
    },
    {
        show:true,                          //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
        type: 'piecewise',                  // 定义为分段型 visualMap
        splitNumber:5,                      //对于连续型数据，自动平均切分成几段。默认为5段
        pieces: [                           //自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
            {min: 1500},                     // 不指定 max，表示 max 为无限大（Infinity）。
            {min: 900, max: 1500},
            {min: 310, max: 1000},
            {min: 200, max: 300},
            {min: 10, max: 200, label: '10 到 200（自定义label）'},
            {value: 123, label: '123（自定义特殊颜色）', color: 'grey'}, // 表示 value 等于 123 的情况。
            {max: 5}                        // 不指定 min，表示 min 为无限大（-Infinity）。
        ],
        categories:['严重污染', '重度污染', '中度污染', '轻度污染', '良', '优'],  //用于表示离散型数据（或可以称为类别型数据、枚举型数据）的全集
        min:10,                             //指定 visualMapContinuous 组件的允许的最小值
        max:100,                             //指定 visualMapContinuous 组件的允许的最大值
        minOpen:true,                       //界面上会额外多出一个『< min』的选块
        maxOpen:true,                       //界面上会额外多出一个『> max』的选块。
        selectedMode:"multiple",           //选择模式，可以是：'multiple'（多选）。'single'（单选）。
        inverse:false,                      //是否反转 visualMap 组件
        precision:0,                        //数据展示的小数精度，默认为0，无小数点
        itemWidth:20,                       //图形的宽度，即长条的宽度。
        itemHeight:140,                     //图形的高度，即长条的高度。
        align:"auto",                       //指定组件中手柄和文字的摆放位置.可选值为：'auto' 自动决定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。
        text:['High', 'Low'],               //两端的文本
        textGap:10,                          //两端文字主体之间的距离，单位为px
        showLabel:true,                     //是否显示每项的文本标签
        itemGap:10,                          //每两个图元之间的间隔距离，单位为px
        itemSymbol:"roundRect",             //默认的图形。可选值为： 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
        dimension:2,                          //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
        seriesIndex:1,                        //指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列
        hoverLink:true,                      //鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮
        inRange:{                             //定义 在选中范围中 的视觉元素
            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
            symbolSize: [30, 100]
        },
        outOfRange:{                            //定义 在选中范围外 的视觉元素。
            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
            symbolSize: [30, 100]
        },
        zlevel:0,                                   //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
        z:2,                                         //所属组件的z分层，z值小的图形会被z值大的图形覆盖
        left:"center",                              //组件离容器左侧的距离,'left', 'center', 'right','20%'
        top:"top",                                   //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
        right:"auto",                               //组件离容器右侧的距离,'20%'
        bottom:"auto",                              //组件离容器下侧的距离,'20%'
        orient:"vertical",                        //图例排列方向
        padding:5,                                   //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
        backgroundColor:"transparent",            //标题背景色
        borderColor:"#ccc",                         //边框颜色
        borderWidth:0,                               //边框线宽
        textStyle:mytextStyle,                      //文本样式
        formatter: function (value) {                //标签的格式化工具。
            return 'aaaa' + value;                   // 范围标签显示内容。
        }
    }
];

排序、加载完成显示图形的动画效果、可选范围的颜色。

英语

emphasis n. 重点；强调；加强语气