|
|
@@ -1,423 +1,501 @@
|
|
|
<template>
|
|
|
- <div class="chart" :id="id"></div>
|
|
|
+ <div class="chart" :id="id"></div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import util from "@tools/util";
|
|
|
- import partten from "@tools/partten";
|
|
|
- import * as echarts from "echarts";
|
|
|
- import chartTheme from './current-scatter-chart.json'
|
|
|
+import util from "@tools/util";
|
|
|
+import partten from "@tools/partten";
|
|
|
+import * as echarts from "echarts";
|
|
|
+import chartTheme from "./current-scatter-chart.json";
|
|
|
|
|
|
- export default {
|
|
|
- name: 'currentScatterChart',
|
|
|
- props: {
|
|
|
- // 图表宽度
|
|
|
- width: {
|
|
|
- type: String,
|
|
|
- default: "100%",
|
|
|
- },
|
|
|
- // 图表高度
|
|
|
- height: {
|
|
|
- type: String,
|
|
|
- default: "350px",
|
|
|
- },
|
|
|
- // 图表主标题
|
|
|
- chartTitle: {
|
|
|
- type: String,
|
|
|
- default: "自定义图表组件",
|
|
|
- },
|
|
|
- // X 轴配置项
|
|
|
- xAxisData: {
|
|
|
- type: Array,
|
|
|
- default: () => {
|
|
|
- return [];
|
|
|
- },
|
|
|
- },
|
|
|
- // Y 轴配置项
|
|
|
- yAxisData: {
|
|
|
- type: Array,
|
|
|
- default: () => {
|
|
|
- return [];
|
|
|
- },
|
|
|
+export default {
|
|
|
+ name: "currentScatterChart",
|
|
|
+ props: {
|
|
|
+ // 图表宽度
|
|
|
+ width: {
|
|
|
+ type: String,
|
|
|
+ default: "100%",
|
|
|
+ },
|
|
|
+ // 图表高度
|
|
|
+ height: {
|
|
|
+ type: String,
|
|
|
+ default: "350px",
|
|
|
+ },
|
|
|
+ // 图表主标题
|
|
|
+ chartTitle: {
|
|
|
+ type: String,
|
|
|
+ default: "自定义图表组件",
|
|
|
+ },
|
|
|
+ // X 轴配置项
|
|
|
+ xAxisData: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // Y 轴配置项
|
|
|
+ yAxisData: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ dataSet: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ // 图表核心数据
|
|
|
+ seriesData: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ seriesAllData: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 是否显示图表图例
|
|
|
+ showLegend: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ // 是否默认采用笔刷模式
|
|
|
+ brushSelected: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ theme: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ echartsTheme: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: "",
|
|
|
+ chart: null,
|
|
|
+ color: [],
|
|
|
+ theme: "dark",
|
|
|
+ chartData: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ collapse() {
|
|
|
+ return this.$store.state.collapse;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ height() {
|
|
|
+ if (this.chart) {
|
|
|
+ this.chart.resize();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ collapse(val) {
|
|
|
+ if (this.chart) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.chart.resize();
|
|
|
+ }, 300);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ resize() {},
|
|
|
+ getColorFn() {
|
|
|
+ let arr = [];
|
|
|
+ this.seriesAllData.forEach((item, index) => {
|
|
|
+ let obj = {
|
|
|
+ gt: index,
|
|
|
+ lt: index + 1,
|
|
|
+ };
|
|
|
+ if (item.tag === "tj") {
|
|
|
+ obj.color = "#FF5378";
|
|
|
+ } else {
|
|
|
+ obj.color = "#05BB4C";
|
|
|
+ }
|
|
|
+ arr.push(obj);
|
|
|
+ });
|
|
|
+ return arr;
|
|
|
+ },
|
|
|
+ getToolTipFn(params) {
|
|
|
+ let tit = "";
|
|
|
+ this.seriesAllData.forEach((item, index) => {
|
|
|
+ if (
|
|
|
+ params[0].axisValue === item.time &&
|
|
|
+ params[0].data === item.value
|
|
|
+ ) {
|
|
|
+ tit = item.tag === "tj" ? "停机" : "并网";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ let str = `<span style="display:inline-block;margin-bottom: 5px">${params[0].axisValue}</span></br>`;
|
|
|
+ let str2 = `<div style="margin-bottom: 5px">
|
|
|
+ <span style="display:inline-block;margin-right:4px;margin-top:3px;border-radius:10px;width:10px;height:10px;background-color:${that.color[index]};\"></span>
|
|
|
+ <span style="display:inline-block;">${tit}:</span> <span>${params[0].value}</span>
|
|
|
+ </div>`;
|
|
|
+ return str + str2;
|
|
|
+ },
|
|
|
+ changeColor() {
|
|
|
+ if (this.$store.state.theme) {
|
|
|
+ this.color = [
|
|
|
+ "#67c23a",
|
|
|
+ "rgb(242.5, 208.5, 157.5)",
|
|
|
+ "#f56c6c",
|
|
|
+ "rgb(77, 119, 255)",
|
|
|
+ "rgb(116, 21, 219)",
|
|
|
+ ];
|
|
|
+ } else {
|
|
|
+ this.color = [
|
|
|
+ "#67c23a",
|
|
|
+ "rgb(242.5, 208.5, 157.5)",
|
|
|
+ "#f56c6c",
|
|
|
+ "rgb(77, 119, 255)",
|
|
|
+ "rgb(1, 191, 236)",
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ initChart(markItem = {}) {
|
|
|
+ const that = this;
|
|
|
+ const theme = sessionStorage.getItem("theme") === "true" ? true : false;
|
|
|
+ that.chartData.forEach((ele, index) => {
|
|
|
+ ele.lineStyle = {
|
|
|
+ color: that.color[index],
|
|
|
+ };
|
|
|
+ if (ele.name === "叶片1" && markItem.yp1) {
|
|
|
+ this.markItem = markItem;
|
|
|
+ ele.markPoint = {
|
|
|
+ symbolSize: 36,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#f60", // 特殊颜色
|
|
|
},
|
|
|
- dataSet: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
},
|
|
|
- // 图表核心数据
|
|
|
- seriesData: {
|
|
|
- type: Array,
|
|
|
- default: () => {
|
|
|
- return [];
|
|
|
- },
|
|
|
+ blur: {
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 1,
|
|
|
+ },
|
|
|
},
|
|
|
- seriesAllData: {
|
|
|
- type: Array,
|
|
|
- default: () => {
|
|
|
- return [];
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: `${markItem.date} 异常点`,
|
|
|
+ value: ele.data[markItem.dataIndex],
|
|
|
+ xAxis: markItem.dataIndex, // 使用索引作为 x 坐标
|
|
|
+ yAxis: ele.data[markItem.dataIndex], // 使用实际值作为 y 坐标
|
|
|
+ label: {
|
|
|
+ formatter: "异常点",
|
|
|
+ position: "top",
|
|
|
},
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ let myChart = echarts.init(document.getElementById(this.id), "dark");
|
|
|
+ that.chart = myChart;
|
|
|
+ //指定图表的配置项和数据
|
|
|
+ const option = {
|
|
|
+ backgroundColor: "",
|
|
|
+ //标题
|
|
|
+ title: {
|
|
|
+ text: that.chartTitle,
|
|
|
+ right: 440,
|
|
|
+ top: 4,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ show: false,
|
|
|
+ x: "right",
|
|
|
+ position: [10, 10],
|
|
|
+ textStyle: {
|
|
|
+ fontSize: util.vh(16),
|
|
|
+ },
|
|
|
+ iconStyle: {
|
|
|
+ // borderColor: partten.getColor("gray")
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ iconStyle: {
|
|
|
+ // borderColor: partten.getColor("gray")
|
|
|
},
|
|
|
- // 是否显示图表图例
|
|
|
- showLegend: {
|
|
|
- type: Boolean,
|
|
|
- default: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "cross",
|
|
|
+ },
|
|
|
+ formatter(data) {
|
|
|
+ let label = ``;
|
|
|
+ data.forEach((ele, index) => {
|
|
|
+ label += `<p>
|
|
|
+ <span style="background:${
|
|
|
+ that.color[index]
|
|
|
+ };margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:50%;over-flow:hidden;"></span>
|
|
|
+ <span>${
|
|
|
+ ele.seriesName
|
|
|
+ }:<span style="font-weight: 700;margin-left:10px">${
|
|
|
+ ele.value || 0
|
|
|
+ }</span></span>
|
|
|
+ </p>`;
|
|
|
+ });
|
|
|
+ return label;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ brush: {
|
|
|
+ seriesIndex: [2, 3],
|
|
|
+ yAxisIndex: 0,
|
|
|
+ transformable: true,
|
|
|
+ throttleType: "debounce",
|
|
|
+ throttleDelay: 1000,
|
|
|
+ removeOnClick: true,
|
|
|
+ brushType: "polygon",
|
|
|
+ brushMode: "multiple",
|
|
|
+ brushStyle: {
|
|
|
+ borderWidth: 1,
|
|
|
+ borderColor: "#ff2424",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ type: "inside", //图表下方的伸缩条
|
|
|
+ show: true, //是否显示
|
|
|
+ realtime: true, //拖动时，是否实时更新系列的视图
|
|
|
+ start: 0, //伸缩条开始位置（1-100），可以随时更改
|
|
|
+ end: 100, //伸缩条结束位置（1-100），可以随时更改
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "slider", //图表下方的伸缩条
|
|
|
+ show: true, //是否显示
|
|
|
+ realtime: true, //拖动时，是否实时更新系列的视图
|
|
|
+ start: 0, //伸缩条开始位置（1-100），可以随时更改
|
|
|
+ end: 100, //伸缩条结束位置（1-100），可以随时更改
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ textStyle: {
|
|
|
+ fontSize: util.vh(16),
|
|
|
+ color: theme ? "#000" : "#fff",
|
|
|
+ },
|
|
|
+ //图例-每一条数据的名字
|
|
|
+ legend: {
|
|
|
+ show: that.showLegend,
|
|
|
+ // data: [ "拟合功率", "保证功率","无用点", "有用点", "Cp值"],
|
|
|
+ right: 170,
|
|
|
+ type: "scroll",
|
|
|
+ top: "5",
|
|
|
+ // icon: "circle",
|
|
|
+ itemWidth: 6,
|
|
|
+ // inactiveColor: that.echartsTheme === "dark" ?
|
|
|
+ // partten.getColor("gray") : "#000",
|
|
|
+ textStyle: {
|
|
|
+ color: theme ? "#000" : "#fff",
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 58,
|
|
|
+ left: 40,
|
|
|
+ right: 48,
|
|
|
+ // bottom: 24,
|
|
|
+ },
|
|
|
+ //x轴
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ name: "时间",
|
|
|
+ nameTextStyle: {
|
|
|
+ color: theme ? "#000" : "#fff",
|
|
|
},
|
|
|
- // 是否默认采用笔刷模式
|
|
|
- brushSelected: {
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: true,
|
|
|
+ data: that.xAxisData || [],
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value}",
|
|
|
},
|
|
|
- theme: {
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
},
|
|
|
- echartsTheme: {
|
|
|
- type: String,
|
|
|
- default: '',
|
|
|
+ smooth: true,
|
|
|
+ textStyle: {
|
|
|
+ // color: that.echartsTheme === "dark" ?
|
|
|
+ // partten.getColor("gray") : "#000",
|
|
|
},
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- id: "",
|
|
|
- chart: null,
|
|
|
- color: [
|
|
|
- "#05bb4c",
|
|
|
- "#4b55ae",
|
|
|
- "#fa8c16",
|
|
|
- "#f8de5b",
|
|
|
- "#1a93cf",
|
|
|
- "#c531c7",
|
|
|
- "#bd3338",
|
|
|
- ],
|
|
|
- theme: 'dark'
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- collapse() {
|
|
|
- return this.$store.state.collapse
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- height() {
|
|
|
- if (this.chart) {
|
|
|
- this.chart.resize()
|
|
|
- }
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ //y轴没有显式设置，根据值自动生成y轴
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
},
|
|
|
- collapse(val) {
|
|
|
- if (this.chart) {
|
|
|
- setTimeout(() => {
|
|
|
- this.chart.resize()
|
|
|
- }, 300)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- resize() {},
|
|
|
- getColorFn() {
|
|
|
- let arr = []
|
|
|
- this.seriesAllData.forEach((item, index) => {
|
|
|
- let obj = {
|
|
|
- gt: index,
|
|
|
- lt: index + 1
|
|
|
- }
|
|
|
- if (item.tag === 'tj') {
|
|
|
- obj.color = "#FF5378"
|
|
|
- } else {
|
|
|
- obj.color = "#05BB4C"
|
|
|
- }
|
|
|
- arr.push(obj)
|
|
|
- })
|
|
|
- return arr
|
|
|
+ position: "left",
|
|
|
+ min: 0,
|
|
|
+ max: 100,
|
|
|
+ name: "度",
|
|
|
+ nameTextStyle: {
|
|
|
+ color: theme ? "#000" : "#fff",
|
|
|
},
|
|
|
- getToolTipFn(params) {
|
|
|
- let tit = ''
|
|
|
- this.seriesAllData.forEach((item, index) => {
|
|
|
- if (params[0].axisValue === item.time && params[0].data === item.value) {
|
|
|
- tit = item.tag === 'tj' ? '停机' : '并网'
|
|
|
- }
|
|
|
- })
|
|
|
- let str = `<span style="display:inline-block;margin-bottom: 5px">${params[0].axisValue}</span></br>`
|
|
|
- let str2 = `<div style="margin-bottom: 5px">
|
|
|
- <span style="display:inline-block;margin-right:4px;margin-top:3px;border-radius:10px;width:10px;height:10px;background-color:${params[0].color};\"></span>
|
|
|
- <span style="display:inline-block;">${tit}:</span> <span>${params[0].value}</span>
|
|
|
- </div>`
|
|
|
- return str + str2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
},
|
|
|
- initChart() {
|
|
|
- const that = this;
|
|
|
- echarts.registerTheme('chartTheme', chartTheme)
|
|
|
- let myChart = echarts.init(document.getElementById(this.id), 'dark');
|
|
|
- that.chart = myChart
|
|
|
- //指定图表的配置项和数据
|
|
|
- const option = {
|
|
|
- backgroundColor: '',
|
|
|
- //标题
|
|
|
- title: {
|
|
|
- text: that.chartTitle,
|
|
|
- right: 440,
|
|
|
- top: 4,
|
|
|
- textStyle: {
|
|
|
- fontSize: 14,
|
|
|
- // color: that.echartsTheme === "dark" ? partten.getColor("grayl") : "#000",
|
|
|
- },
|
|
|
- },
|
|
|
- // backgroundColor:
|
|
|
- // that.theme === "dark"
|
|
|
- // ? "rgba(0,0,0,0.4)"
|
|
|
- // : "rgba(255,255,255,0.5)",
|
|
|
- //工具箱
|
|
|
- // color: [
|
|
|
- // "#cda819",
|
|
|
- // "rgb(255,0,0)",
|
|
|
- // "#0098d9",
|
|
|
- // "#a9e3f199",
|
|
|
- // "#a9e3f199",
|
|
|
- // "#005eaa",
|
|
|
- // "#0a4468",
|
|
|
- // "#32a487"
|
|
|
- // ],
|
|
|
- color: ['#7981AF', '#1C99FF', '#E57F25'],
|
|
|
- toolbox: {
|
|
|
- show: false,
|
|
|
- x: "right",
|
|
|
- position: [10, 10],
|
|
|
- // backgroundColor:'rgba(0,0,0,0.4)',
|
|
|
- // borderColor: partten.getColor("gray"),
|
|
|
- textStyle: {
|
|
|
- fontSize: util.vh(16),
|
|
|
- // color: partten.getColor("gray")
|
|
|
- },
|
|
|
- iconStyle: {
|
|
|
- // borderColor: partten.getColor("gray")
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- iconStyle: {
|
|
|
- // borderColor: partten.getColor("gray")
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- axisPointer: {
|
|
|
- type: "cross",
|
|
|
- },
|
|
|
- // backgroundColor: "rgba(0,0,0,0.4)",
|
|
|
- // borderColor: partten.getColor("gray"),
|
|
|
- // textStyle: {
|
|
|
- // fontSize: util.vh(16),
|
|
|
- // color: partten.getColor("gray"),
|
|
|
- // },
|
|
|
- // formatter(params) {
|
|
|
- // let str = that.getToolTipFn(params)
|
|
|
- // return str
|
|
|
- // // return params.value ? .x ?
|
|
|
- // // `${params.seriesName}<br />风速：${params.value.x}m/s<br />功率：${params.value.y}kW` :
|
|
|
- // // `${params.name}`;
|
|
|
- // },
|
|
|
- },
|
|
|
- brush: {
|
|
|
- seriesIndex: [2, 3],
|
|
|
- yAxisIndex: 0,
|
|
|
- transformable: true,
|
|
|
- throttleType: "debounce",
|
|
|
- throttleDelay: 1000,
|
|
|
- removeOnClick: true,
|
|
|
- brushType: "polygon",
|
|
|
- brushMode: "multiple",
|
|
|
- brushStyle: {
|
|
|
- borderWidth: 1,
|
|
|
- borderColor: "#ff2424",
|
|
|
- },
|
|
|
- },
|
|
|
- dataZoom: [{
|
|
|
- type: "inside", //图表下方的伸缩条
|
|
|
- show: true, //是否显示
|
|
|
- realtime: true, //拖动时，是否实时更新系列的视图
|
|
|
- start: 0, //伸缩条开始位置（1-100），可以随时更改
|
|
|
- end: 5, //伸缩条结束位置（1-100），可以随时更改
|
|
|
- },
|
|
|
- {
|
|
|
- type: "slider", //图表下方的伸缩条
|
|
|
- show: true, //是否显示
|
|
|
- realtime: true, //拖动时，是否实时更新系列的视图
|
|
|
- start: 0, //伸缩条开始位置（1-100），可以随时更改
|
|
|
- end: 5, //伸缩条结束位置（1-100），可以随时更改
|
|
|
- },
|
|
|
- ],
|
|
|
- textStyle: {
|
|
|
- fontSize: util.vh(16),
|
|
|
- color: that.echartsTheme === "dark" ? "#fff" : "#000",
|
|
|
- },
|
|
|
- // visualMap: {
|
|
|
- // type: "piecewise",
|
|
|
- // show: false,
|
|
|
- // dimension: 0,
|
|
|
- // seriesIndex: 0,
|
|
|
- // // pieces: that.getColorFn()
|
|
|
- // },
|
|
|
- //图例-每一条数据的名字
|
|
|
- legend: {
|
|
|
- show: that.showLegend,
|
|
|
- // data: [ "拟合功率", "保证功率","无用点", "有用点", "Cp值"],
|
|
|
- right: 170,
|
|
|
- type: 'scroll',
|
|
|
- top: "5",
|
|
|
- // icon: "circle",
|
|
|
- itemWidth: 6,
|
|
|
- // inactiveColor: that.echartsTheme === "dark" ?
|
|
|
- // partten.getColor("gray") : "#000",
|
|
|
- textStyle: {
|
|
|
- color: that.echartsTheme === "dark" ?
|
|
|
- partten.getColor("grayl") : "#000",
|
|
|
- fontSize: 14,
|
|
|
- },
|
|
|
+ min: 0,
|
|
|
+ max: 25,
|
|
|
+ // splitLine: {
|
|
|
+ // lineStyle: {
|
|
|
+ // color: ['#393F4D']
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ name: "单位：m/s",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ animation: true,
|
|
|
+ dataset: that.dataSet.length ? JSON.parse(that.dataSet) : [],
|
|
|
+ //数据-data是最终要显示的数据
|
|
|
+ series: that.chartData,
|
|
|
+ };
|
|
|
|
|
|
- },
|
|
|
- grid: {
|
|
|
- top: 58,
|
|
|
- left: 40,
|
|
|
- right: 48,
|
|
|
- // bottom: 24,
|
|
|
- },
|
|
|
- //x轴
|
|
|
- xAxis: [{
|
|
|
- name: '时间',
|
|
|
- nameTextStyle: {
|
|
|
- color: '#838383'
|
|
|
- },
|
|
|
- type: "category",
|
|
|
- boundaryGap: true,
|
|
|
- data: that.xAxisData || [],
|
|
|
- axisLabel: {
|
|
|
- formatter: "{value}",
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- smooth: true,
|
|
|
- textStyle: {
|
|
|
- // color: that.echartsTheme === "dark" ?
|
|
|
- // partten.getColor("gray") : "#000",
|
|
|
- },
|
|
|
- }, ],
|
|
|
- //y轴没有显式设置，根据值自动生成y轴
|
|
|
- yAxis: [{
|
|
|
- type: 'value',
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- position: 'left',
|
|
|
- min: 0,
|
|
|
- max: 100,
|
|
|
- name: '度',
|
|
|
- nameTextStyle: {
|
|
|
- color: '#838383'
|
|
|
- },
|
|
|
- }, {
|
|
|
- type: 'value',
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- min: 0,
|
|
|
- max: 25,
|
|
|
- // splitLine: {
|
|
|
- // lineStyle: {
|
|
|
- // color: ['#393F4D']
|
|
|
- // }
|
|
|
- // },
|
|
|
- name: '单位：m/s'
|
|
|
- }],
|
|
|
- animation: true,
|
|
|
- dataset: that.dataSet.length ? JSON.parse(that.dataSet) : [],
|
|
|
- //数据-data是最终要显示的数据
|
|
|
- series: that.seriesData,
|
|
|
- };
|
|
|
+ option.legend.selected = {
|
|
|
+ 叶片1: true,
|
|
|
+ 叶片2: true,
|
|
|
+ 叶片3: true,
|
|
|
+ 风速: false,
|
|
|
+ };
|
|
|
|
|
|
- option.legend.selected = {
|
|
|
- '叶片1': true,
|
|
|
- '叶片2': true,
|
|
|
- '叶片3': true,
|
|
|
- '风速': false
|
|
|
- };
|
|
|
+ that.resize = function () {
|
|
|
+ myChart.resize();
|
|
|
+ };
|
|
|
|
|
|
- that.resize = function () {
|
|
|
- myChart.resize();
|
|
|
- };
|
|
|
+ window.addEventListener("resize", that.resize);
|
|
|
|
|
|
- window.addEventListener("resize", that.resize);
|
|
|
+ if (markItem.yp1) {
|
|
|
+ option.dataZoom = that.handleRowClick(markItem);
|
|
|
+ }
|
|
|
|
|
|
- myChart.setOption(option);
|
|
|
- // if (that.brushSelected) {
|
|
|
- // myChart.dispatchAction({
|
|
|
- // type: "takeGlobalCursor",
|
|
|
- // // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
|
|
|
- // key: "brush",
|
|
|
- // brushOption: {
|
|
|
- // seriesIndex: [2,3],
|
|
|
- // yAxisIndex: 0,
|
|
|
- // transformable: true,
|
|
|
- // throttleType: "debounce",
|
|
|
- // throttleDelay: 1000,
|
|
|
- // removeOnClick: true,
|
|
|
- // brushType: "polygon",
|
|
|
- // brushMode: "multiple",
|
|
|
- // brushStyle: {
|
|
|
- // borderWidth: 1,
|
|
|
- // color: "rgba(255,36,36,0.2)",
|
|
|
- // borderColor: "#ff2424",
|
|
|
- // },
|
|
|
- // },
|
|
|
- // });
|
|
|
- // }
|
|
|
- myChart.off("brushSelected");
|
|
|
- myChart.on("brushSelected", (params) => {
|
|
|
- that.$emit("getSelected", params.batch || []);
|
|
|
- });
|
|
|
- myChart.off('click')
|
|
|
- myChart.on('click', params => {
|
|
|
- // if(params.componentType === 'markArea'){
|
|
|
- // myChart.dispatchAction({
|
|
|
- // type: 'brush',
|
|
|
- // areas: [
|
|
|
- // {
|
|
|
- // xAxisIndex: 0,
|
|
|
- // brushType: 'lineX',
|
|
|
- // coordRange: [params.data.coord[0][0], params.data.coord[1][0]]
|
|
|
- // },
|
|
|
- // ]
|
|
|
- // });
|
|
|
- // }
|
|
|
- })
|
|
|
- },
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.id = "chart-" + util.newGUID();
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- // this.$nextTick(() => {
|
|
|
- this.$el.style.width = this.width;
|
|
|
- this.$el.style.height = this.height;
|
|
|
- this.initChart();
|
|
|
- // });
|
|
|
- },
|
|
|
- updated() {
|
|
|
- // console.log('update')
|
|
|
- let myChart = echarts.init(document.getElementById(this.id));
|
|
|
- myChart.dispose();
|
|
|
- this.$nextTick(() => {
|
|
|
- this.initChart();
|
|
|
- });
|
|
|
- },
|
|
|
- unmounted() {
|
|
|
- window.removeEventListener("resize", this.resize);
|
|
|
+ myChart.setOption(option);
|
|
|
+ // if (that.brushSelected) {
|
|
|
+ // myChart.dispatchAction({
|
|
|
+ // type: "takeGlobalCursor",
|
|
|
+ // // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
|
|
|
+ // key: "brush",
|
|
|
+ // brushOption: {
|
|
|
+ // seriesIndex: [2,3],
|
|
|
+ // yAxisIndex: 0,
|
|
|
+ // transformable: true,
|
|
|
+ // throttleType: "debounce",
|
|
|
+ // throttleDelay: 1000,
|
|
|
+ // removeOnClick: true,
|
|
|
+ // brushType: "polygon",
|
|
|
+ // brushMode: "multiple",
|
|
|
+ // brushStyle: {
|
|
|
+ // borderWidth: 1,
|
|
|
+ // color: "rgba(255,36,36,0.2)",
|
|
|
+ // borderColor: "#ff2424",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ myChart.off("brushSelected");
|
|
|
+ myChart.on("brushSelected", (params) => {
|
|
|
+ that.$emit("getSelected", params.batch || []);
|
|
|
+ });
|
|
|
+ myChart.off("click");
|
|
|
+ myChart.on("click", (params) => {
|
|
|
+ // if(params.componentType === 'markArea'){
|
|
|
+ // myChart.dispatchAction({
|
|
|
+ // type: 'brush',
|
|
|
+ // areas: [
|
|
|
+ // {
|
|
|
+ // xAxisIndex: 0,
|
|
|
+ // brushType: 'lineX',
|
|
|
+ // coordRange: [params.data.coord[0][0], params.data.coord[1][0]]
|
|
|
+ // },
|
|
|
+ // ]
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理表格行点击事件
|
|
|
+ handleRowClick(row) {
|
|
|
+ const that = this;
|
|
|
+ const index = row.dataIndex;
|
|
|
+ const totalDataLength = that.chartData[1].data.length;
|
|
|
+
|
|
|
+ // 计算点击点周围的缩放范围
|
|
|
+ let zoomRange = 100; // 可视区域包含的数据点数量
|
|
|
+ // let startIndex = Math.max(index - Math.floor(zoomRange / 2), 0);
|
|
|
+ // let endIndex = Math.min(startIndex + zoomRange, totalDataLength);
|
|
|
+ let startIndex = index - zoomRange / 2 < 0 ? 0 : index - zoomRange / 2;
|
|
|
+ let endIndex =
|
|
|
+ index + zoomRange / 2 > totalDataLength
|
|
|
+ ? totalDataLength
|
|
|
+ : index + zoomRange / 2;
|
|
|
+
|
|
|
+ // 将百分比转换为相对于数据集的百分比
|
|
|
+ let startPercent = parseInt((startIndex / totalDataLength) * 100);
|
|
|
+ let endPercent = parseInt((endIndex / totalDataLength) * 100);
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ // type: "slider",
|
|
|
+ type: "inside",
|
|
|
+ show: false,
|
|
|
+ realtime: true, //拖动时，是否实时更新系列的视图
|
|
|
+ start: startPercent,
|
|
|
+ end: endPercent,
|
|
|
},
|
|
|
- };
|
|
|
+ ];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.id = "chart-" + util.newGUID();
|
|
|
+ this.changeColor();
|
|
|
+ this.chartData = JSON.parse(JSON.stringify(this.seriesData));
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$el.style.width = this.width;
|
|
|
+ this.$el.style.height = this.height;
|
|
|
+ this.initChart(this.markItem);
|
|
|
+ },
|
|
|
+ updated() {
|
|
|
+ let myChart = echarts.init(document.getElementById(this.id));
|
|
|
+ myChart.dispose();
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initChart(this.markItem);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ unmounted() {
|
|
|
+ this.markItem = {};
|
|
|
+ window.removeEventListener("resize", this.resize);
|
|
|
+ },
|
|
|
+
|
|
|
+ watch: {
|
|
|
+ "$store.state.theme"() {
|
|
|
+ this.changeColor();
|
|
|
+ this.initChart(this.markItem);
|
|
|
+ },
|
|
|
+ seriesData(data) {
|
|
|
+ this.chartData = JSON.parse(JSON.stringify(this.seriesData));
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
- .chart {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
+.chart {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
</style>
|
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
4 months ago