vue+echarts实现动态绘制图表及异步加载数据的方法

分析：

数据变化的时候。需要重新setOption

需要注意的点：

1.echarts图表的那个div必须要有宽高才能显示。

2.如果图表不显示。先log打印一下getElementById看看是不是空的。如果是空的多半是还没加载完。需要使用this.$nextTick等加载完之后。再去init和setOption即可。

效果：

 

 

 

主要代码：

   <div class='common-flex record-2-bottom record-2-bottom-1-title'>
          <!-- 对比图表  -->
          <div class='common-card common-card-5 record-2-bottom-1'>
            <h3 class='common-title common-chart-title '>
              数据对比
            </h3>
            <div class='gdw-select-box'>
              <!--            种类-->
              <el-select
                v-model='typeSelected2'
                @change='selectChanged'
                placeholder='请选择'
                class='common-select'
              >
                <el-option label='全部种类' :value='null'></el-option>
                <el-option
                  v-for='(item, index) in typeList'
                  :key='index'
                  :label='item.name'
                  :value='item.id'
                >
                </el-option>
              </el-select>
              <!--            认证级别-->
              <el-select
                v-model='identifiedLevelSelected2'
                @change='selectChanged'
                placeholder='请选择'
                class='common-select'
              >
                <el-option label='全部级别' :value='null'></el-option>
                <el-option
                  v-for='(item, index) in identifiedLevelList'
                  :key='index'
                  :label='item.name'
                  :value='item.id'
                >
                </el-option>
              </el-select>
              <!--            项目-->
              <el-select
                v-model='projectSelected2'
                @change='selectChanged'
                placeholder='请选择'
                class='common-select'
              >
                <el-option label='全部项目' :value='null'></el-option>
                <el-option
                  v-for='(item, index) in projectList'
                  :key='index'
                  :label='item.name'
                  :value='item.id'
                >
                </el-option>
              </el-select>
            </div>
            <div class='common-title-part-cont' v-if='showOptionsrecordOnlySelected'>
              <div
                ref='echartsSelected'
                id='echartsSelected'>
                111柱状图
              </div>
            </div>
            <div class='common-title-part-cont' v-else>
              <bar-line
                ref='recordOnlyEcharts2'
                id='recordOnlyEcharts2'
                :options='$store.state.record.gdwxljlsjdb'
              >
                222柱状图
              </bar-line>
            </div>
          </div>
        </div>

  data() {
    return {
      pageMainToggle: true, // 页面切换状态
      typeSelected2: null, //种类筛选值
      identifiedLevelSelected2: null, // 认证级别筛选值
      projectSelected2: null, // 项目筛选值
      projectList: [], //项目选项
      showOptionsrecordOnlySelected: false,
      optionsRecordOnlyESelected: null
    }
  },

 /**
     * 各柱状图 筛选值改变时触发
     *
     */
    selectChanged() {
      this.showOptionsrecordOnlySelected = true
      this.getRecordGdwxljlsjdb()
    },
    // 数据对比所用数据
    async getRecordGdwxljlsjdb() {
      const ajaxData = {
        // title: {
        //     text: '人',
        //     left: '20px',
        //     textStyle: {
        //         color: "#fff",
        //         // fontSize: 17,
        //     }
        // },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          containLabel: true
        },
        legend: {
          itemWidth: 15,
          itemHeight: 15,
          textStyle: {
            // fontSize: 18,//字体大小
            color: '#ffffff' //字体颜色
          }
        },
        xAxis: {
          data: [],
          splitLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            },
            interval: 0
          }
        },
        yAxis: {
          splitLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        series: [
        ]
      }
      await this.$api.unitTrainingData({
        corps: this.typeSelected2,//	种类（传字典id）	query	false
        identifiedLevel: this.identifiedLevelSelected2,//	认定级别（传字典id）	query	false
        project: this.projectSelected2//	项目（传字典id）	query	false
      }).then(res => {
        let seriseArr = []
        let dataArr1 = []
        let dataArr2 = []
        let dataArr3 = []

        ajaxData.xAxis.data = []
        ajaxData.series = []
        res.map(item => {
          seriseArr = item.value
          ajaxData.xAxis.data.push(item.name) // x轴赋值
          dataArr1.push(item.value[0].value)
          dataArr2.push(item.value[1].value)
          dataArr3.push(item.value[2].value)
        })
        const arr = [dataArr1, dataArr2, dataArr3]
        // 颜色数组
        const colorArr = ['#31E5F5', '#27DB9F', '#EBB84D']
        // 遍历生成3个serise,分别是3个堆叠柱状
        seriseArr.map((element, index) => {
          ajaxData.series.push({
            name: element.name,
            type: 'bar',
            stack: '使用情况',
            data: arr[index],
            barWidth: 20,
            itemStyle: {
              normal: { color: colorArr[index] }
            }
          })
        })
      })

      let arr = ajaxData.xAxis.data
      for (let i = 0; i < arr.length; i++) {
        if (arr[i]) {
          let newParamsName = '' // 最终拼接成的字符串
          let paramsNameNumber = arr[i].length // 实际标签的个数
          let provideNumber = 6 // 每行能显示的字的个数
          let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
          /**
           * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
           */
          // 条件等同于rowNumber>1
          if (paramsNameNumber > provideNumber) {
            /** 循环每一行,p表示行 */
            for (let p = 0; p < rowNumber; p++) {
              let tempStr = '' // 表示每一次截取的字符串
              let start = p * provideNumber // 开始截取的位置
              let end = start + provideNumber // 结束截取的位置
              // 此处特殊处理最后一行的索引值
              if (p == rowNumber - 1) {
                // 最后一次不换行
                tempStr = arr[i].substring(start, paramsNameNumber)
              } else {
                // 每一次拼接字符串并换行
                tempStr = arr[i].substring(start, end) + '\n'
              }
              newParamsName += tempStr // 最终拼成的字符串
            }
          } else {
            // 将旧标签的值赋给新标签
            newParamsName = arr[i]
          }
          //将最终的字符串返回
          arr[i] = newParamsName
        }
      }
      ajaxData.xAxis.data = arr
      this.optionsRecordOnlyESelected = ajaxData
      this.$nextTick(() => {
        let myChart = echarts.init(document.getElementById('echartsSelected'))
        let option = this.optionsRecordOnlyESelected
        myChart.setOption(option, true)
      })
    }

#echartsSelected {
  width: 100%;
  height: 100%;
}