Echarts各类图表option参数中文含义及常用值解析

最近一年项目开发中陆陆续续使用过很多次echarts图表，边用边整理了一份关于option参数设置的资料，以便后续使用时可以查阅。echarts官方文档对于option的讲解很详细，能够解决大半开发中遇到的问题，刚开始使用echarts的童鞋，如果遇到问题还是要多多查阅官网文档哦~

附上>>>>>>>>

echarts官方文档：Examples – Apache ECharts

自己整理的参考资料：

    option = {
            //echarts容器背景色
            backgroundColor: '#000',
            //系列颜色，调色盘颜色列表，可以在全局设置，也可以分别设置在series中
            color: ["#fff", "#ccc"],
            //标题，可以设置多个，形式为数组
            title: {
                text: "各单位落实情况",  //文本
                //文本样式设置
                textStyle: {
                    color: "#333333",  //颜色
                    fontSize: 20,  //字体大小
                },
                //位置
                left: "center",
                top: "0%"
            },
            //图例，图中的标记(symbol)，通常位于右上方，颜色和名字。可以通过点击图例控制哪些系列不显示。
            legend: {
                icon: "rect",  //形状
                orient: "horizontal", //horizontal水平方向排列，vertical垂直方向排列
                itemGap: 25, //间距
                itemWidth: 15,
                itemHeight: 7,
                top: '10%',
                right: 0,
                borderRadius: 10,
                data: ['参考1', '参考2', '百分比数据', '百分比2'], //如果不设置，会通过series系列数据自动生成
                textStyle: {
                    color: '#ccc',  //文字颜色
                    fontSize: "20",
                },
                selectedMode: false,  //控制是否可以通过点击图例改变图形的显示状态。默认开启，false可关闭。
            },
            //提示框，可以全局设置，也可设置在坐标系或系列数据中
            tooltip: {
                trigger: "axis",  //触发类型，'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
                axisPointer: {
                    type: "shadow",  //提示类型：鼠标移入显示阴影
                }
            },
            //坐标系内的绘图网格，可以理解为整个图表
            grid: {
                top: '20%',
                left: '0%',
                right: '0%',
                bottom: '0%',
                containLabel: true,  //grid区域是否包含坐标轴的刻度标签
            },
            //用于区域缩放，从而能自由关注细节的数据信息，不常用
            dataZoom: [
                {
                    xAxisIndex: 0,
                    show: false,  //是否展示dataZoom组件
                    type: "slider",
                    startValue: 0,
                    endValue: 3
                }
            ],
            //直角坐标系 grid 中的 x 轴
            xAxis: [
                {
                    type: 'category',  //坐标轴类型：'value' 数值轴，适用于连续数据；'category' 类目轴，适用于离散的类目数据
                    boundaryGap: false,  //设置为false代表从X轴零刻度开始绘制，设置为true代表离零刻度间隔一段距离
                    data: ['大客户', '人才服务部', '人才招聘部', '人才培训部', '档案服务部', '外包服务部'], //X轴类目数据，仅type为category时有效
                    //X轴刻度相关设置
                    axisTick: {
                        show: true,  //是否显示X轴刻度，默认显示
                        interval: 0,  //坐标轴刻度的显示间隔
                        inside: false,  //坐标轴刻度是否朝内，默认朝外
                        alignWithLabel: false,  //刻度是否位于标签中间
                    },
                    //X轴刻度标签相关设置（指X轴文字）
                    axisLabel: {
                        show: true,  //是否显示 
                        color: '#ccc',  //文字颜色
                        interval: 0,  //间隔显示个数
                        rotate: 20,  //刻度标签旋转的角度，值>0向左倾斜，值<0则向右倾斜，旋转的角度从 -90 度到 90 度。
                    },
                    //x轴轴线相关设置
                    axisLine: {
                        show: false,  //是否显示X轴，默认显示
                        symbol: ['none', 'arrow']  //轴线两边的箭头，默认不显示
                    },
                    //坐标轴提示框配置项，鼠标移入图形时显示
                    axisPointer: {
                        show: false,  //默认不显示
                        type: 'shadow',  //'line'直线指示器 'shadow'阴影指示器 'none'无
                    },


                }
            ],
            //直角坐标系 grid 中的 y 轴，如果有多条Y轴，yAxis为数组
            //当有两个Y轴时默认分别位于坐标轴两端
            //如果柱状和折线都有，则要通过数组设置两个对象，分别对应柱状和折线的样式
            yAxis: {
                type: 'value',  //坐标轴类型：'value' 数值轴，适用于连续数据；'category' 类目轴，适用于离散的类目数据；'time' 时间轴，适用于连续的时序数据
                name: '数据',  //坐标轴名称
                min: 0,  //坐标轴刻度最小值
                max: 100,  //坐标轴刻度最大值
                interval: 20,  //强制设置坐标轴分割间隔
                minInterval: 1, //表示将刻度的最小间距设置为1，只在数值轴或时间轴中有效
                //Y轴刻度标签相关设置
                axisLabel: {
                    formatter: '{value} %',  //Y轴刻度格式，支持字符串模板和回调函数两种形式
                    color: '#fff',  //刻度标签文字的颜色
                },
                //Y轴在 grid 区域中的分隔线（横向）
                splitLine: {
                    show: true,  //是否显示
                    interval: 0,  //坐标轴分隔线的显示间隔，在类目轴中有效
                    lineStyle: {
                        color: "#053c89",  //分隔线颜色
                        width: "2",  //分隔线宽度
                        type: "solid",  //线条样式，实线、虚线
                    }
                }
            },
            //原生图形元素组件
            graphic:
            {
                z: 1000, //显示层级
                type: 'image',  //可随意是image, text, circle, sector, ring等
                id: 'logo',
                left: '32%',
                top: '42%',
                bounding: 'raw',  //决定此图形元素在定位时，对自身的包围盒计算方式
                rotation: 0,  //旋转角度
                origin: [66.5, 40.5],  //中心点
                scale: [1.0, 1.0],  //缩放
                style: {
                    image: situationhouseicon,  //图片路径
                    width: 129,
                    height: 65,
                    opacity: 1
                }
            },
            //数据集
            series: [
                {
                    name: '系列1',
                    type: 'bar',  //柱状图
                    stack: 'BB',  //数据堆叠，同个类目轴上配置相同stack的系列可以堆叠放置
                    barWidth: '15%',  //柱条的宽度，不设时自适应。
                    //高亮的图形样式和标签样式
                    emphasis: {
                        disabled: true,  //是否关闭高亮状态
                        focus: "series",  //在高亮图形时，是否淡出其它数据的图形以达到聚焦的效果
                    },
                    //图形的样式
                    itemStyle: {
                        opacity: "0.5",  //图形透明度，支持从 0 到 1 的数字
                        borderRadius: [15, 15, 0, 0],  //圆角半径，单位px
                        normal: {
                            //柱条的颜色，可设置渐变色或纯色，echarts.graphic.LinearGradient参数含义：前4个参数用于配置渐变色的起止位置, 依次对应从右到左/从下到上/从左到右/从上到下四个方位，第5个参数是一个数组, 用于配置颜色的渐变过程，包含offset和color两个参数，offset的范围是0 ~ 1, 用于表示位置, color表示颜色
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#02CDF5'
                            }, {
                                offset: 1,
                                color: '#02CDF5'
                            }]),
                        }
                    },
                    //图形上的文本标签，用于说明图形的数据信息，比如值，名称等
                    label: {
                        normal: {
                            show: true,  //是否显示
                            distance: 5,  //距离图形元素的距离
                            position: "left",  //标签的位置，例top / left / right / bottom / inside / insideLeft / insideRight / insideTop 等
                            //文本样式
                            textStyle: {
                                color: "#B78E11",
                                fontSize: "40",
                                fontWeight: "bold",
                                fontStyle: "italic",
                            },
                            formatter: "{b}",  //标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板：{a}：系列名series.name。{b}：数据名xAxis.data。{c}：数据值yAxis.data。{@xxx}：数据中名为 'xxx' 的维度的值，如 { @product } 表示名为 'product' 的维度的值。{ @[n] }：数据中维度 n 的值，如 { @[3] } 表示维度 3 的值，从 0 开始计数。
                            overflow: "break", //文字超出宽度是否隐藏
                        }
                    },
                    //系列中的数据内容数组，数组项通常为具体的数据项
                    //1、只有一个X轴维度，是一维数组
                    data: [
                        100, 80, 100, 120, 200, 150,
                    ],
                    //2、当有多个X轴维度时，是二维数组
                    data: [
                        // 维度X   维度Y   其他维度 ...
                        [3.4, 4.5, 15, 43],
                        [4.2, 2.3, 20, 91],
                        [10.8, 9.5, 30, 18],
                        [7.2, 8.8, 18, 57]
                    ]
                },
                {
                    name: '系列2',
                    type: 'bar',  //柱状图
                    stack: 'BB',
                    label: {
                        normal: {
                            show: true,
                            position: "left",
                            textStyle: {
                                color: "#06AD80",

                            }
                        }
                    },
                    barWidth: '15%',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#FFC600'
                            }, {
                                offset: 1,
                                color: '#FFC600'
                            }]),
                        }
                    },
                    data: [
                        150, 280, 200, 100, 100, 120,
                    ]
                },
                {
                    type: 'line',  //折线图
                    showSymbol: true,  //是否展示数据点，默认为true
                    name: '系列3',
                    barWidth: 2,  //线条宽度
                    smooth: true, //是否为平滑曲线
                    showAllSymbol: true, //显示所有图形
                    symbol: "circle", //数据点图形：实心圆
                    symbolSize: 6, //数据点大小
                    itemStyle: {
                        normal: {
                            color: "rgba(209, 168, 0, 0.7)",  //折线颜色
                            shadowColor: "#29acff",  //背景阴影颜色
                            shadowBlur: 10,  //背景阴影长度
                            borderWidth: 2,  //边框宽度
                            borderColor: "#fff",  //边框颜色  
                        }
                    },
                    //折线区域样式
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(209, 168, 0, 0.6)',
                        }, {
                            offset: 0.1,
                            color: 'rgba(209, 168, 0, 0.1)',
                        }])
                    },

                },
                {
                    z: 1000,  //显示层级
                    name: '系列4',
                    type: 'pie',  //饼图
                    radius: ['10%', '40%'],  //饼图的半径，可以为如下类型：number：直接指定外半径值；string：例如，'20%'，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度；Array：数组的第一项是内半径，第二项是外半径。
                    center: ['20%', '50%'],  //饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
                    data: source,
                    roseType: "radius",  //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小；'area' 所有扇区圆心角相同，仅通过半径展现数据大小
                    silent: false,  //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            shadowColor: '#438bff',
                            shadowBlur: 20
                        },
                    },
                    //每个图形的起始位置
                    minAngle: 15,
                    startAngle: 315,
                    //标签的视觉引导线配置
                    labelLine: {
                        show: false,
                        normal: {
                            lineStyle: {
                                color: "rgb(98,137,169)",
                            },
                            smooth: 0.2,  //指示线是否平滑
                            length: 10,  //第一段长度
                            length2: 20,  //第二段长度
                        },
                    },
                }

            ]
        }

代码007普通

打赏 收藏 海报 链接