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

<!--
 * @Author: your name
 * @Date: 2021-10-08 19:12:07
 * @LastEditTime: 2021-10-25 16:51:44
 * @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">
    </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.setOption(val);
                        }
                        this.myChart.off("click");
                        // 给图像加点击事件
                        this.myChart.getZr().on("click", (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;
                                console.log(handleIndex, obj);
                                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].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,
                });
            });
        },
    },
};
</script>

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