简单做下一个数据可视化内容

描述:

1.固定数据:使用echarts提供的组件构建可视化数据,通过前端mock.js模拟数据

2.动态数据:官网例子,可视化图随某一变量(时间或其他)改变而动态改变

https://echarts.apache.org/zh/index.html

先用mock模拟数据跟接口。

  • main.js下 定义全局mock接口 import './mock'
  • src下创建mock文件夹,定义不同的模拟数据
//src/mock/echarts.js
import Mock from 'mockjs'
const echartsData = {
  Pixiv: [
    Mock.mock('@integer(1200,12500)'),
    Mock.mock('@integer(32500,39300)'),
    Mock.mock('@integer(22500,21000)'),
    Mock.mock('@integer(21500,53700)'),
    Mock.mock('@integer(12300,36500)'),
    Mock.mock('@integer(12300,26500)'),
    Mock.mock('@integer(22300,16500)')
  ]
}
export { echartsData }
//src/mock/index.js
import Mock from 'mockjs'
import * as echarts from './echarts'

Mock.mock('/echarts/getEchartsData', 'get', echarts.echartsData)
export default Mock //导出

然后就可以用ajax或者axios,请求get方式的/echarts/getEchartsData 接口了

这里就简单写下echars使用mock模拟的数据了,就是拿到接口数据,然后传给echarts组件使用

//父组件 
 mounted() {
    axios.get('/echarts/getEchartsData').then((res) => {
      this.lineChartData = res.data
    })
  }

/将父组件的异步数据通过props传给子组件,会发生一个经典错误:子组件中拿不到该数据

解决方法:

 watch: {
    chartData: {
      deep: true,
      handler(val, oldVal) {
        if (val) {
          this.initCharts()
        }
      }
    }
  }
//watch下监听下就可以了
//或者使用vuex传递数据。
//因为这个传递的数据我并没有直接用在模板上,所以如果你直接用在模板上,可以定义个v-if=falg 判断下数据是否存在。

爬。