Vue中动态渲染echarts数据

1、安装指定版本echarts

npm install echarts@5.3.1 --save

2、main.js中全局引入

import * as echarts from "echarts"
window.echarts = echarts;

3、vue页面中引用

 <div id="main" class="main_container"></div>

4、引入数据接口

import { bloodPressureList } from '../../api/healthMonitor/index'

5、data中存入echarts假数据

data() {
    return {
        //echarts数据
        option:{
         title: {
            text: '数据监测'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['高数', '低数', '平数']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: false
        },
        toolbox: {
            feature: {
            saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: [100, 120, 100, 120, 90, 80, 110],
            type: 'line',
            smooth: true,
            name: '高数',
            },
            {
            data: [75, 76, 59, 59, 60, 66, 69],
            type: 'line',
            smooth: true,
            name: '低数',
            },
            {
            data: [60, 60, 60,60, 60, 60,60],
            type: 'line',
            smooth: true,
            name: '平数',
            }
          ]
      }
    }
  },

6、在method中调用数据接口方法

initCharts() {
       //获取数据
       bloodPressureList().then(res => {
          //将json对象的所有数据组成一个数组
          var highPressureArr = [];
          res.data.sbpData.map(val => {
              highPressureArr.push(val);
          });
          var lowPressureArr = [];
          res.data.dbpData.map(val => {
              lowPressureArr.push(val);
          });
          //将json对象中的所有数据组成一个数组
          var monitoringTimeArr=[]
          res.data.date.map(val => {
              monitoringTimeArr.push(val);
          });
          setTimeout(()=>{ 
              myChart.setOption({
                  xAxis: {
                      data: monitoringTimeArr
                  },
                  series: [
                    {
                        data: highPressureArr
                    },
                    {
                        data: lowPressureArr
                    }
                  ]
              })
          }, 300 )
      })
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main'));
      // 绘制基本图表
      myChart.setOption(this.option);
     },

7、在mounted方法中调用渲染数据方法

mounted() {
    this.initCharts()
  },

8、处理echarts宽高

#main{
    margin-top: 15px;
    width: 80%;
    height: 60vh;
}