努力到无能为力,拼搏到感动自己
option下可以用的属性
- backgroundColor:“#003366” (全局默认背景颜色);
- color: [‘#ff7f50’, ‘#87cefa’, ‘#da70d6’, ‘#32cd32’, ‘#6495ed’,
‘#ff69b4’, ‘#ba55d3’, ‘#cd5c5c’, ‘#ffa500’, ‘#40e0d0’,
‘#1e90ff’, ‘#ff6347’, ‘#7b68ee’, ‘#00fa9a’, ‘#ffd700’,
‘#6699FF’, ‘#ff6666’, ‘#3cb371’, ‘#b8860b’, ‘#30e0e0’]
1. 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
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鼠标所在图形上侧,左侧,下侧,右侧,
// position 回调函数 当tooltip 被遮挡,显示不全时可以使用以下回调
position: function (point, params, dom, rect, size) {
return {left: '40%', bottom: 20};
},
position: function (point, params, dom, rect, size) {
// 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下
// 提示框位置
var x = 0; // x坐标位置
var y = 0; // y坐标位置
// 当前鼠标位置
var pointX = point[0];
var pointY = point[1];
// 外层div大小
// var viewWidth = size.viewSize[0];
// var viewHeight = size.viewSize[1];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = 5;
} else { // 左边放的下
x = pointX - boxWidth;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 5;
} else { // 上边放得下
y = pointY - boxHeight;
}
return [x, y];
},
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 +
"%"
);
}
},
formatter: (p) => {
// tooltip 浮窗显示icon 默认是圆的p[index].marker,可以自己写矩形,下边是两种例子,代码不全
p.map((item, index) => {
title = item.name;
num +=
"<p>" +
"<div style='display:inline-block;margin-right:4px;width:8px;height:8px;background-color:" +
item.color +
";'></div>" +
item.seriesName +
"<span style='float:right;font-weight:600;color:#666;padding-left:20px'>" +
item.data +
"</span></p>";
numThree +=
"<p>" +
p[index].marker +
item.seriesName +
"<span style='float:right;font-weight:600;color:#666;padding-left:20px'>" +
this.tableData[this.tableHeader[index].name].light[
item.dataIndex
] +
"</span></p>";
})
}
};
3. Echarts - legend
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,
},
}, // 自定富文本样式
},
},
4. Echarts - grid
grid 为直角坐标系内绘图网格,可以设置 x y x2 y2 等值。
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,
},
],
5. Echarts - xAxis
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 // 刻度线是否显示
}
}
6. Echarts - yAxis
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
}
},
7. Echarts - bar
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
}
}
}
}
8. Echarts - line
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 // 标志图形默认只有主轴显示(随主轴标签间隔隐藏策略)
},
9. Echarts - pie
// 横向柱状图
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|${name}}\n{percent|${percent} %}`;
},
padding: [0, 0, 0, 0],
rich: {
icon: {
fontSize: 16,
color: "inherit",//继承父颜色
},
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"
},
//自定义颜色
grey:{color:"#979797"},
}
}
}
}
]
10. Echarts - series
// 横向柱状图
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);
});
// 过滤值为0的数据
labelSettingConfig(item) {
if (item.value == 0) {
item.label = {
show: false,
};
item.labelLine = {
show: false,
};
}
return item;
},