Echarts功能记录

基础配置

工具箱toolbox

对应功能

案例中使用到的第三方脚本

echarts导入

添加链接描述

自动重复发起AJAX请求获取数据

在created周期函数中对ajax请求上加一个周期函数

在mounted中重新渲染dom
获取到数据之后，如果要更新echarts图表数据，重新this.mychart.setOption({需要更新的数据})
不需要更新的数据不用写
虽然先执行created()，在执行mounted(),但created()中的AJAX是异步任务，等到mounted()之后执行，所有的钩子函数在同一个任务中执行，AJAX是另一个任务，得等前一个任务执行完在执行

举例：
created () {
    setInterval(async () => {
      const res = await getLineAPI()
      console.log('测试数据接口')
      this.xAxisData = res.data.list.map(item => item.ref_data)
      this.yAxisData = res.data.list.map(item => item.session_cnt)
      this.yAxisData2 = res.data.list.map(item => item.visit_pv)

      // 获取更新数据之后，如果需要更新echarts图标，重新this.mychart.setOption({ })
      this.mychart.setOption({
        series: [{
          data: this.yAxisData
        }, {
          data: this.yAxisData2
        }]
      })
    }, 2000)
  },
  mounted () {
    console.log('一次mounted')
    this.mychart = echarts.init(this.$refs.chart)
    const option = {
      xAxis: {
        type: 'category',
        boundaryGap: false, // x轴两边留白
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          areaStyle: {},
          smooth: true,
          linetyle: {
            color: '#1bd4ae'
          },
          itemStyle: {
            color: '#1bd4ae'
          }
        //   areaStyle: {
        //     color: '#5ee0c6'
        //   }
        },
        {
          data: [120, 302, 901, 934, 1000, 1330, 320],
          type: 'line',
          areaStyle: {},
          smooth: true,
          linetyle: {
            color: '#1bd4ae'
          },
          itemStyle: {
            color: '#1bd4ae'
          }
        //   areaStyle: {
        //     color: '#5ee0c6'
        //   }
        }
      ]
    }
    this.mychart.setOption(option)
  }

双y轴刻度设置举例
通过设置 yAxisIndex使得对应的数据项和对应y轴刻度对应