参考博主「囍 . 囍」
原文链接：https://blog.csdn.net/weixin_39730483/article/details/109243287
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, //阴影垂直方向上的偏移距离。
}
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 +
"%"
);
}
},
};
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,
},
}, // 自定富文本样式
},
},
grid
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
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,
},
],
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 // 刻度线是否显示
}
}
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
}
},
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
}
}
}
}
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 // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）
},
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"},
}
}
}
}
]
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]
}, ]
事件
// 先去除已有的点击事件
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;
},
7759
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
