使用echarts湖北省地圖

下載echarts

npm install echarts --save-dev

在main.js中全局引入

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

引入湖北省地圖文件、自動輪播js

import hubei from "./hubei.js";

require("./echarts-auto-tooltip")

<template>

??<div>

????<div id="chart"></div>

??</div>

</template>

?

<script>

// import china from "./china.js";

import hubei from "./hubei.js";

require("./echarts-auto-tooltip")

?

export default {

??data() {

????return {

??????option: {

????????backgroundColor: "#404a59",

????????title: {

??????????show: true,

??????????text: "主標題",

??????????subtext: "點擊跳轉",

??????????sublink: "http://www.baidu.com",

??????????left: "center"

????????},

????????tooltip: {

??????????show: true,

??????????padding: 10,

??????????alwaysShowContent: true, // 是否永遠顯示tooltip

??????????enterable: true,

??????????transitionDuration: 1.5, // 移動動畫時間，單位s

??????????trigger: "item",

??????????textStyle: {

????????????color: "#fff"

??????????},

??????????formatter: "{b} </br> {c}",

??????????extraCssText:"width:300px; height:150px; background:#333; color:#999; border-radius:15px;"

????????},

????????//地理坐標系組件用于地圖的繪制，支持在地理坐標系上繪制散點圖，線集。

????????//要顯示散點圖，必須填寫這個配置

????????geo: {

??????????show: true,

??????????roam: false, //是否允許鼠標滾動放大，縮小

??????????map: "湖北",

??????????label: {

????????????//圖形上的文本標簽，可用于說明圖形的一些數據信息

????????????show: false, //是否顯示文本

????????????color: "#fff" //文本顏色

??????????},

??????????itemStyle: {

????????????//地圖區域的多邊形 圖形樣式。 默認樣試。

????????????areaColor: "#323c48", //地圖區域的顏色。

????????????borderColor: "#111" //邊框線

??????????},

??????????emphasis: {

????????????//高亮狀態下的多邊形和標簽樣式。

????????????label: {

??????????????//文本

??????????????show: false,

??????????????color: "#ADA"

????????????},

????????????itemStyle: {

??????????????//區域

??????????????areaColor: "#F60"

????????????}

??????????},

??????????data: [

????????????{ name: "十堰市", value: 222 },

????????????{ name: "神農架林區", value: 222 },

????????????{

??????????????name: "恩施土家族苗族自治州",

??????????????value: 222

????????????},

????????????{ name: "宜昌市", value: 222 },

????????????{ name: "襄陽市", value: 222 },

????????????{ name: "荊門市", value: 222 },

????????????{ name: "荊州市", value: 222 },

????????????{ name: "潛江市", value: 222 },

????????????{ name: "天門市", value: 222 },

????????????{ name: "仙桃市", value: 222 },

????????????{ name: "隨州市", value: 222 },

????????????{ name: "孝感市", value: 222 },

????????????{ name: "咸寧市", value: 222 },

????????????{ name: "武漢市", value: 222 },

????????????{ name: "黃岡市", value: 222 },

????????????{ name: "黃石市", value: 222 }

??????????]

????????},

????????//是視覺映射組件，用于進行『視覺編碼』，也就是將數據映射到視覺元素（視覺通道）。

????????visualMap: {

??????????min: 0, //最小值

??????????max: 600, //最大值

??????????show: false,

??????????calculable: true, //是否顯示拖拽用的手柄（手柄能拖拽調整選中范圍）。

??????????inRange: {

????????????color: ["#ccc", "yellow", "#fff"] //顏色

??????????},

??????????textStyle: {

????????????color: "#fff"

??????????}

????????},

????????series: [

??????????{

????????????type: "effectScatter", //特效散點圖

????????????silent: false,// 圖形是否觸發鼠標事件

????????????coordinateSystem: "geo", //該系列使用的坐標系

????????????data: [

??????????????//數據

??????????????{ name: "宜昌", value: [111.290843, 30.702636, 600] },

??????????????{ name: "孝感市 ", value: [113.926655, 30.926423, 200] },

??????????????{ name: "十堰市 ", value: [110.787916, 32.646907, 100] },

??????????????{ name: "荊門市 ", value: [112.204251, 31.03542, 150] },

??????????????{ name: "仙桃市 ", value: [113.453974, 30.364953, 350] }

????????????],

????????????label: {

??????????????normal: {

????????????????formatter: "{b}",

????????????????position: "right",

????????????????show: true

??????????????}

????????????},

????????????//標記的大小,可以設置數組或者函數返回值的形式

????????????symbolSize: function(val) {

??????????????return val[2] / 25;

????????????},

????????????rippleEffect: {

??????????????//漣漪特效相關配置。

??????????????brushType: "fill" // 波紋繪制方式 stroke, fill

????????????},

????????????hoverAnimation: true //鼠標移入放大圓

??????????}

????????]

??????}

????};

??},

??mounted() {

????this.mYChart();

??},

??methods: {

????mYChart() {

??????var mapChart = this.$echarts.init(document.getElementById("chart"));

??????mapChart.setOption(this.option)

??????// 自動輪播

??????tools.loopShowTooltip(mapChart, this.option, {loopSeries: true});

????}

??}

};

</script>

?

<style scoped>

.box {

??margin-top: 30px;

}

#chart {

??width: 1000px;

??height: 620px;

??

}

</style>

echarts-auto-tooltip.js代碼

(function (global) {

????global.tools = global.tools || {};

?

????/**

?????* ?echarts tooltip 自動輪播

?????* ?@author liuyishi

?????* ?@param chart

?????* ?@param chartOption

?????* ?@param options

?????* ?{

?????* ?interval ???輪播時間間隔，單位毫秒，默認為2000

?????* ?loopSeries ?boolean類型，默認為false。

?????* ?????????????true表示循環所有series的tooltip，false則顯示指定seriesIndex的tooltip

?????* ?seriesIndex 默認為0，指定某個系列（option中的series索引）循環顯示tooltip，

?????* ?????????????當loopSeries為true時，從seriesIndex系列開始執行.

?????* ?}

?????* @returns {{clearLoop: clearLoop}}

?????*/

?

????tools.loopShowTooltip = function (chart, chartOption, options) {

????????var defaultOptions = {

????????????interval: 5000,

????????????loopSeries: false,

????????????seriesIndex: 0,

????????????updateData: null

????????};

?

????????if (!chart || !chartOption) {

????????????return {};

????????}

?

????????var dataIndex = 0; // 數據索引，初始化為-1，是為了判斷是否是第一次執行

????????var seriesIndex = 0; // 系列索引

????????var timeTicket = 0;

????????var seriesLen = chartOption.series.length; // 系列個數

????????function(){ //xm返傭?http://www.xmchinese.cn/

????????var dataLen = 0; // 某個系列數據個數

????????var chartType; // 系列類型

????????var first = true;

?

????????// 不循環series時seriesIndex指定顯示tooltip的系列，不指定默認為0，指定多個則默認為第一個

????????// 循環series時seriesIndex指定循環的series，不指定則從0開始循環所有series，指定單個則相當于不循環，指定多個

????????// 要不要添加開始series索引和開始的data索引？

?

????????if (options) {

????????????options.interval = options.interval || defaultOptions.interval;

????????????options.loopSeries = options.loopSeries || defaultOptions.loopSeries;

????????????options.seriesIndex = options.seriesIndex || defaultOptions.seriesIndex;

????????????options.updateData = options.updateData || defaultOptions.updateData;

????????} else {

????????????options = defaultOptions;

????????}

?

????????// 如果設置的seriesIndex無效，則默認為0

????????if (options.seriesIndex < 0 || options.seriesIndex >= seriesLen) {

????????????seriesIndex = 0;

????????} else {

????????????seriesIndex = options.seriesIndex;

????????}

?

????????function autoShowTip() {

????????????function showTip() {

????????????????// 判斷是否更新數據

????????????????if (dataIndex === 0 && !first && typeof options.updateData === "function") {

????????????????????options.updateData();

????????????????????chart.setOption(chartOption);

????????????????}

?

????????????????var series = chartOption.series;

????????????????chartType = series[seriesIndex].type; // 系列類型

????????????????dataLen = series[seriesIndex].data.length; // 某個系列的數據個數

?

????????????????var tipParams = { seriesIndex: seriesIndex };

????????????????switch (chartType) {

????????????????????case 'map':

????????????????????case 'pie':

????????????????????case 'chord':

????????????????????????tipParams.name = series[seriesIndex].data[dataIndex].name;

????????????????????????break;

????????????????????case 'radar': // 雷達圖

????????????????????????tipParams.seriesIndex = seriesIndex;

????????????????????????tipParams.dataIndex = dataIndex;

????????????????????????break;

????????????????????default:

????????????????????????tipParams.dataIndex = dataIndex;

????????????????????????break;

????????????????}

?

????????????????if (chartType === 'pie' || chartType === 'radar') {

????????????????????// 取消之前高亮的圖形

????????????????????chart.dispatchAction({

????????????????????????type: 'downplay',

????????????????????????seriesIndex: options.loopSeries ? (seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1) : seriesIndex,

????????????????????????dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1

????????????????????});

?

????????????????????// 高亮當前圖形

????????????????????chart.dispatchAction({

????????????????????????type: 'highlight',

????????????????????????seriesIndex: seriesIndex,

????????????????????????dataIndex: dataIndex

????????????????????});

????????????????}

?

????????????????// 顯示 tooltip

????????????????tipParams.type = 'showTip';

????????????????chart.dispatchAction(tipParams);

?

????????????????dataIndex = (dataIndex + 1) % dataLen;

????????????????if (options.loopSeries && dataIndex === 0 && !first) { // 數據索引歸0表示當前系列數據已經循環完

????????????????????seriesIndex = (seriesIndex + 1) % seriesLen;

????????????????}

?

????????????????first = false;

????????????}

?

????????????showTip();

????????????timeTicket = setInterval(showTip, options.interval);

????????}

?

????????// 關閉輪播

????????function stopAutoShow() {

????????????if (timeTicket) {

????????????????clearInterval(timeTicket);

????????????????timeTicket = 0;

?

????????????????if (chartType === 'pie' || chartType === 'radar') {

????????????????????// 取消高亮的圖形

????????????????????chart.dispatchAction({

????????????????????????type: 'downplay',

????????????????????????seriesIndex: options.loopSeries ? (seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1) : seriesIndex,

????????????????????????dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1

????????????????????});

????????????????}

????????????}

????????}

?

????????var zRender = chart.getZr();

?

????????function zRenderMouseMove(param) {

????????????if (param.event) {

????????????????// 阻止canvas上的鼠標移動事件冒泡

????????????????param.event.cancelBubble = true;

????????????}

?

????????????stopAutoShow();

????????}

?

????????// 離開echarts圖時恢復自動輪播

????????function zRenderGlobalOut() {

????????????if (!timeTicket) {

????????????????autoShowTip();

????????????}

????????}

?

????????// 鼠標在echarts圖上時停止輪播

????????chart.on('mousemove', stopAutoShow);

????????zRender.on('mousemove', zRenderMouseMove);

????????zRender.on('globalout', zRenderGlobalOut);

?

????????autoShowTip();

?

????????return {

????????????clearLoop: function () {

????????????????if (timeTicket) {

????????????????????clearInterval(timeTicket);

????????????????????timeTicket = 0;

????????????????}

?

????????????????chart.off('mousemove', stopAutoShow);

????????????????zRender.off('mousemove', zRenderMouseMove);

????????????????zRender.off('globalout', zRenderGlobalOut);

????????????}

????????};

????};

})(window);

?

?