vue项目中使用echarts实现疫情地图

一、搭建项目

注：如果使用的是vue-cli的老版本(4.20以下的)建议使用以下命令升级vue-cli版本

npm uninstall vue-cli -g
npm uninstall @vue-cli -g

1、选择路径创建项目

vue create vue-mychart

随后出现一些配置选项，选择Manually select features进行配置

2、选择预配置项

选择Router、Vuex、CSS Pre-processors、Linter / Formatter

3、是否使用路由的history模式

 

 

 

 可以选也可以不选，之后可以改的，我选择不选

4、选择一个预处理语言

 

 

 选with node-sass就行

5、选择ESLint自动化代码格式化检测

从上到下分别是：只预防、airbnb配置、标注配置、最高配置

作为学习选择只预防就可以了选择回车下一步

6、选择代码检测时机，选择保存时检测

下一步就好了

7、将配置文件放到pakage.json中还是单独文件中

选择pakage.json即可

8、是否保存选择的配置

这里不保存选n

安装成功后显示如下

 

 

 随后进入文件夹

运行项目就可以了

npm run serve
yarn serve

 

二、使用echarts实现疫情地图

echarts文档

1、安装echarts默认是最新版本，我试了好多版本怎么都不行，这里我查了网上资料使用 ^4.7.0 的版本就可以显示

终端键入

npm install echarts --save

 如果失败，并看到

 

 

则键入来修复

npm audit fix

成功后可以在package.json内看到echarts对应的版本号

 

 

2、封装自定义组件与配置路由

  1. 在router文件下的index.js里配置自定义组件chart.vue对应的路由

　　　

 

 

  1. 在App.vue中配置路由跳转

　　

  1. 在view文件夹下新建一个自定义组件chart.vue MapChart.vue

　　

3、在chart.vue中进行使用echarts

  1. 引入echarts
import echarts from 'echarts'  //引入echarts
  1. 准备一个DOM容器
<template>
  <div class="home">
    <div id="mychart1" style="width: 100%;height:300px;"></div> <!--准备显示图表的容器-->
  </div>
</template>
  1. 使用钩子函数，挂载完成之后执行init
mounted(){   //钩子函数，生命周期为挂载完成后，Dom操作一般是在mounted钩子函数中进行。
    this.init();  //挂载完成，执行init
}
  1. 编写init方法
//基于准备好的dom，初始化echarts实例
var myEchart = echarts.init(document.getElementById('mychart1'));
// 指定图表的配置项和数据
　var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
      // 使用刚指定的配置项和数据显示图表。
      myecharts.setOption(option);

chart完整代码如下

<template>
  <div class="chart">
    <div id="mychart1" style="width:100%;height: 300px"></div>
  </div>
</template>

<script>
import echarts from 'echarts'  //引入echarts
export default {
  data () {
    return {
      mychart: ''
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      const myecharts = echarts.init(document.getElementById('mychart1'));
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
      // 使用刚指定的配置项和数据显示图表。
      myecharts.setOption(option);
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

 

4、显示效果

三、第二种地图显示方法

1、安装jsonp

npm install jsonp

2、封装自定义组件与配置路由

和上一种方法类似，不赘述

3、新建chinaMap.vue中进行使用echarts

附上源代码

<template>
  <div id="mapchart" style="width: 100%; height: 600px;"></div>
</template>

<script>
import jsonp from 'jsonp';
import echarts from 'echarts'
import 'echarts/map/js/china';

const option = {
  title: {
    text: '疫情地图',
    show: true,
    x: 'center',
    top: '5%',
    textStyle: {
      color: '#e74c3c',
      fontStyle: 'normal',
      fontFamily: 'Microsoft YaHei'
    }
  },
  tooltip: {
    //  鼠标移入时的提示信息
    // 类型
    tigger: 'item',
    // b 区域名称 c 合并数值 a 系列名称
    formatter: '地区：{b}<br/>确诊：{c} '
  },
  series: [
    {
      type: 'map',//地图类型
      map: 'china',//地图名字（与导入文件名字一致
      layoutCenter: ['50%', '50%'],//定义地图中心在屏幕中的位置
      layoutSize: 650,
      label: {
        show: true,
        color: '#000',
        fontSize: '10px'
      },
      itemStyle: {
        borderColor: '#b1b1b1'
      },
      // data: [
      //   {name: '湖北', value: 20057},
      //   {name: '福建', value: 1547},
      //   {name: '黑龙江', value: 316},
      //   {name: '西藏', value: 69},
      //   {name: '甘肃', value: 4},
      // ],
      //data:Map.dataList,//(data数组动态绑定Map实例中的dataList,但是俺整不出来呜呜)
      zoom: 1,
      emphasis: {
        lable: {
          color: '#fff',
          fontSize: '10px'
        },
        itemStyle: {
          areaColor: '#c7fffd'
        }
      }
    }
  ],
  visualMap: {
    type: 'piecewise',
    pieces: [
      { min: 10000 }, // 不指定 max，表示 max 为无限大（Infinity）。
      { min: 1000, max: 9999 },
      { min: 100, max: 999 },
      { min: 10, max: 99 },
      { min: 0, max: 9 }
    ],
    inRange: {
      color: ['#fff', '#ffaa85', '#ff7b69', '#cc2929', '#8c0d0d', '#660208']
    },
    itemWidth: 10,
    itemHeight: 10,
    bottom: '15%',
    left: '10%'
  }
}
export default {
  data () {
    return {
      mycharts: '',
    }
  },
  mounted () {
    this.mycharts = echarts.init(document.getElementById('mapchart'))
    this.init()
  },
  methods: {
    init () {
      // 使用新浪疫情数据接口获取数据
      jsonp(
        'http://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427',
        (err, data) => {
          //console.log(data.data.list);
          const list = data.data.list.map(item => {
            return {
              name: item.name,
              value: item.value
            }
          })

          // 将数据给到地图
          option.series[0].data = list;

          this.mycharts.setOption(option);
        })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

 

效果如下：

 

 

 

posted @ 2021-04-27 11:58  他她  阅读(895)  评论(0)  编辑  收藏  举报