m0_46189479
可爱也不如你
采纳率15.4%
2021-03-01 15:00

求救: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, "加载失败"));
    }
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

4条回答

  • weixin_43551840 我爱吃西瓜喵 1月前

    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, "加载失败"));
    点赞 1 评论 复制链接分享
  • hu071700 AllPromise 1月前
    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是啥类型

    点赞 1 评论 复制链接分享
  • m0_46189479 可爱也不如你 1月前

    这个是前面打印出来的

     

    点赞 评论 复制链接分享
  • m0_46189479 可爱也不如你 1月前

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

    点赞 评论 复制链接分享

为你推荐