windLifecontrolPro/src/views/generatingCapacity/dataAnalysis/hotAnalysis/components/current-scatter-chart.vue

<template>
    <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'

    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 [];
                },
            },
            maxMinData: {
                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: [
                    "#05bb4c",
                    "#4b55ae",
                    "#fa8c16",
                    "#f8de5b",
                    "#1a93cf",
                    "#c531c7",
                    "#bd3338",
                ],
            };
        },
        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), that.echartsTheme);
                document.getElementById(that.id).removeAttribute("_echarts_instance_") ? document.getElementById(
                        that.id)
                    .removeAttribute("_echarts_instance_") : ''
                that.chart = myChart
                //指定图表的配置项和数据
                let option = {
                    //标题
                    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: [
                        "#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.echartsTheme === "dark" ? "#fff" : "#000",
                    },
                    //图例-每一条数据的名字
                    legend: {
                        show: that.showLegend,
                        data: ["拟合功率", "保证功率", "无用点", "有用点", "Cp值"],
                        right: "120",
                        top: "5",
                        // icon: "circle",
                        itemWidth: 6,
                        inactiveColor: that.echartsTheme === "dark" ?
                            partten.getColor("gray") : "#838383",
                        textStyle: {
                            color: that.echartsTheme === "dark" ?
                                partten.getColor("grayl") : "#838383",
                            fontSize: 12,
                        },

                    },
                    visualMap: [{
                        type: 'continuous',
                        min: that.maxMinData[1],
                        max: that.maxMinData[0],
                        dimension: 2,
                        orient: 'vertical',
                        right: 4,
                        top: 50,
                        itemHeight: 600,
                        // text: ['50', '-40'],
                        text: [that.maxMinData[0], that.maxMinData[1]],
                        calculable: false,
                        range: [that.maxMinData[1], that.maxMinData[0]],
                        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.echartsTheme === "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,
                };
                if (!that.theme) {
                    option.backgroundColor = ''
                }

                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.$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), this.echartsTheme);
            myChart.dispose();
            this.$nextTick(() => {
                this.initChart();
            });
        },
        unmounted() {
            window.removeEventListener("resize", this.resize);
        },
    };
</script>

<style lang="less">
    .chart {
        width: 100%;
        height: 100%;
        display: inline-block;
    }
</style>