Echarts的简单使用

在springboot项目中使用了echarts图标来可视化更加生动形象

框架：Springboot+html

显示效果

 饼状图数据是后台传递的，旁边的折线图是假的

官方文档：Handbook - Apache ECharts

后端接口：

    //数据统计功能
    @GetMapping("/count")
    public JsonResult<List<Integer>> countMan(){
        Integer i = userService.countMan();
        Integer i2 = userService.countWomen();
        List<Integer> data=new ArrayList<>(Arrays.asList(i,i2));
        if(i>0 && i2>0) return  new JsonResult<>(OK,data);
        else return  new JsonResult<>(500);
    }

前端：

  //数据加载完之前先显示一段简单的loading动画
    myChart.showLoading();

    $.ajax({
      url: "/users/count",
      type: "GET",
      dataType: "JSON",

      success: function (json) {
      
        var countman=json.data[0];
        var countwomen=json.data[1];
        console.log("男人的个数:"+countman);
        console.log("女人的个数:"+countwomen);

        let option = {
          legend: {          //图例设置
             show: true,       //显示图例
            left: '10%', // 图例组件离容器左侧的距离。
            top: '10%', // 图例组件离容器上侧的距离。
            itemWidth: 8, // 图例标记的图形宽度。
            itemHeight: 8, // 图例标记的图形高度。
            textStyle: { // 图例的公用文本样式。
              color: '#333333',
              fontSize: 12
            },
            icon: 'rect' // 图例项的 icon。
          },
          tooltip: {
            trigger: 'item'
          },  //鼠标放上去会显示数值

          radius : '55%',
          center: ['50%', '60%'],
          color: ['#3ca170','#54706c','#91cd77','#ef6576','#66ccff' ],  //自定义饼图调色板
          series: [
            {
              name: "男女比例",  //图例名
              type: 'pie',
              // labelLine: {
              //   show: true,
              // },
              avoidLabelOverlap: false,// 是否启用防止标签重叠策略，默认开启
              label: {
                show:true,
                position: "inside", //outside 外部显示  inside 内部显示

                formatter: '{b} : {c} ({d}%)', //带当前图例名 + 百分比
                // formatter: `{d}%`,
                color: "#ffcccc", //字体颜色
                fontSize: 10 //字体大小
              },

              data: [
                {
                  value: countman,
                  name: '男性人数',
                  color: "#ff00ff"
                },
                {
                  value: countwomen,
                  name: '女性人数',
                  color: "#66ccff"
                }

              ]
            }
          ]
        };

        myChart.hideLoading();    //隐藏加载动画
        myChart.setOption(option);  //加载数据图表
      }
    });

在我这个前端页面主要是通过隐藏显示div来显示不同的页面，没有重现写一个新的页面

 

 

使用echarts的三步骤：

1.将一个组件dom用来初始化echarts

2.创建一个option图表

3.echarts加载数据图表