使用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);