Echarts数据交互（若依微服务版）

效果图

1.获取数据

controller得到数据处理成List或者List

data: [5, 20, 36, 10, 10, 20]  //条形图
或者
//饼图
data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]

2.在相应js模块中写入路径

//一般有专门的js文件写
export function test() {
  return request({
    url: '/test',//controller中的映射路径
    method: 'get'//获取方法
  })
}

3.引用

找到views中相应的模块的.vue文件

1. 导入模块

import {test} from "@/api/..(文件夹)/..(.js文件名)";  //js文件

2. 在methods:{}方法中调用

getData(){
      test().then(response => {
        console.log(response);
        this.$nextTick(() => {
          this.initChart(response)
        })
      });
    },

3. 在mounted()方法中加载数据

 mounted() {
   this.getData();
  },

4. 在initChart(initData)方法传参

//后台获取的数据样式为
[[320, 332, 301, 334, 390, 330, 320],
 [120, 132, 101, 134, 90, 230, 210],
 [220, 182, 191, 234, 290, 330, 310],
 ['2021-10-08', '2021-10-09', '2021-10-10', '2021-10-11', '2021-10-12', '2021-10-13', '2021-10-14']]

 initChart(initData) {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        title: {
          text: '订单成交完成状态(近七天)',
          x: '30%',
          y: '5px',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          bottom: '10',
          data: ['成功订单', '完成订单','失败订单']
        },
        xAxis: [{
          type: 'category',
          data: initData[3],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: '成功订单',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: initData[0],
          animationDuration
        },
          {
          name: '完成订单',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: initData[1],
          animationDuration
        },
          {
          name: '失败订单',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: initData[2],
          animationDuration
        }]
      })
    }