- 在图例后面添加所有数据之和
- 修改之后 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),},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>`;});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;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({tooltip: {show: "true",trigger: "axis",textStyle: {fontSize: this.fontSize(0.15),},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>`;});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, },},],yAxis: [{type: "value",min: 0,minInterval: 0.5,splitLine: {show: true,lineStyle: {color: "#023052",type: "dashed",},},axisLine: {show: false,},axisLabel: {textStyle: {color: "#fff",fontSize: this.fontSize(0.13),},},},],dataZoom: [{xAxisIndex: 0, show: false, type: "inside", startValue: 0, endValue: this.maxNum - 1, },{xAxisIndex: 0, show: false, type: "inside", startValue: 0, endValue: this.maxNum - 1, },],series: [{name: " ",type: "line",smooth: true, symbol: "none", lineStyle: {normal: {width: this.fontSize(0.01),color: color[0], },},itemStyle: {normal: {color: color[0],},},areaStyle: {normal: {color: new this.$echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: color[0],},{offset: 1,color: color1[0],},],false),shadowBlur: 20, },},label: {normal: {show: false,position: "top", textStyle: {color: color[0],Size: this.fontSize(0.15),fontWeight: 700,},},},},{name: " ",type: "line",smooth: true, symbol: "none", lineStyle: {normal: {width: this.fontSize(0.01),color: color[1], },},itemStyle: {normal: {color: color[1],},},areaStyle: {normal: {color: new this.$echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: color[1],},{offset: 1,color: color1[1],},],false),shadowBlur: 20, },},label: {normal: {show: false,position: "top", textStyle: {color: color[1],Size: this.fontSize(0.13),fontWeight: 700,},},},},{name: " ",type: "line",smooth: true, symbol: "none", lineStyle: {normal: {width: this.fontSize(0.01),color: color[2], },},itemStyle: {normal: {color: color[2],},},areaStyle: {normal: {color: new this.$echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: color[2],},{offset: 1,color: color1[2],},],false),shadowBlur: 20, },},label: {normal: {show: false,position: "top", textStyle: {color: color[2],Size: this.fontSize(0.13),fontWeight: 700,},},},},],});},},
};
</script>
<style lang="scss" scoped>
@import "./css/rem.scss";.item {width: 33%;
}
</style>
