<template>
    <div
        class="biaoge"
        style="width: 100%; height: 100%"
        id="chartmain_map"
    ></div>
</template>
<script>
import * as echarts from "echarts";
import yongchuan from "@/assets/largescreen/js/yongchuan.json";
//json数据地址：https://pan.baidu.com/s/1oti2mnQ4z7yZ71EvvWLoXg?pwd=CXSB
//街道的json数据是在淘宝找人买的，不然就只能在Bigemap GIS Office这个收费软件里面去买，很贵的!
export default {
    name: "echartsMap",
    data() {
        return {
            echart_map: {},
        };
    },
    mounted() {
        this.echartsMap();
    },
    methods: {
        echartsMap() {
            var myChart_map = echarts.init(document.getElementById("chartmain_map"));
            this.echart_map = myChart_map;
            //指定图表的配置项和数据
            let airData = [
                { name: "陈食街道", value: 200, value2: 100, value3: 50 },
                { name: "青峰镇", value: 200, value2: 100, value3: 50 },
                { name: "松溉镇", value: 500, value2: 100, value3: 50 },
                { name: "中山路街道", value: 700, value2: 100, value3: 50 },
                { name: "茶山竹海街道", value: 1000, value2: 100, value3: 50 },
                { name: "五间镇", value: 102, value2: 100, value3: 50 },
                { name: "南大街街道", value: 15, value2: 100, value3: 50 },
                { name: "何埂镇", value: 1800, value2: 100, value3: 50 },
                { name: "仙龙镇", value: 200, value2: 100, value3: 50 },
                { name: "来苏镇", value: 220, value2: 100, value3: 50 },
                { name: "金龙镇", value: 250, value2: 100, value3: 50 },
                { name: "红炉镇", value: 300, value2: 100, value3: 50 },
                { name: "胜利路街道", value: 304, value2: 100, value3: 50 },
                { name: "吉安镇", value: 960, value2: 100, value3: 50 },
                { name: "卫星湖街道", value: 902, value2: 100, value3: 50 },
                { name: "大安街道", value: 103, value2: 100, value3: 50 },
                { name: "双石镇", value: 270, value2: 100, value3: 50 },
                { name: "三教镇", value: 107, value2: 100, value3: 50 },
                { name: "朱沱镇", value: 380, value2: 100, value3: 50 },
                { name: "永荣镇", value: 590, value2: 100, value3: 50 },
                { name: "临江镇", value: 504, value2: 100, value3: 50 },
                { name: "板桥镇", value: 606, value2: 100, value3: 50 },
                { name: "宝峰镇", value: 800, value2: 100, value3: 50 },
            ];
            let myChart_map_option = {
                // 背景颜色
                backgroundColor: "transparent",
                // 提示浮窗样式
                tooltip: {
                    show: true,
                    trigger: "item", //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                    },
                    alwaysShowContent: false,
                    backgroundColor: "#fff",
                    borderColor: "rgba(0, 0, 0, 0.16);",
                    triggerOn: "mousemove",
                    enterable: true, //鼠标是否可进入提示框浮层中
                    textStyle: {
                        fontSize: "12",
                        overflow: "break",
                        color: "#000",
                    },
                    formatter: function (params) {
                        let str = "";
                        str =
                            `<div>` +
                            params.name +
                            ` <br/>` +
                            "申请数量:" +
                            params.data.value +
                            ` <br/>` +
                            "调解中:" +
                            params.data.value2 +
                            ` <br/>` +
                            "调解不成功:" +
                            params.data.value3 +
                            `</div>`;
                        return str;
                    },
                },
                visualMap: {
                    //分段型视觉映射组件
                    show: false,
                    type: "piecewise",
                    left: 50,
                    bottom: 50,
                    showLabel: true,
                    itemWidth: 10,
                    itemHeight: 10,
                    inverse: true,
                    pieces: [
                        {
                            min: 0,
                            color: {
                                type: "linear",
                                x: 0,
                                y: 1,
                                x2: 0,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgb(93,170,242)", // 100% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "rgb(2,128,241)", // 0% 处的颜色
                                    },
                                ],
                                global: "false", // 缺省为 false
                            },
                        },
                    ],
                },
                // 地图配置
                geo: [
                    {
                        map: "js",
                        aspectScale: 0.8, //长宽比,0.75的含义为宽是高的0.75,假如高为100,宽就只有75;0.5的含义就是宽只有高的一半,假如高为100,宽就只有50
                        zoom: 1.1, //视觉比例大小,1.2即为原有大小的1.2倍
                        roam: true, //是否开启鼠标缩放和平移漫游。默认不开启。可以不用设置,如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。
                        zlevel: 5,
                        label: {
                            // 通常状态下的样式
                            normal: {
                                show: true,
                                textStyle: {
                                    color: "#fff",
                                },
                            },
                            // 鼠标放上去的样式
                            emphasis: {
                                textStyle: {
                                    color: "#000",
                                },
                            },
                        },
                        // 地图区域的样式设置
                        itemStyle: {
                            normal: {
                                // 地图的样式
                                borderColor: {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "#20a2e1", // 0% 处的颜色
                                        },
                                        {
                                            offset: 0.8,
                                            color: "#085473", // 80% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "#054660", // 100% 处的颜色
                                        },
                                    ],
                                },
                                areaColor: {
                                    type: "linear",
                                    x: 0,
                                    y: 1,
                                    x2: 0,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "rgb(93,170,242)", // 100% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "rgb(2,128,241)", // 0% 处的颜色
                                        },
                                    ],
                                    global: "false", // 缺省为 false
                                },
                                borderWidth: 1, // 省份边框宽度
                                shadowColor: "rgba(100,255,238,0.5)", // 省份边框阴影
                                shadowOffsetY: 5,
                                shadowBlur: 8, // 省份边框聚焦
                            },
                            emphasis: {
                                // 鼠标hover显示
                                show: false,
                                //areaColor: "#0D30D4",
                                areaColor: {
                                    type: "linear",
                                    x: 1,
                                    y: 0,
                                    x2: 0,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "rgb(243,135,36)", // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "rgb(218,172,113)", // 100% 处的颜色
                                        },
                                    ],
                                    global: true, // 缺省为 false
                                },
                                color: "#fff",
                                // textStyle: {
                                //   color: "#fff",
                                // },
                            },
                        },
                    },
                ],
                series: [
                    {
                        selectedMode: false, //取消地图区域点击事件
                        geoIndex: 0, //只展示geo地图
                        type: "map",
                        data: airData,
                    },
                ],
            };
            echarts.registerMap("js", yongchuan);
            window.addEventListener("resize", function () {
                myChart_map.resize();
            });
            setTimeout(function () {
                myChart_map.resize();
                myChart_map.setOption(myChart_map_option);
            }, 200);
        },
    },
};
</script>
<style scoped>
</style>