|
@@ -284,12 +284,17 @@ export default {
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
+
|
|
|
+ markLineData: {
|
|
|
+ type: Array,
|
|
|
+ defaylt: () => [],
|
|
|
+ },
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
id: "",
|
|
|
chart: null,
|
|
|
- color: ["#1DA0D7","#05BB4C","#323E6F", "#EDB32F", "#DB5520"],
|
|
|
+ color: ["#1DA0D7", "#05BB4C", "#323E6F", "#EDB32F", "#DB5520"],
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
@@ -336,7 +341,10 @@ export default {
|
|
|
//分格线
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
- color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : partten.getColor("black"),
|
|
|
+ color:
|
|
|
+ this.$store.state.themeName === "dark"
|
|
|
+ ? partten.getColor("gray")
|
|
|
+ : partten.getColor("black"),
|
|
|
type: "dashed",
|
|
|
},
|
|
|
},
|
|
@@ -367,6 +375,26 @@ export default {
|
|
|
},
|
|
|
showSymbol: false,
|
|
|
yAxisIndex: value.yAxisIndex,
|
|
|
+ markLine: this.markLineData
|
|
|
+ ? {
|
|
|
+ name: "",
|
|
|
+ silent: true,
|
|
|
+ label: {
|
|
|
+ position: "end",
|
|
|
+ formatter: "",
|
|
|
+ color: "red",
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ data: this.markLineData,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ type: "dashed",
|
|
|
+ color: "red",
|
|
|
+ width: 2,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+ : {},
|
|
|
data: value.value.map((t) => {
|
|
|
if (t.value || t.value === 0) {
|
|
|
return t.value;
|
|
@@ -385,9 +413,8 @@ export default {
|
|
|
methods: {
|
|
|
resize() {},
|
|
|
initChart() {
|
|
|
-
|
|
|
const chart = echarts.init(this.$el);
|
|
|
-
|
|
|
+
|
|
|
let option = this.option();
|
|
|
chart.clear();
|
|
|
|
|
@@ -407,16 +434,20 @@ export default {
|
|
|
window.addEventListener("resize", this.resize);
|
|
|
},
|
|
|
option: function () {
|
|
|
- let themeName = '';
|
|
|
- this.$store.state.themeName === "dark" ? themeName = true : themeName = false;
|
|
|
+ let themeName = "";
|
|
|
+ this.$store.state.themeName === "dark"
|
|
|
+ ? (themeName = true)
|
|
|
+ : (themeName = false);
|
|
|
return {
|
|
|
color: this.color,
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
- triggerOn:this.default?"click":"mousemove",
|
|
|
- alwaysShowContent:true,
|
|
|
- backgroundColor: themeName ? "rgba(0,0,0,0.4)" : "rgba(255,255,255,0.5)",
|
|
|
- borderColor: themeName ? partten.getColor("gray"): "#000",
|
|
|
+ triggerOn: this.default ? "click" : "mousemove",
|
|
|
+ alwaysShowContent: true,
|
|
|
+ backgroundColor: themeName
|
|
|
+ ? "rgba(0,0,0,0.4)"
|
|
|
+ : "rgba(255,255,255,0.5)",
|
|
|
+ borderColor: themeName ? partten.getColor("gray") : "#000",
|
|
|
textStyle: {
|
|
|
color: themeName ? "#fff" : "#000",
|
|
|
fontSize: 12,
|
|
@@ -428,9 +459,9 @@ export default {
|
|
|
top: "top",
|
|
|
icon: "circle",
|
|
|
itemWidth: 6,
|
|
|
- inactiveColor: themeName ? partten.getColor("gray"): "#000",
|
|
|
+ inactiveColor: themeName ? partten.getColor("gray") : "#000",
|
|
|
textStyle: {
|
|
|
- color: themeName ? partten.getColor("grayl"): "#000",
|
|
|
+ color: themeName ? partten.getColor("grayl") : "#000",
|
|
|
fontSize: 12,
|
|
|
},
|
|
|
},
|
|
@@ -455,7 +486,7 @@ export default {
|
|
|
formatter: "{value}",
|
|
|
fontSize: 12,
|
|
|
textStyle: {
|
|
|
- color: themeName ? partten.getColor("gray"): "#000",
|
|
|
+ color: themeName ? partten.getColor("gray") : "#000",
|
|
|
},
|
|
|
},
|
|
|
data: this.xdata,
|