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;}

风车动漫