关于echarts使用

#在vue项目中柱状图的使用，其中注意事项和小功能实现

请求数据在mounted中进行就可以，在一个函数内完成请求数据和图表渲染

首先获取存放echarts的容器，这里建议用js原生的方法：通过id获取盒子元素(这里默认已经通过接口拿到渲染echarts所需的数据)

let twoNumCharDom = document.querySelector('#lastBox')

通过一个变量来获取一个封装后的方法（初始化echarts）

let twoNumChar = this.$echarts.init(twoNumCharDom)

接下来进入option中

let option
          option = {
            title: { // 这里来设置echarts标题
              text: '最近两月日活跃设备数',
              left: 'center' // 设置标题的位置
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                // axisLabel: {
                //   //x轴文字的配置
                //   show: true,
                //   interval: 0, //使x轴文字显示全
                //   rotate: 40
                // },

                data: this.twomonthNumX, // x轴的数据

                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '活跃设备',
                type: 'bar',
                barWidth: '60%',
                data: this.twomonthNumY,//y轴数据
                itemStyle: {
                  normal: {
                    color: 'orange'
                  }
                },
                markPoint: { //如果想让柱状图表上方气泡显示数据就配置此项
                  data: markPoint // markPoint所需数据需要用数组的map方法来遍历处理纵数据，方法见后文
                }
              }
            ]
          }
          option && twoNumChar.setOption(option)
        } else {
          this.$message({
            message: '请求两月日活跃设备数数据失败',
            type: 'warn'
          })
        }
      })

let markPoint = arr.map((item, index) => {
        return { value: item.value, xAxis: index, yAxis: item.value }
      })
// 这里的arr为纵轴的数据数组