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

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],  //圆角半径，单位pxnormal: {//柱条的颜色，可设置渐变色或纯色&#aphic.LinearGradient参数含义：前4个参数用于配置渐变色的起止位置, 依次对应从右到左/从下到上/从左到右/从上到下四个方位，第5个参数是一个数组, 用于配置颜色的渐变过程，包含offset和color两个参数，offset的范围是0 ~ 1, 用于表示位置, color表示颜色color: aphic.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: aphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#FFC600'}, {offset: 1,color: '#FFC600'}]),}},data: [150, 280, 200, 100, 100, 120,]},{type: 'line',  //折线图showSymbol: true,  //是否展示数据点，默认为truename: '系列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: aphic.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,  //第二段长度},},}]}