hy.big_screen/src/views/Yield/charts/EMiddleMap.vue

<template>
    <div class="container">
        <div id="EMiddleMap" style="height:100%;"></div>
    </div>
</template>

<script>
export default {
    name: "EMiddleMap",
    data() {
        return {
            data: [40, 38.5, 48.2, 43.6, 42.8, 55.6, 44.6],
        };
    },
    mounted() {
        this.drawChart();
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(
                document.getElementById("EMiddleMap")
            );
            // 指定图表的配置项和数据
            // let option =
            // {
            //     tooltip: {},
            //     visualMap: {
            //         min: 200,
            //         max: 1500,
            //         left: "left",
            //         top: "bottom",
            //         text: ["High", "Low"],
            //         seriesIndex: [1],
            //         inRange: {
            //             color: [
            //                 "#45DE92",
            //                 "#E0C740",
            //                 "#46DF3C",
            //                 "#4038E0",
            //                 "#4038E0",
            //             ],
            //         },
            //         calculable: true,
            //     },
            //     geo: {
            //         map: "湖州市",
            //         type: "map3D",
            //         roam: true,
            //         label: {
            //             normal: {
            //                 show: true,
            //                 textStyle: {
            //                     color: "#FF5A74",
            //                     fontSize: 25,
            //                 },
            //             },
            //         },
            //         itemStyle: {
            //             normal: {
            //                 borderColor: "rgba(0, 0, 0, 0.2)",
            //             },
            //             emphasis: {
            //                 areaColor: null,
            //                 shadowOffsetX: 0,
            //                 shadowOffsetY: 0,
            //                 shadowBlur: 20,
            //                 borderWidth: 0,
            //                 shadowColor: "rgba(0, 0, 0, 0.5)",
            //             },
            //         },
            //     },
            //     series: [
            //         {
            //             type: "scatter",
            //             coordinateSystem: "geo",
            //             symbolSize: 20,
            //             symbol: "none",
            //             symbolRotate: 35,
            //             label: {
            //                 normal: {
            //                     formatter: "{b}",
            //                     position: "right",
            //                     show: false,
            //                 },
            //                 emphasis: {
            //                     show: true,
            //                 },
            //             },
            //             itemStyle: {
            //                 normal: {
            //                     color: "#F06C00",
            //                 },
            //             },
            //         },
            //         {
            //             name: "categoryA",·
            //             type: "map",
            //             geoIndex: 0,
            //             // tooltip: {show: false},
            //             data: [
            //                 // { name: "长兴县", value: "0" },
            //                 // { name: "安吉县", value: "111" },
            //                 // { name: "上海", value: "222" },
            //             ],
            //         },
            //     ],
            // };
            let option = {
                tooltip: {
                    formatter: function (params) {
                        if (params.value) {
                            return (
                                params.name +
                                "<br>" +
                                params.value[0] +
                                params.value[1]
                            );
                        }
                    },

                    textStyle: {
                        fontSize: 25,
                        color: "#fff",
                    },
                },
                visualMap: {
                    show: false,
                    min: 0,
                    max: 600,
                    inRange: {
                        color: ["#e0ffff", "#006edd"],
                    },
                    calculable: true,
                },
                // geo3D: {
                //     itemStyle: {
                //         borderColor: "#333",
                //         borderWidth:2
                //     }
                // },
                series: [
                    {
                        name: "湖州市",
                        type: "map3D",
                        map: "湖州市",
                        data: [{ name: "长兴县", value: ["数量：", 422290] }],
                        regionHeight: 4,
                        boxWidth: 120,
                        // top: "10%",
                        // bottom: "10%",
                        boxDepth: 100,
                        regionHeight: 5,
                        // environment: new this.$echarts.graphic.LinearGradient(
                        //     0,
                        //     0,
                        //     0,
                        //     1,
                        //     [
                        //         {
                        //             offset: 0,
                        //             color: "#547EE0",
                        //         },
                        //         {
                        //             offset: 0.5,
                        //             color: "#57AEE0",
                        //         },
                        //         {
                        //             offset: 0.7,
                        //             color: "#162661",
                        //         },
                        //         {
                        //             offset: 1,
                        //             color: "#162661",
                        //         },
                        //     ],
                        //     false
                        // ),
                        label: {
                            show: true,
                            formatter: function (params) {
                                var content = "",
                                    content = params.name;
                                return content;
                            },
                            textStyle: {
                                color: "#FFFFFF",
                                fontWeight: "normal",
                                fontSize: 25,
                                backgroundColor: "rgba(0, 0, 0, 0)",
                            },
                            emphasis: {
                                //鼠标悬浮效果
                                show: true,
                                textStyle: { color: "#f00" },
                            },
                        },
                        itemStyle: {
                            // normal: { borWidth: 15 },
                            emphasis: {
                                color: "#F5D747",
                                color: "#54FAF0",
                                // borderType: "solid",
                                // borderColor: "#f00",
                                // borderWidth: 10,
                                areaColor: '#f00',
                            shadowOffsetX: 50,
                            shadowOffsetY: 0,
            //                 shadowBlur: 20,
            //                 borderWidth: 0,
            //                 shadowColor: "rgba(0, 0, 0, 0.5)",
                            }, //地图板块鼠标悬浮颜色
                            color: "#04438C",
                            opacity: 1,
                            borderWidth: 5,
                            borderColor: "#0393C0",
                        },
                        viewControl: {
                            autoRotate: false, // 自动旋转
                            // distance: 115,
                            distance: 140,
                        },
                    },
                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
    },
};
</script>

<style lang="scss" scoped>
</style>