- 在图例后面添加所有数据之和
- 修改之后 series 中的name之后导致tooltip也加上了
- 重新自定义tooltip，去掉总量统计
核心代码
- 监听数据改变计算总量
- 修改name字段
- 自定义 tooltip
// 计算每条线的总和
const sum1 = this.VALUE1.reduce((acc, val) => acc + val, 0);
const sum2 = this.VALUE2.reduce((acc, val) => acc + val, 0);
const sum3 = this.VALUE3.reduce((acc, val) => acc + val, 0);
series: [
{
name: `火灾总量(${sum1})`,
data: this.VALUE1,
},
{
name: `轻微火灾(${sum2})`,
data: this.VALUE2,
},
{
name: `非轻微火灾(${sum3})`,
data: this.VALUE3,
},
],
tooltip: {
show: "true",
trigger: "axis",
textStyle: {
fontSize: this.fontSize(0.15),
},
// ☆☆☆☆☆☆自定义tooltip，去掉图例后面添加的总数值统计
formatter: function (params) {
console.log("params", params);
let content = "";
params.forEach((param) => {
const value = param.value;
const seriesName = param.seriesName;
const marker = param.marker;
content += `<div>${marker}${
seriesName.split("(")[0]
} ：${value}</div>`;
});
// 构建tooltip的内容
return content;
},
},
整个折线图组件
<template>
<div class="w100 h100" ref="chart"></div>
</template>
<script>
import resize from "./mixins/resize";
let color = ["rgba(28, 214, 170,1)", "#FFF200", "#FF6200"];
let color1 = [
"rgba(28, 214, 170,.1)",
"rgba(255, 255, 0,.1)",
"rgba(255, 98, 0,.1)",
];
export default {
mixins: [resize],
props: ["list", "type"],
watch: {
list: {
// 深度监听没有旧值
handler(val) {
console.log(val, "tab3双折现");
this.initChart();
this.xAxisData =
this.type == 1 ? val.monthOrDayOrTimeList : val.monthOrDayOrTimeList;
this.VALUE1 =
this.type == 1 ? val.policeTotalCountList : val.policeTotalCountList;
this.VALUE2 = this.type == 1 ? val.minorFireList : val.minorFireList;
this.VALUE3 =
this.type == 1 ? val.notMinorFireList : val.notMinorFireList;
// this.xAxisData = val.map((item) => item.date);
// this.VALUE1 = val.map((item) => 50 - item.sugarAfterMeal);
// this.VALUE2 = val.map((item) => item.sugarBeforeMeal);
// this.VALUE3 = val.map((item) => item.sugarAfterMeal);
// 计算每条线的总和
const sum1 = this.VALUE1.reduce((acc, val) => acc + val, 0);
const sum2 = this.VALUE2.reduce((acc, val) => acc + val, 0);
const sum3 = this.VALUE3.reduce((acc, val) => acc + val, 0);
let option = {
xAxis: [
{
data: this.xAxisData,
},
],
series: [
{
name: `火灾总量(${sum1})`,
data: this.VALUE1,
},
{
name: `轻微火灾(${sum2})`,
data: this.VALUE2,
},
{
name: `非轻微火灾(${sum3})`,
data: this.VALUE3,
},
],
};
this.chart.setOption(option);
if (this.timeId) {
clearInterval(this.timeId);
this.timeId = null;
}
if (this.xAxisData.length > this.maxNum) {
let num = 0;
this.timeId = setInterval(() => {
if (num + this.maxNum == this.xAxisData.length) {
num = 0;
} else {
num += 1;
}
let option = {
dataZoom: [
{
startValue: num, // 从头开始。
endValue: num + this.maxNum - 1, // 一次性展示几个
},
],
};
this.chart.setOption(option);
}, 3000);
}
},
// 这里是关键，代表递归监听的变化
deep: true,
},
},
data() {
return {
chart: null,
xAxisData: [],
VALUE3: [],
maxNum: 12, // 一次性展示几个。
timeId: null,
};
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart = null;
clearInterval(this.timeId);
this.timeId = null;
},
methods: {
init() {},
// 体温
initChart() {
this.chart = this.$echarts.init(this.$refs.chart);
this.chart.setOption({
// color: color,
tooltip: {
show: "true",
trigger: "axis",
textStyle: {
fontSize: this.fontSize(0.15),
},
// ☆☆☆☆☆☆自定义tooltip，去掉图例后面添加的总数值统计
formatter: function (params) {
console.log("params", params);
let content = "";
params.forEach((param) => {
const value = param.value;
const seriesName = param.seriesName;
const marker = param.marker;
content += `<div>${marker}${
seriesName.split("(")[0]
} ：${value}</div>`;
});
// 构建tooltip的内容
return content;
},
},
grid: {
top: "20%",
left: "6%",
right: "1%",
bottom: "4%",
containLabel: true,
},
legend: {
itemHeight: this.fontSize(0.13), //图例图标的高度
itemWidth: this.fontSize(0.2), //图例图标的宽度
itemGap: this.fontSize(0.23), //图例图标与文字间的间距
textStyle: {
color: "#fff",
borderColor: "#fff",
fontSize: this.fontSize(0.14),
},
top: 7,
right: 20,
},
// 横坐标设置
xAxis: [
{
type: "category",
boundaryGap: true,
//坐标轴
axisLine: {
lineStyle: {
color: "#2384B1", //横轴颜色
width: this.fontSize(0.01), //横轴粗细
},
},
axisLabel: {
interval: 0, // 显示所有标签
rotate: 30, // 倾斜标签以节省空间
textStyle: {
color: "#fff", // 横坐标颜色
fontSize: this.fontSize(0.13),
},
},
axisTick: {
show: true, //不显示坐标轴刻度
alignWithLabel: true, // 刻度线与标签对齐
},
// data: this.xAxisData,
},
],
// Y轴设置
yAxis: [
{
type: "value",
min: 0,
// max: 150,
minInterval: 0.5,
// 网格线
splitLine: {
show: true,
lineStyle: {
color: "#023052",
type: "dashed",
},
},
axisLine: {
show: false,
},
//坐标值标注
axisLabel: {
// formatter: "{value}", //右侧Y轴文字显示
textStyle: {
color: "#fff",
fontSize: this.fontSize(0.13),
},
},
},
],
//滑动条
dataZoom: [
{
xAxisIndex: 0, //这里是从X轴的0刻度开始
show: false, //是否显示滑动条，不影响使用
type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: this.maxNum - 1, // 一次性展示几个
},
{
xAxisIndex: 0, //这里是从X轴的0刻度开始
show: false, //是否显示滑动条，不影响使用
type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: this.maxNum - 1, // 一次性展示几个
},
],
series: [
{
name: " ",
type: "line",
smooth: true, //是否平滑曲线显示
symbol: "none", // circle | rect | roundRect | triangle | diamond | pin | arrow
lineStyle: {
normal: {
width: this.fontSize(0.01),
color: color[0], // 线条颜色
},
},
itemStyle: {
normal: {
color: color[0],
},
},
areaStyle: {
//区域填充样式
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: color[0],
},
{
offset: 1,
color: color1[0],
},
],
false
),
// shadowColor: color[0], //阴影颜色
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
},
},
label: {
normal: {
show: false,
position: "top", //在上方显示
textStyle: {
//数值样式
color: color[0],
Size: this.fontSize(0.15),
fontWeight: 700,
},
},
},
// data: this.goodRate, //折线图数据
},
{
name: " ",
type: "line",
smooth: true, //是否平滑曲线显示
symbol: "none", // circle | rect | roundRect | triangle | diamond | pin | arrow
lineStyle: {
normal: {
width: this.fontSize(0.01),
color: color[1], // 线条颜色
},
},
itemStyle: {
normal: {
color: color[1],
},
},
areaStyle: {
//区域填充样式
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: color[1],
},
{
offset: 1,
color: color1[1],
},
],
false
),
// shadowColor: color[1], //阴影颜色
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
},
},
label: {
normal: {
show: false,
position: "top", //在上方显示
textStyle: {
//数值样式
color: color[1],
Size: this.fontSize(0.13),
fontWeight: 700,
},
},
},
// data: this.goodRate, //折线图数据
},
{
name: " ",
type: "line",
smooth: true, //是否平滑曲线显示
symbol: "none", // circle | rect | roundRect | triangle | diamond | pin | arrow
lineStyle: {
normal: {
width: this.fontSize(0.01),
color: color[2], // 线条颜色
},
},
itemStyle: {
normal: {
color: color[2],
},
},
areaStyle: {
//区域填充样式
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: color[2],
},
{
offset: 1,
color: color1[2],
},
],
false
),
// shadowColor: color[2], //阴影颜色
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
},
},
label: {
normal: {
show: false,
position: "top", //在上方显示
textStyle: {
//数值样式
color: color[2],
Size: this.fontSize(0.13),
fontWeight: 700,
},
},
},
// data: this.goodRate, //折线图数据
},
],
});
},
},
};
</script>
<style lang="scss" scoped>
@import "./css/rem.scss";
.item {
width: 33%;
}
</style>
