Vue数据可视化项目(更新中)

• 有大量拼接参数的话,要放在src的->api文件下面
• 在文件里面放的对象是默认不会共享的,必须使用export default 才会给其他外面的文件找到
• 设置的get参数需要注意
• 放置.catch(error>{})
• 留意那个axios.js文件(学习)

​ 请求放在主组件,可以减少请求次数

组件标签props传值的是 Covid19Info=“Covid19Info”

rem是什么?

命名–数据或者get set

传值的问题

解释：

components 公共组件，注册到全局实例中：
这里写图片描述
config 项目的配置文件
directives 项目中使用到的自定义指令
filters 项目中使用到的自定义过滤器
pages 业务目录，以业务模块功能划分，页面相关的组件和store存在放对应的页面文件夹内
这里写图片描述
plugins 系统插件，把路由、cache、auth等功能封装为一个插件在vue初始化的时候安装到实例中
services 数据处理、异步数据请求
statics 静态资源文件（fonts、image等）
util 帮助类

下载可视化那个要用4.x版本,不然没有数据

自己写的插件

defineproperties()返回来给对象添加修改属性,并返回对象

echarts.js

import echarts from 'echarts'

const install = function (Vue) {
  Object.defineProperties(Vue.prototype, {
    $charts: {
      get () {
        return {
          line: function () {
            console.log(echarts)
          }
        }
      }
    }
  })
}
export default install

main.js

import Echarts from '@/plugins/echarts.js'
Vue.use(Echarts)

echarts.js

import echarts from 'echarts'

const install = function (Vue) {
  Object.defineProperties(Vue.prototype, {
    $charts: {
      get () {
        return {
          line: function (id) {
            var dom = document.getElementById(id)
            var myCharts = echarts.init(dom)
            var option = {
              xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: [820, 932, 901, 934, 1290, 1300, 1320],
                  type: 'line'
                }
              ]
            }
            myCharts.setOption(option)
          }
        }
      }
    }
  })
}

export default install

在主组件里面用

需要设置style大小

这里的已经把图表装好了,只需要引用就可以使用了. this.$charts.WorldMap(‘worldmap’)

在组件里面使用使用直接使用就可以了

引入的插件

在工具包下node_modules的echarts有中国地图包(这是一个辅助包:china地图轮廓),在option下需要继续引入地图数据

1，安装echarts

npm install echarts --save

​

2,引入

import echarts from “echarts”;
import ‘node_modules/echarts/map/js/china.js’ //引入中国地图数据 （*********重中之重）

mounted () {

this.$charts.line(‘line’)

this.$charts.ChinaMap(‘China’)

this.$charts.WorldMap(‘World’)

},

设置style属性

可视化数据在data里面

setColor (value) {
      let currentColor = ''
      if (value === 0) {
        currentColor = '#fff'
      } else if (value > 0 && value < 10) {
        currentColor = '#FDFDCF'
      } else if (value >= 10 && value < 100) {
        currentColor = '#FE9E83'
      } else if (value >= 100 && value < 500) {
        currentColor = '#E55A4E'
      } else if (value >= 500 && value < 10000) {
        currentColor = '#4F070D'
      }
      return currentColor
    }

tooltip: {
                // 这里设置提示框
                trigger: 'item', // 数据项图形触发
                // trigger: 'axis', 触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
                backgroundColor: 'black', // 提示框浮层的背景颜色。
                formatter (data) {
                  console.log(data)
                  return '
' + data.name + '
现存确诊:' + data.value + '
'
                }
              },

?弹性布局