|
|
@@ -0,0 +1,316 @@
|
|
|
+<template>
|
|
|
+ <div class="chart" :id="id"></div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import util from "@/helper/util.js";
|
|
|
+import partten from "@/helper/partten.js";
|
|
|
+import * as echarts from "echarts";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "double-line-chart",
|
|
|
+ componentName: "double-line-chart",
|
|
|
+ props: {
|
|
|
+ width: {
|
|
|
+ type: String,
|
|
|
+ default: "100%",
|
|
|
+ },
|
|
|
+ height: {
|
|
|
+ type: String,
|
|
|
+ default: "13.889vh",
|
|
|
+ },
|
|
|
+ // 传入数据
|
|
|
+ list: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [
|
|
|
+ {
|
|
|
+ title: "绿线",
|
|
|
+ smooth: true,
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: "",
|
|
|
+ value: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "0:00",
|
|
|
+ value: 20,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "10:00",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "11:00",
|
|
|
+ value: 40,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "12:00",
|
|
|
+ value: 10,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "13:00",
|
|
|
+ value: 15,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "14:00",
|
|
|
+ value: 30,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "15:00",
|
|
|
+ value: 40,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "",
|
|
|
+ value: 10,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "黄线",
|
|
|
+ smooth: true,
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: "",
|
|
|
+ value: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "0:00",
|
|
|
+ value: 40,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "10:00",
|
|
|
+ value: 20,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "11:00",
|
|
|
+ value: 20,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "12:00",
|
|
|
+ value: 10,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "13:00",
|
|
|
+ value: 40,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "14:00",
|
|
|
+ value: 50,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "15:00",
|
|
|
+ value: 40,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "",
|
|
|
+ value: 10,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ // 单位
|
|
|
+ unit: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ showLegend: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: "",
|
|
|
+ chart: null,
|
|
|
+ color: ["#05bb4c", "#f8de5b", "#4b55ae", "#fa8c16", "#1DA0D7", "#DD5044"],
|
|
|
+ newlist: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ list: {
|
|
|
+ handler(newValue, oldValue) {
|
|
|
+ this.newlist = newValue;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initChart();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ "$store.state.themeName"() {
|
|
|
+ this.initChart();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ colorValue() {
|
|
|
+ return partten.getColor(this.color);
|
|
|
+ },
|
|
|
+ datas() {
|
|
|
+ return this.newlist.map((t) => {
|
|
|
+ return t.value;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ legend() {
|
|
|
+ if (this.newlist) {
|
|
|
+ return this.newlist.map((t) => {
|
|
|
+ return t.title;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xdata() {
|
|
|
+ return this.newlist[0]?.value.map((t) => {
|
|
|
+ return t.speed;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ series() {
|
|
|
+ let result = [];
|
|
|
+ this.newlist.forEach((value, index) => {
|
|
|
+ result.push({
|
|
|
+ name: value.name,
|
|
|
+ type: "line",
|
|
|
+ // smooth: value.smooth,
|
|
|
+ showSymbol: false,
|
|
|
+ zlevel: index,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ color: this.color[index],
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxisIndex: value.yAxisIndex ||0,
|
|
|
+ data: value.value.map((t) => {
|
|
|
+ return t.actualpower;
|
|
|
+ }),
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ return result;
|
|
|
+ },
|
|
|
+ yAxis() {
|
|
|
+ let result = [];
|
|
|
+ result.push({
|
|
|
+ type: "value",
|
|
|
+ name: this.unit,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value}",
|
|
|
+ fontSize: util.vh(14),
|
|
|
+ },
|
|
|
+ boundaryGap: false,
|
|
|
+ //分格线
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ return result;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ resize() {},
|
|
|
+ initChart() {
|
|
|
+ const chart = echarts.init(this.$el);
|
|
|
+
|
|
|
+ let option = {
|
|
|
+ color: this.color,
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ backgroundColor:
|
|
|
+ this.$store.state.themeName === "dark"
|
|
|
+ ? "rgba(0,0,0,0.4)"
|
|
|
+ : "rgba(255,255,255,0.4)",
|
|
|
+ borderColor:
|
|
|
+ this.$store.state.themeName === "dark"
|
|
|
+ ? partten.getColor("gray")
|
|
|
+ : "#000",
|
|
|
+ textStyle: {
|
|
|
+ color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
|
|
|
+ fontSize: util.vh(16),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: this.showLegend,
|
|
|
+ data: this.legend,
|
|
|
+ right: 56,
|
|
|
+ icon: "circle",
|
|
|
+ itemWidth: 6,
|
|
|
+ inactiveColor:
|
|
|
+ this.$store.state.themeName === "dark"
|
|
|
+ ? partten.getColor("gray")
|
|
|
+ : "#000",
|
|
|
+ textStyle: {
|
|
|
+ color:
|
|
|
+ this.$store.state.themeName === "dark"
|
|
|
+ ? partten.getColor("grayl")
|
|
|
+ : "#000",
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 16,
|
|
|
+ left: 40,
|
|
|
+ right: 15,
|
|
|
+ bottom: 24,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value}",
|
|
|
+ textStyle: {
|
|
|
+ color:
|
|
|
+ this.$store.state.themeName === "dark"
|
|
|
+ ? partten.getColor("gray")
|
|
|
+ : "#000",
|
|
|
+ fontSize: util.vh(10),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: this.xdata,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: this.yAxis,
|
|
|
+ series: this.series,
|
|
|
+ };
|
|
|
+
|
|
|
+ chart.clear();
|
|
|
+ chart.setOption(option);
|
|
|
+
|
|
|
+ this.resize = function () {
|
|
|
+ chart.resize();
|
|
|
+ };
|
|
|
+
|
|
|
+ window.addEventListener("resize", this.resize);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.id = "pie-chart-" + util.newGUID();
|
|
|
+ });
|
|
|
+ this.newlist = this.list;
|
|
|
+ console.warn(this.list);
|
|
|
+ console.warn(this.newlist);
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$el.style.width = this.width;
|
|
|
+ this.$el.style.height = this.height;
|
|
|
+ this.initChart();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ updated() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initChart();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ unmounted() {
|
|
|
+ window.removeEventListener("resize", this.resize);
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.chart {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+</style>
|
Biao