做项目的时候难免会遇到配置可视话图表的时候，经常会为了一个功能查找很久，于是把做过的功能比较齐全的折线图具体配置项纪录下来
- 更换鼠标提示框背景图片，动态设置悬浮框的位置
- 更改折线图表格背景颜色
- 更改坐标轴样式，设置坐标轴偏移量
- 设置折线样式，主图位置
- 设置折线拐点样式
- 设置指示线和标示线
- 设置折线以下面积区域渐变色
// 获取echarts图
initChart(dataNum, date, flag) {
let value = this.echartsValue;
let arr = [
value.thresholdHigh,
value.thresholdHighHigh,
value.thresholdLow,
value.thresholdLowLow,
];
// 取零数为整数，如15变成20，以便设置y轴最大值
let max = Math.ceil(Math.max(...arr) / 10) * 10;
const barChart = Echarts.init(this.$refs["lineCharts"], "shine");
let option = {
color: ["#002339"],
tooltip: {
trigger: "axis",
// 设置浮框跟随鼠标并显示在鼠标上方，这个功能不能太薄精确的显示在鼠标上方
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];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = 6;
} else {
// 左边放的下
x = pointX - boxWidth / 2;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
// if (boxHeight > pointY) {
// y = 5;
// } else {
// // 上边放得下
y = pointY - boxHeight;
// }
return [x, y];
},
// 更换悬浮框的背景图片
backgroundColor: "transparent",
borderWidth: 0,
formatter: function (params) {
var str = `<div style = "background:url( ${require("../../assets/images/production/left/line.png")}) no-repeat center center ;padding: 0 10px;height:26px; text-align: center;color: #fff">${
params[0].data
}</div>`;
return str;
},
//垂直指示线样式更改
axisPointer: {
lineStyle: {
width: 1,
type: "dotted",
color: "#27C6E0",
},
},
},
// echarts主图位置移动
grid: {
show: true,
top: "10%",
left: "12%",
bottom: "12%",
right: "5%",
// containLabel: true,
// 设置折线图表格区域背景颜色
backgroundColor: "#002339",
borderColor: "transparent",
},
xAxis: {
type: "category",
data: date,
// 更改坐标轴文字颜色，文字大小，设置最小间隔，可以最大程度的把x轴数据显示完全
axisLabel: {
interval: 0,
textStyle: {
color: "#fff",
fontSize: 15,
},
},
// 是否显示刻度
axisTick: {
show: false,
},
// 是否显示表格背景线
splitLine: { show: false },
// 折线颜色
axisLine: {
lineStyle: {
color: "#45515D",
width: 1,
},
},
},
yAxis: {
type: "value",
// 坐标轴位置偏移
offset: 8,
// 最小显示刻度
minInterval: 1,
// 最大值
max: max,
// interval: 25,
// 坐标轴文字颜色
axisLabel: {
textStyle: {
color: "#fff",
fontSize: 15,
},
},
// 设置坐标轴颜色
axisLine: {
lineStyle: {
color: "#45515D",
width: 1,
},
},
},
series: [
{
data: dataNum,
type: "line",
// 是否显示折线上面的点
showSymbol: true,
// 是否平滑曲线显示
smooth: true,
// 折线拐点样式
symbol: "circle",
symbolSize: 4,
// 折线点的样式
itemStyle: {
color: "#FFFFFF",
borderColor: "#2FE4FF",
borderWidth: 1,
},
//折线下面的面积区域颜色
// areaStyle: {
// z: 10,
// type: "default",
// // 渐变色实现
// color: new Echarts.graphic.LinearGradient(
// 0,
// 0,
// 0,
// 1,
// // 变化度
// // 三种由深及浅的颜色
// [
// {
// offset: 0,
// color: "#0C556C",
// },
// {
// offset: 0.5,
// color: "#074157",
// },
// {
// offset: 1,
// color: "rgba(4, 53, 76, .7)",
// },
// ]
// ),
// },
lineStyle: {
// 折线的样式
width: 1,
type: "solid",
color: "#2BD7F1",
},
/*
* 标记的四条虚线
*/
markLine: {
// 是否显示虚线箭头
symbol: "none",
// 图形是否不响应和触发鼠标事件
silent: true,
// 线的样式
lineStyle: { normal: { type: "dashed" } },
// 虚线后面label的显示样式
label: {
position: "insideEndTop",
formatter: "{b}",
color: "#fff",
},
data: [
{
name: "上限",
yAxis: value.thresholdHigh ? value.thresholdHigh : -1,
lineStyle: { width: 1.656, color: "#ff6367" },
},
{
name: "上上限",
yAxis: value.thresholdHighHigh ? value.thresholdHighHigh : -1,
lineStyle: { width: 1.656, color: "#D8D8D8" },
},
{
name: "下限",
yAxis: value.thresholdLow ? value.thresholdLow : -1,
lineStyle: { width: 1.656, color: "#46C67F" },
},
{
name: "下下限",
yAxis: value.thresholdLowLow ? value.thresholdLowLow : -1,
lineStyle: { width: 1.656, color: "#46C67F" },
// label: { show: false },
},
],
},
},
],
};
barChart.setOption(option);
},最终效果图
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
