可爱也不如你 2021-03-01 15:00 采纳率: 16.7%
浏览 230
已结题

求救: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条回答 默认 最新

  • AllPromise 2021-03-01 15:24
    关注
    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是啥类型

    评论

报告相同问题?

悬赏问题

  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗
  • ¥15 钢筋实图交点识别,机器视觉代码
  • ¥15 如何在Linux系统中,但是在window系统上idea里面可以正常运行?(相关搜索:jar包)
  • ¥50 400g qsfp 光模块iphy方案
  • ¥15 两块ADC0804用proteus仿真时,出现异常