vue.js实战案例(1)：外部直接引入渲染echarts地图的实战案例

文件引入

容器

VUEJS代码

 let app = new Vue({
        el: "#hnmap",
        data: {},
        methods: {
            //获取数据；
            getHenanJson(){
                axios.get('./js/getOnsInfo.json').then(res => {
                    var sum = JSON.parse(res.data.data);
                    sum.areaTree[0].children.forEach((item) => {
                        //console.log(item);
                        if (item.name == "河南") {
                            //console.log(item);
                            let dealData = this.dealData(item);
                            this.chart(dealData);
                        }
                    });
                });
            },
            //数据处理函数；
            dealData(data) {
                let realData = [];
                let axisData = [];
                for (let key in data.children) {
                    if (key == 1 || key == 2) {
                        continue;
                    } else {
                        let obj = {name: '', datas: [], label: {fontSize: 18, fontStyle: 'lighter'}};
                        if (data.children[key].name == "济源示范区") {
                            obj.name = "济源市";
                        } else {
                            obj.name = data.children[key].name + "市";
                        }
                        obj.value = data.children[key].total.confirm;
                        obj.datas[0] = data.children[key].total.suspect;
                        obj.datas[1] = data.children[key].total.heal;
                        obj.datas[2] = data.children[key].total.dead;
                        realData.push(obj);
                    }
                }
                return {'realData': realData, 'axisData': axisData};
            },

            //图表渲染;
            chart(getRealData) {
                //console.log(getRealData.realData);
                let myChart = echarts.init(document.getElementById('hnmap'));
                myChart.setOption(
                        {
                            backgroundColor: 'rgb(20,28,52)',
                            title: [
                                {
                                    text: '河南省人才环境评分',
                                    subtext:"虚构数据",
                                    textStyle: {
                                        fontSize: 20,
                                        color:'rgba(255,255,255,0.7)'
                                    },
                                    x:"center",
                                    top:"15"
                                }
                            ],
                            tooltip: {
                                trigger: 'item',
                                formatter: function (params) {
                                    //console.log(params);
                                    return (`地区：${params.data.name}本科学历：${params.data.value}专科学历：${params.data.datas[0]}高中学历：${params.data.datas[1]}初中学历：${params.data.datas[2]}`)
                                },
                            },
                            visualMap: {
                                type: 'piecewise',
                                splitNumber: 5,
                                pieces: [
                                    {min: 200, color: '#6ead51', label: `>200人`},
                                    {min: 150, max: 200, color: '#92b733', label: `150-200人`},
                                    {min: 100, max: 150, color: '#c4aa29', label: `100-150人`},
                                    {min: 50, max: 100, color: '#ce6c2b', label: `50-100人`},
                                    {min: 0, max: 50, color: '#c92626"', label: `0-50人`},
                                ],
                                textStyle: {
                                    fontSize: 14,
                                    color:'rgba(255,255,255,0.7)'
                                },
                                itemGap: 10,
                                left:"5%",
                                bottom:"5%"
                            },
                            series: [
                                {
                                    type: "map",
                                    name: "henan",
                                    map: "河南",
                                    label: {
                                        show: true
                                    },
                                    itemStyle: {
                                        normal: {
                                            show: true,
                                            areaColor: 'rgba(0,0,0,0)',
                                            borderColor: 'rgba(255,255,255,0.7)',
                                            borderWidth: '1',
                                        },
                                        emphasis: {
                                            areaColor: '#FF0000'
                                        }
                                    },
                                    data: getRealData.realData
                                }
                            ]
                        });

                /*自适应浏览器窗口*/
                window.onresize = myChart.resize;
            },
        },
        mounted(){
            this.getHenanJson();
        }
    })

Done!