Echarts mc地圖

時間 2019-11-19

標籤 echarts 地圖简体版

原文原文鏈接

Echarts mc地圖javascript

echarts官網實例：html

https://gallery.echartsjs.com/editor.html?c=xSNlA5O-zljava

效果：jquery

代碼：數組

<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="vintage.js"></script>
</head>
<body>
<div id="container" style="height:900px;"></div>
<script>
var myCharts = echarts.init(document.getElementById('container'),'vintage');
option = {
    color: '#128d15',
    xAxis: {
        name: '東（x軸）',
        maxInterval: 500,
        nameTextStyle: {
            color: '#f00',
        }
    },
    yAxis: {
        name: '北（z軸）',
        maxInterval: 500,
        nameTextStyle: {
            color: '#f00',
        }
    },
    series: [{
        symbolSize: 10,
        label: {
            show: true,
            position: 'right',
            formatter: '{b}',
        },
        data: [{
                name: '家',
                value: [245, 224],
            },
            {
                name: '雪屋',
                value: [-1215, 554],
            },
            {
                name: '繁花似錦',
                value: [1544, 350],
            },
            {
                name: '叢林',
                value: [-2419, 29],
            },
            {
                name: '刷怪籠',
                value: [919, -710],
            },
            {
                name: '被襲擊的村莊',
                value: [1334, 664],
            },
            {
                 name: '地獄門（村莊下面）',
                 value: [153, 64],
            },
            {
                name: '紅土山',
                value: [223, -1747],
            },
            {
                name: '沼澤',
                value: [-1922, 4451],
            },
            {
                name: '海底神殿',
                value: [215, 1095],
            },

        ],
        type: 'scatter'
    }]
};
myCharts.setOption(option);
</script>
</body>
</html>

使用說明：echarts

//series.data即爲本身地圖座標數組
//主題使用vintage，不然背景不爲效果所示
//echarts切換主題：
　　　　1.echarts官網下載本身所須要的主題包，這裏以vintage爲例
　　　　2.引入js
　　　　　　<script type="text/javascript" src="vintage.js"></script>
　　　　3.初始化echarts時，加入主體標識
　　　　　　var myCharts = echarts.init(document.getElementById('container'),'vintage');

echarts版本爲4.4.0spa

結束code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。