|
|
@@ -0,0 +1,470 @@
|
|
|
+<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: "multiple-y-line-chart-normal",
|
|
|
+ componentName: "multiple-y-line-chart-normal",
|
|
|
+ props: {
|
|
|
+ width: {
|
|
|
+ type: String,
|
|
|
+ default: "100%",
|
|
|
+ },
|
|
|
+ height: {
|
|
|
+ type: String,
|
|
|
+ default: "13.889vh",
|
|
|
+ },
|
|
|
+ // 数据
|
|
|
+ list: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [
|
|
|
+ {
|
|
|
+ title: "机舱震动x方向",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: "-0.003",
|
|
|
+ value: -0.003,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "-0.002",
|
|
|
+ value: -0.002,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "-0.003",
|
|
|
+ value: -0.006,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "-0.003",
|
|
|
+ value: -0.003,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "-0.002",
|
|
|
+ value: -0.002,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "-0.003",
|
|
|
+ value: -0.006,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "-0.003",
|
|
|
+ value: -0.003,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "-0.002",
|
|
|
+ value: -0.002,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "-0.003",
|
|
|
+ value: -0.006,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "机舱震动y方向",
|
|
|
+ yAxisIndex: 1,
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: "-0.01",
|
|
|
+ value: -0.01,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "-0.005",
|
|
|
+ value: -0.005,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "-0.008",
|
|
|
+ value: -0.008,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "-0.01",
|
|
|
+ value: -0.01,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "-0.005",
|
|
|
+ value: -0.005,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "-0.008",
|
|
|
+ value: -0.008,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "-0.01",
|
|
|
+ value: -0.01,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "-0.005",
|
|
|
+ value: -0.005,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "-0.008",
|
|
|
+ value: -0.008,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "机舱震动最大偏移值",
|
|
|
+ yAxisIndex: 2,
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: "1",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "0.05",
|
|
|
+ value: 0.05,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "0.5",
|
|
|
+ value: 0.5,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "1",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "0.05",
|
|
|
+ value: 0.05,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "0.5",
|
|
|
+ value: 0.5,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "1",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "0.05",
|
|
|
+ value: 0.05,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "0.5",
|
|
|
+ value: 0.5,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "风速1",
|
|
|
+ yAxisIndex: 3,
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: "1",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "5",
|
|
|
+ value: 5,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "3",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "1",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "5",
|
|
|
+ value: 5,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "3",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "1",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "5",
|
|
|
+ value: 5,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "3",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "风速2",
|
|
|
+ yAxisIndex: 4,
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: "1",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "2",
|
|
|
+ value: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "3",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "1",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "2",
|
|
|
+ value: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "3",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "1",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "2",
|
|
|
+ value: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "3",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ showLegend: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ // 轴
|
|
|
+ yAxises: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [
|
|
|
+ {
|
|
|
+ name: '机舱震动x方向',
|
|
|
+ min: -0.01,
|
|
|
+ max: 0,
|
|
|
+ unit: "",
|
|
|
+ position: "left",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '机舱震动y方向',
|
|
|
+ min: -0.01,
|
|
|
+ max: 0,
|
|
|
+ unit: "",
|
|
|
+ position: "right",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '机舱震动最大偏移值',
|
|
|
+ min: 0,
|
|
|
+ max: 1,
|
|
|
+ unit: "",
|
|
|
+ position: "left",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '风速1',
|
|
|
+ min: 0,
|
|
|
+ max: 10,
|
|
|
+ unit: "",
|
|
|
+ position: "right",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '风速2',
|
|
|
+ min: 0,
|
|
|
+ max: 10,
|
|
|
+ unit: "",
|
|
|
+ position: "left",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: "",
|
|
|
+ chart: null,
|
|
|
+ color: ["#323E6F", "#1DA0D7", "#05BB4C", "#EDB32F", "#DB5520"],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ legend() {
|
|
|
+ return this.list.map((t) => {
|
|
|
+ return t.title;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ xdata() {
|
|
|
+ console.log('this.list[0].value:',this.list)
|
|
|
+ return this.list[0]?.value.map((t) => {
|
|
|
+ return t.text;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ yAxis() {
|
|
|
+ let result = [];
|
|
|
+ let p = {left: 0, right: 0};
|
|
|
+ this.yAxises.forEach((item, index) => {
|
|
|
+ console.log('yitem:',item)
|
|
|
+ result.push({
|
|
|
+ type: "value",
|
|
|
+ name: `${item.name}${item.unit}`,
|
|
|
+ nameLocation: p[item.position] % 2 == 0 ? "end" : "start",
|
|
|
+ nameGap: 10,
|
|
|
+ min: item.min,
|
|
|
+ max: item.max,
|
|
|
+ position: item.position,
|
|
|
+ offset: p[item.position] * 50,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value}",
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ //分格线
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: partten.getColor("gray"),
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: true
|
|
|
+ }
|
|
|
+ });
|
|
|
+ p[item.position]++;
|
|
|
+ });
|
|
|
+console.log('yResult:',result)
|
|
|
+ return result;
|
|
|
+
|
|
|
+ },
|
|
|
+ series() {
|
|
|
+ let result = [];
|
|
|
+ console.log('list:',this.list)
|
|
|
+ this.list.forEach((value, index) => {
|
|
|
+ console.log('seriesValue:',value)
|
|
|
+ console.log('seriesIndex:',index)
|
|
|
+ result.push({
|
|
|
+ name: value.title,
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ zlevel: index,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ color: this.color[index],
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ showSymbol: false,
|
|
|
+ yAxisIndex: value.yAxisIndex,
|
|
|
+ data: value.value.map((t) => {
|
|
|
+ return t.value;
|
|
|
+ }),
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ return result;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ resize() {},
|
|
|
+ initChart() {
|
|
|
+ const chart = echarts.init(this.$el);
|
|
|
+
|
|
|
+ let option = this.option();
|
|
|
+ chart.clear();
|
|
|
+
|
|
|
+ chart.setOption(option);
|
|
|
+ console.log('111111111111111111111',option);
|
|
|
+
|
|
|
+ this.resize = function() {
|
|
|
+ chart.resize();
|
|
|
+ };
|
|
|
+
|
|
|
+ window.addEventListener("resize", this.resize);
|
|
|
+ },
|
|
|
+ option: function () {
|
|
|
+ return {
|
|
|
+ color: this.color,
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ backgroundColor: "rgba(0,0,0,0.4)",
|
|
|
+ borderColor: partten.getColor("gray"),
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: this.showLegend,
|
|
|
+ data: this.legend,
|
|
|
+ top: 'top',
|
|
|
+ icon: "circle",
|
|
|
+ itemWidth: 6,
|
|
|
+ inactiveColor: partten.getColor("gray"),
|
|
|
+ textStyle: {
|
|
|
+ color: partten.getColor("grayl"),
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 27,
|
|
|
+ left: 16,
|
|
|
+ right: 16,
|
|
|
+ bottom: 0,
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value}",
|
|
|
+ fontSize: 12,
|
|
|
+ textStyle: {
|
|
|
+ color: partten.getColor("gray"),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: this.xdata,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: this.yAxis,
|
|
|
+ series: this.series,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ reload: function () {
|
|
|
+ const chart = echarts.getInstanceByDom(this.$el);
|
|
|
+ chart.clear();
|
|
|
+ let option = this.option();
|
|
|
+ console.log('111111111111111111111',option);
|
|
|
+ chart.setOption(option);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.id = "pie-chart-" + util.newGUID();
|
|
|
+ },
|
|
|
+ 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>
|
darker