|
@@ -0,0 +1,387 @@
|
|
|
+<template>
|
|
|
+ <div class="chart" :id="id"></div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import util from "@tools/util";
|
|
|
+import partten from "@/helper/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 [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ dataSet: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ // 图表核心数据
|
|
|
+ seriesData: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 是否显示图表图例
|
|
|
+ showLegend: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ // 是否默认采用笔刷模式
|
|
|
+ brushSelected: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ 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();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ collapse(val) {
|
|
|
+ if (this.chart) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.chart.resize();
|
|
|
+ }, 300);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ resize() {},
|
|
|
+ initChart() {
|
|
|
+ const that = this;
|
|
|
+ echarts.registerTheme("chartTheme", chartTheme);
|
|
|
+ let myChart = echarts.init(
|
|
|
+ document.getElementById(this.id),
|
|
|
+ "chartTheme"
|
|
|
+ );
|
|
|
+ that.chart = myChart;
|
|
|
+ //指定图表的配置项和数据
|
|
|
+ const option = {
|
|
|
+ //标题
|
|
|
+ title: {
|
|
|
+ text: that.chartTitle,
|
|
|
+ right: 440,
|
|
|
+ top: 4,
|
|
|
+ textStyle: {
|
|
|
+ color: "#b2bcbf",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // backgroundColor:
|
|
|
+ // that.theme === "dark"
|
|
|
+ // ? "rgba(0,0,0,0.4)"
|
|
|
+ // : "rgba(255,255,255,0.5)",
|
|
|
+ //工具箱
|
|
|
+ color: [
|
|
|
+ "#3D54BE",
|
|
|
+ "rgb(255,0,0)",
|
|
|
+ "#a1a1a1",
|
|
|
+ "#0098d9",
|
|
|
+ "#FF8700",
|
|
|
+ "#005eaa",
|
|
|
+ "#cda819",
|
|
|
+ "#32a487",
|
|
|
+ ],
|
|
|
+ toolbox: {
|
|
|
+ show: true,
|
|
|
+ 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: "item",
|
|
|
+ axisPointer: {
|
|
|
+ type: "cross",
|
|
|
+ },
|
|
|
+ backgroundColor: "rgba(0,0,0,0.4)",
|
|
|
+ borderColor: partten.getColor("gray"),
|
|
|
+ textStyle: {
|
|
|
+ fontSize: util.vh(16),
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ formatter(params) {
|
|
|
+ return params.value.length
|
|
|
+ ? `${params.seriesName}<br />风速:${params.value[0]} m/s<br />功率:${params.value[1]} kW<br />温度:${params.value[2]} ℃`
|
|
|
+ : `${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: false, //是否显示
|
|
|
+ realtime: true, //拖动时,是否实时更新系列的视图
|
|
|
+ start: 0, //伸缩条开始位置(1-100),可以随时更改
|
|
|
+ end: 100, //伸缩条结束位置(1-100),可以随时更改
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "slider", //图表下方的伸缩条
|
|
|
+ show: false, //是否显示
|
|
|
+ realtime: true, //拖动时,是否实时更新系列的视图
|
|
|
+ start: 0, //伸缩条开始位置(1-100),可以随时更改
|
|
|
+ end: 100, //伸缩条结束位置(1-100),可以随时更改
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ textStyle: {
|
|
|
+ fontSize: util.vh(16),
|
|
|
+ color: that.theme === "dark" ? "#fff" : "#000",
|
|
|
+ },
|
|
|
+ //图例-每一条数据的名字
|
|
|
+ legend: {
|
|
|
+ show: that.showLegend,
|
|
|
+ data: ["拟合功率", "保证功率", "无用点", "有用点", "Cp值"],
|
|
|
+ right: "120",
|
|
|
+ top: "5",
|
|
|
+ // icon: "circle",
|
|
|
+ itemWidth: 6,
|
|
|
+ inactiveColor:
|
|
|
+ that.theme === "dark" ? partten.getColor("gray") : "#838383",
|
|
|
+ textStyle: {
|
|
|
+ color:
|
|
|
+ that.theme === "dark" ? partten.getColor("grayl") : "#838383",
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ visualMap: [
|
|
|
+ {
|
|
|
+ type: "continuous",
|
|
|
+ min: -40,
|
|
|
+ max: 50,
|
|
|
+ dimension: 2,
|
|
|
+ orient: "vertical",
|
|
|
+ right: 4,
|
|
|
+ top: 50,
|
|
|
+ itemHeight: 600,
|
|
|
+ text: ["50", "-40"],
|
|
|
+ calculable: false,
|
|
|
+ range: [-40, 50],
|
|
|
+ inRange: {
|
|
|
+ color: [
|
|
|
+ "#000",
|
|
|
+ "rgb(75,11,106)",
|
|
|
+ "rgb(133,33,106)",
|
|
|
+ "rgb(176,49,92)",
|
|
|
+ "rgb(210,70,69)",
|
|
|
+ "rgb(235,100,42)",
|
|
|
+ "rgb(247,126,21)",
|
|
|
+ "rgb(252,183,28)",
|
|
|
+ "rgb(249,252,156)",
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ outOfRange: {
|
|
|
+ color: ["#eee", "#eee"],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ grid: {
|
|
|
+ top: 48,
|
|
|
+ left: 40,
|
|
|
+ right: 40,
|
|
|
+ bottom: 24,
|
|
|
+ },
|
|
|
+ //x轴
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ name: "m/s",
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#838383",
|
|
|
+ },
|
|
|
+ type: "value",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: that.xAxisData || [],
|
|
|
+ min: 0,
|
|
|
+ max: 25,
|
|
|
+ interval: 1,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value}",
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: that.theme === "dark" ? partten.getColor("gray") : "#000",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ //y轴没有显式设置,根据值自动生成y轴
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ splitLine: { show: false },
|
|
|
+ position: "left",
|
|
|
+ min: 0,
|
|
|
+ name: "kW",
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#838383",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ splitLine: { show: false },
|
|
|
+ position: "right",
|
|
|
+ min: 0,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ animation: true,
|
|
|
+ dataset: that.dataSet.length ? JSON.parse(that.dataSet) : [],
|
|
|
+ //数据-data是最终要显示的数据
|
|
|
+ series: that.seriesData,
|
|
|
+ };
|
|
|
+
|
|
|
+ that.resize = function () {
|
|
|
+ myChart.resize();
|
|
|
+ };
|
|
|
+
|
|
|
+ window.addEventListener("resize", that.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 => {
|
|
|
+ // // console.log(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);
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.chart {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+</style>
|