carInsightSystem/src/components/v-echars/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-08 19:12:07
 * @LastEditTime: 2021-12-29 17:29:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edi
 * @FilePath: /data-show/src/components/v-echars/index.vue
-->
<template>
    <div class="echars-cont" ref="myChart" v-resize="changeWin">
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    name: "v-echarts",
    props: {
        opt: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    watch: {
        opt: {
            handler(val) {
                if (JSON.stringify(val) != "{}") {
                    this.$nextTick(() => {
                        if (!this.myChart) {
                            this.drawFun(val);
                        } else {
                            this.myChart.clear();
                            this.myChart.setOption(val);
                        }
                        this.myChart.off('click');   //解绑点击事件
                        // this.myChart.on('mouseover', (params) => {
                        //     if(params.componentType === 'markPoint') {
                        //         console.log('hover');
                        //     }
                        // })
                        this.myChart.on('click', (params) => {
                            if(params.componentSubType === 'bar') {
                                let obj = {
                                    axisValueLabel: params.name,
                                    value: params.data
                                }
                                this.$emit("getData", obj);
                            }
                            if(params.componentSubType === 'sankey') {
                                let o = {
                                    key: params.data.name || params.data.source,
                                    value: params.value 
                                }
                                this.$emit("getData", o);
                            }
                            if(params.componentType === 'markPoint') {
                                params.event.event.stopPropagation();
                                let o = {
                                    key: params.data.name,
                                    index: params.seriesIndex,
                                }
                                this.$emit("clickMark", o);
                            }
                        });
                        // this.myChart.off("click");
                        // 给图像加点击事件
                        
                        this.myChart.getZr().on("dblclick", (params) => {
                            //param.name x轴值,param.data y轴值
                            let pointInPixel = [params.offsetX, params.offsetY];
                            if (
                                this.myChart.containPixel("grid", pointInPixel)
                            ) {
                                // let pointInGrid = this.myChart.convertFromPixel(
                                //     {
                                //         seriesIndex: 0,
                                //     },
                                //     pointInPixel
                                // );
                                // let xIndex = pointInGrid[0]; //索引
                                // let handleIndex = Number(xIndex);
                                // let seriesObj = this.myChart.getOption(); //图表object对象
                                let obj =
                                    this.myChart._componentsViews[1]
                                        ._cbParamsList;
                                let ex = obj[0]
                                if(ex && ex.componentSubType === 'line') {
                                    this.$emit("getData", obj);
                                }
                            };
                        });
                        
                        // 将鼠标变成小手
                        this.myChart.getZr().on("mousemove", () => {
                            this.myChart.getZr().setCursorStyle("pointer");
                        });
                        this.roundDefaultSelect(this.myChart);
                        this.$emit("echarsUpdate", this.myChart);
                    });
                }
            },
            immediate: true,
        },
    },
    data() {
        return {
            myChart: null,
        };
    },
    methods: {
        // 画图
        drawFun(opt) {
            let eRef = this.$refs.myChart;
            this.myChart = echarts.init(eRef);
            this.myChart.setOption(opt);
        },
        // 针对圆特定图形加个默认被选择
        roundDefaultSelect(myChart) {
            if (!myChart.getOption().series[0] || myChart.getOption().series[0].type != "pie") {
                return;
            }
            let index = 0;
            myChart.dispatchAction({
                type: "highlight",
                seriesIndex: 0,
                dataIndex: 0,
            });
            myChart.on("mouseover", function (e) {
                if (e.dataIndex != index) {
                    myChart.dispatchAction({
                        type: "downplay",
                        seriesIndex: 0,
                        dataIndex: index,
                    });
                }
            });
            myChart.on("mouseout", function (e) {
                index = e.dataIndex;
                myChart.dispatchAction({
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex: e.dataIndex,
                });
            });
        },
        // 窗口变化
        changeWin() {
            if(this.myChart) {
                this.myChart.resize()
            }
        }
    },
};
</script>

<style lang="less" scoped>
.echars-cont {
    width: 100%;
    height: 100%;
}
</style>