Springboot整合Echarts

1.node安装echarts依赖

npm i echarts -S

2.引入Echarts

Echarts官网：https://echarts.apache.org/zh/index.html

Echarts使用手册：https://echarts.apache.org/handbook/zh/get-started/

引入echarts：import * as echarts from 'echarts'

折线图

这里直接在controller中获取数据了，不弄静态的了。

@GetMapping("/example")
    public Result<Map> get() {
        Map<String,Object> map = new HashMap<>();
        map.put("x", CollUtil.newArrayList("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"));
        map.put("y",CollUtil.newArrayList(new int[]{120, 132, 101, 134, 90, 230, 210},
                new int[]{220, 182, 191, 234, 290, 330, 310},
                new int[]{150, 232, 201, 154, 190, 330, 410},
                new int[]{320, 332, 301, 334, 390, 330, 320},
                new int[]{820, 932, 901, 934, 1290, 1330, 1320}));
        return Result.success(map);
    }

可以清楚的是,我们只需要获取x轴和y轴的数据，或者series中data的数据即可。

 //折线图

    var option;
    option = {
      title: {
        text: 'Stacked Area Chart',
        left:'38%',
        top:'95%',

      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: []
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: []
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: []
        },
        {
          name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: []
        },
        {
          name: 'Direct',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: []
        },
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          label: {
            show: true,
            position: 'top'
          },
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: []
        }
      ]
    };
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    this.$axios.get("/echarts/example").then(res=>{
      let i=0
      option.xAxis.data=res.data.data.x
       while(i!=option.series.length){
         res.data.data.y.forEach(data=>{
           option.series[i++].data=data
         })
       }
      option && myChart.setOption(option);
    })

数据库中获取数据

 @GetMapping("/members")
    public Result<ArrayList<Integer>> members(){
        List<User> list = userService.list();
        Integer q1=0;//第一季度
        Integer q2=0;//第二季度
        Integer q3=0;//第三季度
        Integer q4=0;//第四季度

        for(User user:list){
            Date createTime = user.getCreateTime();
            Quarter quarter = DateUtil.quarterEnum(createTime);
            switch (quarter){
                case Q1: q1+=1;break;
                case Q2: q2+=1;break;
                case Q3: q3+=1;break;
                case Q4: q1+=1;break;
                default:break;
            }
        }
        ArrayList<Integer> data = CollUtil.newArrayList(q1, q2, q3, q4);
        return Result.success(data);
    }

vue

    option = {
      title: {
        text: '各季度会员数量统计',
        subtext: '趋势图',
        left:'38%',
        top:'95%',

      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: ["第一季度", "第二季度", "第三季度", "第四季度"]
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: ["第一季度", "第二季度", "第三季度", "第四季度"]
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '第一季度',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: []
        },
        {
          name: '第二季度',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: []
        },
        {
          name: '第三季度',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: []
        },
        {
          name: '第四季度',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: []
        },

      ]
    };
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    this.$axios.get("/echarts/members").then(res=>{
      let i=0
      // option.xAxis.data=res.data.data.x
       while(i!=option.series.length){
         // res.data.data.y.forEach(data=>{
         //   option.series[i++].data=data
         // })
           option.series[i++].data=res.data.data
       }
      option && myChart.setOption(option);
    })

饼图图

//饼图
    var circleOption;
    circleOption = {
      title: {
        text: '各季度会员数量比例图',
        // subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        bottom: 'bottom'
      },
      series: [
        {
          name: '会员数量',
          type: 'pie',
          radius: '50%',
          center: ['50%', '50%'],
          label:{            //饼图图形上的文本标签
            normal:{
              show:true,
              position:'inner', //标签的位置
              textStyle : {
                fontWeight : 300 ,
                fontSize : 14,    //文字的字体大小
                color: "#fff"
              },
              formatter:'{d}%'
            }
          },
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

  //饼图
    var circleChartDom = document.getElementById('main2');
    var circleMyChart = echarts.init(circleChartDom);
    this.$axios.get("/echarts/members").then(res=>{
 circleOption.series[0].data=[
        {name:'第一季度',value:res.data.data[0]},
        {name:'第二季度',value:res.data.data[1]},
        {name:'第三季度',value:res.data.data[2]},
        {name:'第四季度',value:res.data.data[3]}
      ]

      circleOption && circleMyChart.setOption(circleOption);
    })