利用Echarts實作全國各個省份資料占比，圖形為中國地圖-有解無憂

最近專案需求，需要一個對于全國各個省份的資料分析，圖形最好是地圖的樣子，這樣子更為直觀，

最先想到的圖表插件是Echarts,他的檔案相對于阿里的G2,G6更加清晰一些，在Echarts 里找到的個

實體，效果如gif圖，這里是實體的鏈接： https://gallery.echartsjs.com/editor.html?c=xa5_zRRpes，

看到上面的評論里，有挺多人評論說圖形顯示不了，因為實體上只有圖表的屬性Option,是無法顯示

的，根據檔案是需要創建一個 ECharts 實體，然后通過setOptions屬性去設定圖表實體的配置項以及

資料，實體化代碼如下：

<div id="dom"></div>
//實體容器，一般是一個具有高寬的div元素，

//注：如果div是隱藏的，ECharts 可能會獲取不到div的高寬導致初始化失敗，這時候可以明確指定div的style.width和style.height，或者在div顯示后手動呼叫 echartsInstance.resize 調整尺寸，
let dom = echarts.init(document.querySelector('#dom')) //實體化dom dom.setOption(option)//設定

重要的一點：我們需要自己引入地圖資料，中國地圖就需要引入china.js

ECharts 3 中因為地圖精度的提高，不再內置地圖資料增大代碼體積，你可以在地圖下載界面下載到需要的地圖檔案引入并注冊到 ECharts 中，

ECharts 中提供了兩種格式的地圖資料，一種是可以直接 script 標簽引入的 js 檔案，引入后會自動注冊地圖名字和資料，還有一種是 JSON 檔案，需要通過 AJAX 異步加載后手動注冊，

下面是兩種型別的使用示例：

JavaScript 引入示例

<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    series: [{
        type: 'map',
        map: 'china'
    }]
});
</script>

JSON 引入示例

$.get('map/json/china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'china'
        }]
    });
});

完整的代碼

我是使用vue框架開發，需要install一下echarts，執行npm i -S echarts

map.vue(地圖組件代碼)

<template> <div :style="styles" ref="dom"></div> </template> <script> import echarts from "echarts"; import { on, off,getChartsMapData } from '@/libs/tools' import "../../../../node_modules/echarts/map/js/china.js"; // 引入中國地圖資料 export default { name: "ChartsMap", props: { /** * @description 圖表寬 */ width: { type: String, default: '50%' }, /** * @description 圖表高 */ height: { type: String, default: '500px' }, /** * @description 圖表資料 */ data: { type: Array, default: () => { /** * @description getChartsMapData() 獲取地圖的默認資料 */ return getChartsMapData() } }, /** * @description 設定圖表的標題 */ title: { type: Object, default: () => { return { show: true, text: "排名情況", textAlign: 'center', textStyle: { color: "#2D3E53", fontSize: 30 }, left: 'center', } } }, /** * @description 指定 visualMapContinuous 組件的允許的最小值 */ min: { type: [Number,String], default: 0 }, /** * @description 指定 visualMapContinuous 組件的允許的最大值 */ max: { type: [Number,String], default: 34 }, /** * @description 指定 visualMapContinuous 組件的兩端的文本如['高','低'] */ text: { type: Array, default: () => ['高','低'] }, /** * @description 定義在選中范圍中的視覺元素 */ inRange: { type: Object, default: () => { return { color: ["#6FCF6A", "#FFFD64", "#FF5000"] } } } }, data () { return { dom: null } }, computed: { styles() { return { width: this.width, height: this.height } } }, methods: { resize () { this.dom.resize() } }, mounted () { var option = { title: this.title, tooltip: { show: true, formatter: function(params) { return params.name + "：" + params.data["value"] + "%"; } }, visualMap: { type: "continuous", orient: "horizontal", itemWidth: 10, itemHeight: 80, text: this.text, showLabel: true, seriesIndex: [0], min: this.min, max: this.max, inRange: this.inRange, textStyle: { color: "#7B93A7" }, bottom: 30, left: "left", }, grid: { right: 10, top: 135, bottom: 100, width: "20%" }, geo: { // roam: true, map: "china", left: "left", right: "300", // layoutSize: '80%', label: { emphasis: { show: false } }, itemStyle: { emphasis: { areaColor: "#fff464" } } }, series: [ { name: "mapSer", type: "map", roam: false, geoIndex: 0, label: { show: false }, data: this.data } ] } this.$nextTick(() => { this.dom = echarts.init(this.$refs.dom) this.dom.setOption(option) on(window, 'resize', this.resize) }) }, beforeDestroy () { off(window, 'resize', this.resize) } }; </script>

使用代碼

<template> <div id="app"> <charts-map> </charts-map> </div> </template>

<script> import ChartsMap from "_c/charts/map" import { getChartsMapData } from '@/libs/tools.js' export default { name: 'app', components: { ChartsMap }, data () { return { width: '70%', height: '800px', data: getChartsMapData(), min: 10, max: 30, text: ['High', 'low'], inRange: { color: ['#f00', '#fff', '#00f'] }, title: { show: true, text: '全國資料', textAlign: 'center', textStyle: { color: '#2D3E53', fontSize: 30, lineHeight: 100 }, left: 'center', } } } } </script>

tools.js 這個工具函式，監聽瀏覽器的resize事件和創造假資料

　　 /** * @description 系結事件 on(element, event, handler) */ export const on = (function () {   if (document.addEventListener) {     return function (element, event, handler) {       if (element && event && handler) {         element.addEventListener(event, handler, false)       }     }   } else {     return function (element, event, handler) {       if (element && event && handler) {         element.attachEvent('on' + event, handler)       }     }   } })()
/** * @description 解綁事件 off(element, event, handler) */ export const off = (function () {   if (document.removeEventListener) {     return function (element, event, handler) {       if (element && event) {         element.removeEventListener(event, handler, false)       }     }   } else {     return function (element, event, handler) {       if (element && event) {         element.detachEvent('on' + event, handler)       }     }   } })()
/** * @description 獲取地圖資料 getChartsMapData() */
export const getChartsMapData = () => {     const data = ["內蒙古","黑龍江","吉林","遼寧","北京","天津","河北","河南","山西","山東","江蘇","安徽",     "上海","湖北","湖南","江西","浙江","福建","臺灣","廣東","香港","澳門","海南","廣西","貴州","云南","重慶",     "四川","甘肅","陜西","寧夏","青海","西藏","新疆",]     return data.map((item,index) => {       return {         name: item,         value: index + 1       }     }) }

我已經將他封裝成一個vue組件，做成一個npm包了，直接npm install brock-charts -S 就可以使用，具體使用方法可以看這個地址：

https://www.npmjs.com/package/brock-charts

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/180942.html

標籤：JavaScript

上一篇：函式的防抖和節流

下一篇：vue常見問題處理 -- 頁面重繪時，如何保持原有vuex中的state資訊