vue+elementui+chart插件+springboot查询图表数据并回显

Spring（小雨点）

已于 2022-04-13 21:59:12 修改

阅读量437

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js elementui spring boot

于 2021-12-03 16:04:59 首次发布

本文链接：https://blog.csdn.net/qq_42434039/article/details/121700974

这篇博客介绍了如何使用ECharts在前端实现动态数据加载，并展示了如何将从后台获取的数据用于创建柱状图。通过`cumpute`函数发起异步请求，获取到数据后调用`drawchart`方法初始化并设置ECharts图表配置，展示了一个包含'衬衫'、'羊毛衫'等类别的销量数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.图表控件

 <div id="main" style="width: 600px;height:400px;"></div>

2.js
引入

var echarts = require('echarts');

//自动请求
      cumpute(){

        var params = {
          canshu: this.radio
        };
        //发送异步请求
        cumputes(params).then(function(result){
          alert(result.data.chart);
          this.chart=result.data.chart;
          //调用方法
          this.drawchart();
        }.bind(this)).catch(function (error) {
          this.loading2 = false;
          console.log(error);
        }.bind(this));
      },

      drawchart(){
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
          title: {
            text: '第一个 ECharts 实例'
          },
          tooltip: {},
          legend: {
            data:['销量']
          },
          xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: this.chart
          }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },

3.后台

@GetMapping("/cumputes")
	public ResponseData jisuan (String canshu) {
		//调用python
		int[] chart=new int[] {5, 20, 36, 10, 10, 55};
		Map<String, Object> result = new HashMap ();
		result.put("chart",chart);
		return ResponseData.ok(result);
	}

在这里插入图片描述