求救:vue3使用echarts,使用Echarts 后台数据已经获取 如何渲染到视图层?

vue3使用echarts,使用Echarts 后台数据已经获取  如何渲染到视图层?

 const echartInit6 = () => {
      var chart_6 = echarts.init(document.getElementById('chart_6'));
      var option = {
        title: {
          text: '日均',
          x: '40%',
          y: '10%',
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {},
        toolbox: {
          x: '75%',                // 水平安放位置,默认为全图右对齐,可选为:
          y: '20',
          feature: {
            saveAsImage: {},

          }
        },
        radar: {
          shape: 'circle',
          nameGap: 1, // 图中工艺等字距离图的距离
          name: {
            textStyle: {
              color: '#fff',
              backgroundColor: '#999',
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          center: ['50%', '50%'],
          radius: 90,
          indicator: [
            {name: '排放区域1', max: 100},
            {name: '排放\n区域2', max: 100},
            {name: '排放区域3', max: 100},
            {name: '排放\n区域4', max: 100}
          ]
        },
        series: [{
          type: 'radar',
          areaStyle: {normal: {}},
          emphasis: {
            lineStyle: {
              width: 5
            }
          },
          data: [
            {
              symbol: 'rect',
              symbolSize: 9,
              value: [65, 55, 76, 85],
              name: '日均影响'
            },

          ]
        }]
      };
     chart_4.setOption(option);
      axios({
        method: "get",
        url: "/getradardata/",
        data: {}
      }).then(back => {   
        console.log(back.data);
      }).catch(error => console.log(error, "加载失败"));
    }

 

const echartInit6 = () => {


var chart_6 = echarts.init(document.getElementById('chart_6'));

var data = [];

var option = {


title: {


text: '日均',


x: '40%',


y: '10%',


textStyle: {


color: "#fff"


}


},


tooltip: {},


toolbox: {


x: '75%',                // 水平安放位置,默认为全图右对齐,可选为:


y: '20',


feature: {


saveAsImage: {},


}


},


radar: {


shape: 'circle',


nameGap: 1, // 图中工艺等字距离图的距离


name: {


textStyle: {


color: '#fff',


backgroundColor: '#999',


borderRadius: 3,


padding: [3, 5]


}


},


center: ['50%', '50%'],


radius: 90,


indicator: [


{name: '排放区域1', max: 100},


{name: '排放\n区域2', max: 100},


{name: '排放区域3', max: 100},


{name: '排放\n区域4', max: 100}


]


},


series: [{


type: 'radar',


areaStyle: {normal: {}},


emphasis: {


lineStyle: {


width: 5


}


},


data: [


{


symbol: 'rect',


symbolSize: 9,


value: data,


name: '日均影响'


},


]


}]


};




axios({


method: "get",


url: "/getradardata/",


data: {}


}).then(back => {


data = back.data;//不清楚dback.ata是什么结构,需要变成数组

chart_6.setOption(option,true);//渲染

}).catch(error => console.log(error, "加载失败"));


}

 

不知道你的back.data是啥类型

axios({
   url: "/getradardata/",
   data: {}
}).then(back => {   
   console.log(back.data);
    // 对back.data 进行处理变成[value1,value2,...]的格式
    let arr = []
    back.data.forEach(i => arr.push(i.value))
    option.series[0].data = arr
    // 赋值后重新绘制图表
    chart_6.setOption(option, true);

}).catch(error => console.log(error, "加载失败"));

 

数据已经console出来,不知道如何渲染在视图层,求救

这个是前面打印出来的