barOption = {
xAxis: {
// x轴
type: "category",
// 坐标轴刻度标签的相关配置
axisLabel: {
show: true,
color: "#c23531", // 标签的字体颜色
interval: 0, // 坐标轴刻度标签的显示间隔,默认会采用标签不重叠的策略间隔显示标签.设置成0强制显示所有标签，1表示隔一个标签显示一个标签，以此类推
rotate: 40, // 坐标轴刻度标签（逆时针）旋转40度显示，旋转的角度从 -90 度到 90 度。
formatter(params) {
// 刻度标签的内容格式器
// 标签过长大于4，显示...
if (params.length > 4) {
return params.substring(0, 4) + "...";
} else {
return params;
}
}
}
},
yAxis: {
// y轴
type: "value"
},
tooltip: {
// 提示框组件
trigger: "axis", // 触发类型:坐标轴触发,这个字段的功能是：在堆积柱状图的时候hover柱子的时候会出现整个柱子的数据，而不是只出现当前鼠标所在柱子区域的数据。'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
axisPointer: {
type: "shadow"
},
confine: true, // 是否将 tooltip 框限制在图表的区域内。当图表外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。
position: function(point, params, dom, rect, size) {
// console.info("当前鼠标所在位置", point[0], point[1])
// console.info("提示框大小", size.contentSize[0], size.contentSize[1])
// 提示框位置
var x = 0; // x坐标位置
var y = 0; // y坐标位置
// 当前鼠标位置
var pointX = point[0];
var pointY = point[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(params) {
// 提示框的内容格式器
const title = params[0].name;
let title1 = "";
let title2 = "";
let results = "";
if (title.length > 20) {
title1 = title.slice(0, 20);
title2 = title.slice(20);
} else {
title1 = title;
}
params.forEach(item => {
results +=
"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:" +
item["color"] +
"'></span>" +
item["seriesName"] +
"：" +
item["value"] +
"<br/>";
});
if (title2.length) {
return title1 + "</br>" + title2 + "</br>" + results;
} else {
return title1 + "</br>" + results;
}
}
},
grid: {
// 直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。
// left: "3%",
// right: "4%",
// bottom: "8%",
// containLabel: true // grid区域是否包含坐标轴的刻度标签,避免标签名字太长溢出
},
series: {
// 系列列表。每个系列通过 type 决定自己的图表类型
// name: "", // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
type: "bar", // line表示折线图、bar表示柱状图、pie表示饼图
stack: "数量", // 数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
barWidth: 20 // 柱条的宽度，不设时自适应。
// 这个itemStyle需要自己在文件中写
/**
itemStyle: {
// 图形样式
normal: {
// 表示默认样式
// echarts的渐变色生成器new echarts.graphic.LinearGradient(a,b,c,d,arr) a:1 arr中的颜色右到左 c:1 arr中的颜色左到右 b:1 arr中的颜色下到上 d:1 arr中的颜色上到下
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1, // 渐变是从上到下
[
{
offset: 0,
color: "#FFB7DD"
},
{
offset: 0.5,
color: "#FF0000"
},
{
offset: 1,
color: "#8C0044"
}
]
)
// barBorderRadius: [5, 5, 5, 5] //圆角半径（顺时针左上，右上，右下，左下）
}
} */
},
legend: {
// icon: "rect", // 图例项的icon,类型包括 circle(圆形),rect(正方形),roundRect(圆角正方形),triangle(三角形),diamond(菱形),pin(大头针行),arrow(箭头形),none(无图例项的icon)
show: true,
width: "320",
top: "5%",
type: "scroll", // 图例的类型:plain普通图例 scroll可滚动翻页的图例。当图例数量较多时可以使用。
padding: [0, 20],
textStyle: {
// color: "#BBCEE8"
color: "#000"
},
pageIconColor: "#ffbe1c", // 翻页按钮的颜色。
pageTextStyle: {
// 图例页信息的文字样式。
color: "#BBCEE8"
},
pageIconSize: 12, // 翻页按钮的大小
tooltip: {
show: true
},
data: [], // legend的data和series的name相同,legend才会显示
formatter: function(params) {
if (params.length > 20) {
return params.slice(0, 20) + "...";
} else {
return params;
}
}
},
dataZoom: [
// dataZoom组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数 据整体，或者去除离群点的影响。
{
type: "slider",
show: true,
xAxisIndex: [0], // 控制对应的x轴，这里表示这个dataZoom控制第一个x轴
height: 8,
borderColor: "#d0001c",
fillerColor: "#FF00ff", // 滑块颜色
bottom: "8%", // 滚动条距离页面底部的距离
// minValueSpan: 12, // 用于限制窗口大小的最小值, 最少显示10条数据
startValue: 0, // 数据窗口范围的起始数值
endValue: 10, // 数据窗口范围的结束数值
showDataShadow: false, // 是否显示数据阴影 默认auto
showDetail: false // 即拖拽时候是否显示详细数值信息 默认true
// start: 0, // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
// end: 30 // 数据窗口范围的结束百分比。范围是：0 ~ 100。滑块的长度，如果当前显示10条数据，那滑块的长度从start: 0到end: 30（0.3*10=3）的位置的长度，此算法适用于没有配置minValueSpan（强制显示多少条数据）的时候
},
{
type: "inside",
xAxisIndex: [0], // 控制对应的x轴，这里表示这个dataZoom控制第一个x轴
// minValueSpan: 12, // 最少显示16条数据
startValue: 0, // 数据窗口范围的起始数值
endValue: 10 // 数据窗口范围的结束数值
// start: 0, // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
// end: 30 // 数据窗口范围的结束百分比。范围是：0 ~ 100。滑块的长度，如果当前显示10条数据，那滑块的长度从start: 0到end: 30（0.3*10=3）的位置的长度，此算法适用于没有配置minValueSpan（强制显示多少条数据）的时候
}
]
};```
版权声明：本文为qq_41401025原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。