windLifecontrolPro/src/views/generatingCapacity/dataAnalysis/combine/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 [];
                },
            },
            // 是否显示图表图例
            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), 'dark');
                that.chart = myChart
                //指定图表的配置项和数据
                const option = {
                    backgroundColor: '',
                    //标题
                    title: {
                        text: that.chartTitle,
                        right: 440,
                        top: 4,
                        textStyle: {
                            fontSize: 14,
                            color: that.echartsTheme === "dark" ? partten.getColor("white") : "#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: that.theme ? partten.getColor("gray") : partten.getColor("white"),
                        textStyle: {
                            fontSize: util.vh(16),
                            color: that.theme ? partten.getColor("gray") : partten.getColor("white")
                        },
                        iconStyle: {
                            borderColor: that.theme ? partten.getColor("gray") : partten.getColor("white")
                        },
                        emphasis: {
                            iconStyle: {
                                borderColor: that.theme ? partten.getColor("gray") : partten.getColor("white")
                            },
                        },
                    },
                    tooltip: {
                        trigger: "item",
                        axisPointer: {
                            type: "cross",
                        },
                        backgroundColor: "rgba(0,0,0,0.4)",
                        borderColor: partten.getColor("white"),
                        textStyle: {
                            fontSize: util.vh(16),
                            color: "#fff",
                        },
                        formatter(params) {
                            let str = ''
                            if (params.value && params.value.x) {
                                str =
                                    `${params.seriesName}<br />风速：${params.value.x} m/s<br />功率：${params.value.y} kW`
                            } else {
                                str = `${params.name}`
                            }
                            return str
                        },
                    },
                    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("white") : "#000",
                        textStyle: {
                            color: that.echartsTheme === "dark" ?
                                partten.getColor("white") : "#000",
                            fontSize: 12,
                        },

                    },
                    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,
                };

                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();
            if (this.chart) {
                this.chart.resize()
            }
            // });
        },
        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 lang="less">
    .chart {
        width: 100%;
        height: 100%;
        display: inline-block;
    }
</style>