vue+echarts实现中国地图

vue+echarts实现中国地图_第1张图片

 echarts安装:

npm install echarts --save

在main.js中引用

//  引入Echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts 

引入中国地图的js

require('echarts/map/js/china.js')

require('echarts/map/js/world.js')

 可以去这里下载所需要的地图数据地理小工具

创建一个地图容器

 js实现

 mounted() {
    this.getMapChart();
  },
  methods: {
    // 地图
    getMapChart() {
      this.myChart = this.$echarts.init(document.getElementById("china_map"));
      // 地图配置项
      var option = {
        tooltip: { //自定义鼠标悬停之后弹窗的样式
          className: "custom-tooltip-bk-box",
          triggerOn: "mousemove", // 鼠标移动时触发
          axisPointer: {
            type: "none",
          },
          // 鼠标移到图里面的浮动提示框
          // formatter详细配置: https://echarts.baidu.com/option.html#tooltip.formatter
          formatter(params, ticket, callback) {
            // params.data 就是series配置项中的data数据遍历
            let deptTotal, schoolTotal, studentTotal;
            if (params.data) {
              deptTotal = params.data.value;
              schoolTotal = params.data.schoolTotal;
              studentTotal = params.data.studentTotal;
            } else {
              // 为了防止没有定义数据的时候报错写的
              deptTotal = 0;
              schoolTotal = 0;
              studentTotal = 0;
            }
            let htmlStr = `
              
河南:9

学校数量

27

学生数量

6602

`; return htmlStr; }, backgroundColor: "rgba(255,255,255,0)", //提示标签背景颜色 textStyle: { color: "#fff" }, //提示标签字体颜色 }, visualMap: [ { //颜色的设置 dataRange show: false, itemSymbol: "circle", left: 120, top: 0, splitList: [ { start: 11, color: "lightskyblue", label: ">5000" }, { start: 5, end: 10, color: "#F04B5F", label: "1000-500" }, { start: 3, end: 4, color: "#1AABFF", label: "100-1000" }, { start: 1, end: 2, color: "#FF9B50", label: "1-100" }, { start: 0, end: 0, label: "暂无数据", color: "#196392" }, ], textStyle: { color: "#fff", }, }, ], // geo配置详解: https://echarts.baidu.com/option.html#geo geo: { // 地理坐标系组件用于地图的绘制 map: "china", // 表示中国地图 roam: false, // 是否开启鼠标缩放和平移漫游 // scaleLimit: { //滚轮缩放的极限控制 // min: 1, // max: 2 // }, zoom: 1.05, // 地图放大 aspectScale: 0.9, //地图宽高比例 label: { show: true, textStyle: { color: "#fff", }, }, itemStyle: { normal: { areaColor: "#2862B3", //设置区域颜色 borderColor: "#8DC3F4", //设置各各省市边界颜色 shadowOffsetX: 6, shadowOffsetY: 6, shadowBlur: 10, borderWidth: 1, shadowColor: "RGBA(164, 211, 253, 0.2)", }, emphasis: { //鼠标悬停之后显示的样式 color: "#ffffff", areaColor: "#1B4FB6", shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 20, borderWidth: 0, shadowColor: "rgba(0, 0, 0, 0.5)", }, }, }, series: [ { name: "", // 浮动框的标题(上面的formatter自定义了提示框数据,所以这里可不写) type: "map", geoIndex: 0, label: { show: true, }, // 这是需要配置地图上的某个地区的数据,根据后台的返回的数据进行拼接 data: [], }, ], }; // 绘制图表 this.myChart.setOption(option); } }

你可能感兴趣的:(echarts,vue.js,前端)