option下可以用的属性
1. backgroundColor:"#003366" (全局默认背景颜色);
2. color: ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed','#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0','#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700','#6699FF', '#ff6666', '#3cb371', '#b8860b', '#30e0e0']；
- Echarts - title 属性
title:{ x:"left", // 'left' | 'right' | 'center' | '100px' y:"4%", // 'top' | 'bottom' | 'center' | '100px' // 标题 show: true, //是否显示 text: "标题内容", textStyle: { color: "#fff", // 主标题文字的颜色。 fontStyle: "normal", // 主标题文字字体的风格。 'normal' 'italic' 'oblique' fontWeight: "normal", // 主标题文字字体的粗细。 'normal' 'bold' 'bolder' 'lighter' 500|600 fontFamily: "sans-serif", // 主标题文字的字体系列。 fontSize: 18, // 字体大小 lineHeight: "30", // 行高 // width ... , // 文字块的宽度 // height ... , // 文字块的高度 textBorderColor: "transparent", // 文字本身的描边颜色。 textBorderWidth: 0, // 文字本身的描边宽度。 textShadowColor: "transparent", // 文字本身的阴影颜色。 textShadowBlur: 0, // 文字本身的阴影长度。 textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。 textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。 }, subtext: "bb", // 副标题文本 subtextStyle: { color: "red", fontSize: "16", }, //副标题样式 textAlign: "auto", //水平对齐'auto'、'left'、'right'、'center' textVerticalAlign: "auto", // 垂直对齐 'auto'、'top'、'bottom'、'middle' triggerEvent: false, // 是否触发事件 padding: 5, // 标题内边距 5/[5,2,4,7] itemGap: 10, //主副标题之间的间距 left: 10, // 距离 left top right bottom x: "center", // 水平安放位置，默认为左对齐，可选为：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px） y: "4%", // 垂直安放位置，默认为全图顶端，可选为：// 'top' ¦ 'bottom' ¦ 'center'¦ {number}（y坐标，单位px） backgroundColor: "pink", // 标题背景色 borderColor: "#ccc", // 标题的边框颜色 borderWidth: 5, // 标题的边框线宽。 borderRadius: 2, // 圆角半径 shadowBlur: 10, //图形阴影的模糊大小 shadowColor: "rgba(0, 0, 0, 0.5)", // 阴影颜色 shadowOffsetX: 5, // 阴影水平方向上的偏移距离。 shadowOffsetY: 5, //阴影垂直方向上的偏移距离。 }
2.Echarts - tooltip 属性
3. Echarts - legend 属性tooltip ={ //提示框组件 trigger: 'item', //触发类型,'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 triggerOn:"mousemove", //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发 showContent:true, //是否显示提示框浮层 alwaysShowContent:true, //是否永远显示提示框内容 showDelay:0, //浮层显示的延迟，单位为 ms hideDelay:100, //浮层隐藏的延迟，单位为 ms enterable:false, //鼠标是否可进入提示框浮层中 confine:false, //是否将 tooltip 框限制在图表的区域内 transitionDuration:0.4, //提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动 position:['50%', '50%'], //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧， formatter:"{b0}: {c0}<br />{b1}: {c1}", //提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等 backgroundColor:"transparent", //标题背景色 borderColor:"#ccc", //边框颜色 borderWidth:0, //边框线宽 padding:5, //图例内边距，单位px 5 [5, 10] [5,10,5,10] textStyle:mytextStyle, //文本样式 axisPointer: { // 鼠标放在 type: 'cross', //默认为line，line直线，cross十字准星，shadow阴影 crossStyle: { color: '#fff' }, lineStyle: { //鼠标放上去的样式 color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "rgba(255,255,255,0)", // 0% 处的颜色 }, { offset: 0.5, color: "rgba(255,255,255,1)", // 100% 处的颜色 }, { offset: 1, color: "rgba(255,255,255,0)", // 100% 处的颜色 }, ], global: false, // 缺省为 false }, }, }, formatter: function (value) { for (var i = 0; i < value.length; i++) { return ( value[i].seriesName + "<br/>" + value[i].name + unit + "：" + value[i].value + "%" ); } }, };
4. Echarts-grid 属性legend: { show: true, //是否显示 type: "plain", // 图例的类型 'plain':普通图例 'scroll':可滚动翻页的图例 zlevel: 1, // 所有图形的 zlevel 值。 icon: "circle",类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none top: "5%", // bottom:"20%" // 组件离容器的距离 right: "5%", //left:"10%" // // 组件离容器的距离 width: "auto", // 图例组件的宽度 height: "auto", // 图例组件的高度 height: 150, orient: "horizontal", // 图例列表的布局朝向。 'horizontal' 'vertical' align: "auto", // 图例标记和文本的对齐 padding: 5, // 图例内边距 itemWidth: 6, // 图例标记的图形宽度。 itemGap: 20, // 图例每项之间的间隔。 itemHeight: 14, // 图例标记的图形高度。 symbolKeepAspect: true, // 如果图标（可能来自系列的 symbol 或用户自定义的 legend.data.icon）是 path:// 的形式，是否在缩放时保持该图形的长宽比。 formatter: function (name) { return '{a|text}{a| }{b|' + name + '}' }, selectedMode: true, // 图例选择的模式， inactiveColor: "#ccc", // 图例关闭时的颜色。 textStyle: { color: "#556677", // 文字的颜色。 fontStyle: "normal", // 文字字体的风格。 fontWeight: "normal", // 文字字体的粗细。 'normal' 'bold' 'bolder' 'lighter' 100 | 200 | 300 | 400... fontFamily: "sans-serif", // 文字的字体系列。 fontSize: 12, // 文字的字体大小。 lineHeight: 20, // 行高。 backgroundColor: "transparent", // 文字块背景色。 borderColor: "transparent", // 文字块边框颜色。 borderWidth: 0, // 文字块边框宽度。 borderRadius: 0, // 文字块的圆角。 padding: 0, // 文字块的内边距 shadowColor: "transparent", // 文字块的背景阴影颜色 shadowBlur: 0, // 文字块的背景阴影长度。 shadowOffsetX: 0, // 文字块的背景阴影 X 偏移。 shadowOffsetY: 0, // 文字块的背景阴影 Y 偏移。 // width: 50, // 文字块的宽度。 默认 // height: 40, // 文字块的高度 默认 textBorderColor: "transparent", // 文字本身的描边颜色。 textBorderWidth: 0, // 文字本身的描边宽度。 textShadowColor: "transparent", // 文字本身的阴影颜色。 textShadowBlur: 0, // 文字本身的阴影长度。 textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。 textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。 rich: { a: { color: "red", lineHeight: 10, }, b: { color: "#fff", lineHeight: 10, }, }, // 自定富文本样式 }, },
5. Echarts -xAxis 属性grid:{ x: 80, //top:"15%" | right:"3%" | left:"2%" | bottom:"12%" y: 60, x2: 80, y2: 60, // width: {totalWidth} - x - x2, // height: {totalHeight} - y - y2, backgroundColor: ‘rgba(0,0,0,0)‘, borderWidth: 1, borderColor: '#ccc', containLabel: true, //防止坐标轴标签溢出 } dataZoom: [ { type: 'slider', show: true, height: 20,//组件高度 xAxisIndex: [0], bottom: 0,//右边的距离 start: 0, end: 1, zoomLock: false, zoomOnMouseWheel: true, //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。 moveOnMouseMove: true, handleIcon: "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z", handleSize: "110%", /滑动条的左右两个滑动条的大小 handleColor: '#ddd',//h滑动图标的颜色 handleStyle: { color: "#01AD83", borderColor: "#cacaca", borderWidth: "1", shadowBlur: 2, background: "#ddd", shadowColor: "#ddd", }, textStyle: { color: "rgba(1,173,131,0.5)", }, // fillerColor: "rgba(1,173,131,0.4)", fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变 //给第一个设置0，第四个设置1，就是垂直渐变 offset: 0, color: '#1eb5e5' }, { offset: 1, color: '#5ccbb1' }]), backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色 showDataShadow: false,//是否显示数据阴影 默认auto showDetail: false,//即拖拽时候是否显示详细数值信息 默认true borderColor: "rgba(1,173,131,0.5)", }, //下面这个属性是里面拖到 { type: "inside", show: true, height: 15, start: 0, end: 1, }, ],
6. Echarts -yAxis 属性xAxis: { boundaryGap: false,// 刻度离纵轴有无间隙，默认true有间距 type: 'category', //'value' 数值轴，适用于连续数据。 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。 'log' 对数轴。适用于对数数据。 position:'bottom', // 'bottom' | 'top' name: '(ETD)',// 横轴名称 nameLocation: "center", nameTextStyle:{ fontSize:12, fontWeight:'bold', color:'#ff0033', //align:'left', }, nameLocation:'middle',//坐标轴的位置 'start' | 'center' | 'end' nameGap:50,//坐标轴名称与轴线之间的距离 nameRotate:90,//坐标轴名字旋转角度值, axisLabel : {//坐标轴刻度标签的相关设置。 // clickable:true,//并给图表添加单击事件 根据返回值判断点击的是哪里 interval: 0, **//注：interval 坐标轴刻度标签的显示间隔(在类目轴中有效哦)，默认会采用标签不重叠的方式显示标签（也就是默认会将部分文字显示不全） 可以设置为0强制显示所有标签，如果设置为1，表示隔一个标签显示一个标签，如果为3，表示隔3个标签显示一个标签，以此类推** inside:false, // 标签朝内还是朝外 rotate: 40,// 文字倾斜度 //-----------文字竖直显示-------------------- formatter:function(value){ return value.split("").join("\n"); } //-----------------------------------两个字垂直显示---------------------------- formatter:function(value) { debugger var ret = "";//拼接加\n返回的类目项 var maxLength = 2;//每项显示文字个数 var valLength = value.length;//X轴类目项的文字个数 var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数 if (rowN > 1)//如果类目项的文字大于3, { for (var i = 0; i < rowN; i++) { var temp = "";//每次截取的字符串 var start = i * maxLength;//开始截取的位置 var end = start + maxLength;//结束截取的位置 //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧 temp = value.substring(start, end) + "\n"; ret += temp; //凭借最终的字符串 } return ret; } else { return value; } } //------------------------------------------------------------------------------------ textStyle:{ color:'#fff, fontSize:'20px', align:'center' } }, axisLine:{ lineStyle:{ color:'red' //x轴颜色 }, symbol:['none','arrow'], //轴线两边的箭头 symbolSize:[8, 12] //箭头大小 }, data: ['2020-07-08 周三','2020-07-09 周四',].map((str) => { return str.replace(' ','\n') }),// 横轴坐标值 // data: [{value:'1',textStyle:{ color:'#ff0033', }}, '2/7', '3', '4', '5', '6', '7']//每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名 splitLine: { show: false， lineStyle:{ //属性lineStyle（详见lineStyle）控制线条样式 color:['#ccc'], width:1, type:'solid' } }, // 取消X轴的网格 splitArea:{ //分隔区域 show:true, areaStyle:{ color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'], } }, axisTick: { // 显示隐藏刻度线 inside:true, //刻度朝内还是朝外 alignWithLabel: true // 刻度线是否显示 } }
7. Echarts-bar 属性yAxis: { type: 'value', name: " 金额( 单位: 万元 )", nameRotate: 90, nameLocation: "middle", nameTextStyle: { color: '#ffffff', padding: [0, 0, 0, -10] ,//调整位置 }, scale: true,//自动适配y轴，不需要必须从0开始 或者选择下边这种设置最大最小值 min: function(value) {return value.min;}, max: function(value) {return value.max;}, axisLine: { show: false, lineStyle: { type: 'dashed', color: 'rgba(135,140,147,0.8)' }， axisLabel: { show: true, textStyle: { color: "#fff", fontSize: "16", }, formatter:function(value){ //设置Y轴显示的名字，超出做..隐藏 var res = value; if(res.length >7){ res = res.substring(0,6) + ".." } return res; } }, }, splitLine: { show: true, lineStyle: { type: 'dashed', //背景线为虚线 color: 'rgba(135,140,147,.8)' //左侧显示线 } }, axisLabel: { formatter: '{value}', color: '#fff', fontSize: 14 } },
8. Echarts - line 属性bar:{ barMinHeight: 0, // 最小高度改为0 // barWidth: null, // 默认自适应 colorBy: "series", //按照系列分配调色盘中的颜色，同一系列中的所有数据都是用相同的颜色；【从调色盘 option.color 中取色的策略】 barGap: '30%', // 柱间距离，默认为柱形宽度的30%，可设固定值 barCategoryGap: '20%', // 类目间柱形距离，默认为类目间距的20%，可设固定值,需要注意的是，如果设置了barWidth 该属性将不起作用 label: { show: true, // 柱子顶部的数值 position: "top", fontSize: 12, color: "#fff", offset: [0, -10], fontWeight: 'bolder' ， formatter: function (params) { let num = params.value; if (num > 1024) { return (num / 1024).toFixed(2) + "GB"; } else if (num < 1024 && num > 0) { return num.toFixed(2) + "MB"; } else { return ""; } }, }, itemStyle: { normal: { // color: '各异', color: function (params) { return colors[params.dataIndex]; }, //可以设置每个柱子的颜色 barBorderColor: '#fff', // 柱条边线 barBorderRadius: 0, // 柱条边线圆角，单位px，默认为0 barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1 label: { //z柱状图上显示数字 show: false position: 'top'，// 默认自适应，水平布局为'top'，垂直布局为'right'，可选为'inside'|'left'|'right'|'top'|'bottom|insideTop' textStyle: { color: "#01E6FF", }, // 默认使用全局文本样式，详见TEXTSTYLE // formatter: function (p) { // return p.value > 0 ? p.value : ""; //}, formatter: function (params) { let num = params.value; if (num > 1024) { return (num / 1024).toFixed(2) + "GB"; } else if (num < 1024 && num > 0) { return num.toFixed(2) + "MB"; } else { return ""; } }, } }, emphasis: { // 鼠标移入的样式 // color: '各异', barBorderColor: 'rgba(0,0,0,0)', // 柱条边线 barBorderRadius: 0, // 柱条边线圆角，单位px，默认为0 barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1 label: { show: false // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为 // 'inside'|'left'|'right'|'top'|'bottom' // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE } } } }
9. Echarts - pie 属性line: { itemStyle: { normal: { // color: 各异, label: { show: false // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为 // 'inside'|'left'|'right'|'top'|'bottom' // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE }, lineStyle: { width: 2, type: 'solid', normal: { //线的渐变颜色 color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [ { offset: 0, color: "#24D5CC", }, { offset: 1, color: "#7A50F1", }, ]), opacity: 0.75, }, shadowColor: 'rgba(0,0,0,0)', //默认透明 阴影 shadowBlur: 5, shadowOffsetX: 3, shadowOffsetY: 3 }， itemStyle: { normal: { lineStyle: { width: 3, //设置线条粗细 }, }, }, areaStyle: { //折线图覆盖面积 color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ { offset: 0, color: "rgba(255,80,124,0)", }, { offset: 1, color: "rgba(255,80,124,0.35)", }, ]), //渐变色 }, }, emphasis: { // 鼠标移入 // color: 各异, label: { show: false // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为 // 'inside'|'left'|'right'|'top'|'bottom' // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE } } }, //smooth : false, //是否平滑 //symbol: null, // 拐点图形类型,可以自己设置图片 symbolSize: 2, // 拐点图形大小 itemStyle: { //拐点样式 normal: { color: this.params.color[index], borderColor: "#fff", type:'dotted' //'dotted'虚线 'solid'实线 }, }, symbolOffset: ["0", "-8"],//拐点位置 //symbolRotate : null, // 拐点图形旋转控制 showAllSymbol: false // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略） },
10. Echarts - series 属性// 横向柱状图 series: [ { type: "pie", radius: ["45%", "60%"], center: this.center, data: echartData, hoverAnimation: false, itemStyle: { normal: { borderColor: bgColor, borderWidth: 2 } }, labelLine: { normal: { length: 20, // length2: 100, //外边的引导线的长度 lineStyle: { color: "#999" } } }, label: { normal: { //https://echarts.apache.org/zh/option.html#grid.tooltip.formatter //{a},{b},{c},{d}各代表不同的值 // formatter: "{font|{b}}\n{hr|}\n{font|{d}%}", formatter: params => { return ( "{icon|●}{name|" + params.name + "}{value|" + formatNumber(params.value) + "}" ); }, padding: [0, 0, 0, 0], rich: { icon: { fontSize: 16 }, name: { fontSize: 14, padding: [0, 10, 0, 4], color: "#666" }, value: { fontSize: 16, fontWeight: "bold", color: "#666" }, hr: { height: 0, borderWidth: 1, width: "100%", borderColor: "#999" } } } } } ]
echarts 点击事件// 横向柱状图 series: [{ name: '标准化', type: 'bar', barWidth: 12, // 柱子宽度 label: { show: true, position: 'right', // 位置 color: '#A7D6F4', fontSize: 14, distance: 15, // 距离 formatter: '{c} 万公里' // 这里是数据展示的时候显示的数据 }, // 柱子上方的数值 itemStyle: { barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下） color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#51C5FD' }, { offset: 1, color: '#005BB1' }], false), // 渐变 }, data: [400,380,360,340,320,300,280,260,240,220] }, ]
echarts 点击事件 that.chart.off("click"); //防止重复调接口 that.chart.on("click", function(params) { that.$emit("handleScoreDialog", params); });