java在项目中实现个性化定制的数据可视化图表———静态，动态获取数据

光明_吖吼

于 2024-08-26 17:48:20 发布

阅读量354

点赞数 19

分类专栏：使用技巧文章标签： java 信息可视化开发语言 vue

本文链接：https://blog.csdn.net/weixin_64942806/article/details/141569717

版权

使用技巧专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、Echarts介绍

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。

2021年1月26日晚，Apache基金会官方宣布ECharts项目正式毕业。1月28日，ECharts 5线上发布会举行

二、入门使用

下载js,引入js
页面准备存放图标的dom
cv官方代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script src="/lib/echarts.min.js"></script>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));

  // 指定图表的配置项和数据
  var option = {
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
</script>
</body>
</html>

各种图形

改变series:中的type即可

type:‘bar’ 柱状图

type:‘line’ 折线图

type:‘pie’ 饼状图

具体参考常用图表类型 - 应用篇 - Handbook - Apache ECharts

API: Documentation - Apache ECharts

交互

异步数据加载

动态的异步数据 - 数据处理 - 应用篇 - Handbook - Apache ECharts

三、Vue2中使用Echarts[静态]

3.1 安装echarts

npm install echarts --save

注意: 这样下载是最新版echarts

3.2 创建组件

创建一个vue组件,用来展示报表数据

3.3 开发echarts

3.3.1 引入echarts

import * as echarts from 'echarts'

老版本引入方式（Echartsv4版本）

import echarts from ‘echarts’;

新版本引入方式（Echartsv5版本）

import * as echarts from 'echarts';

3.3.2 创建图表容器

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

3.3.3 初始化图表

在vue组件的js部分，需要在组件的mounted生命周期钩子中初始化ECharts图表。这是因为在这个阶段，图表容器已经被插入到DOM中，可以被ECharts访问。

export default {
  name: 'MyChart',
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = echarts.init(document.getElementById('chart'))
      // ...
    }
  }
}

特别注意: 此处这个生命周期构造函数必须是mounted的,否则dom对象无法使用,导致报错

3.3.4 配置图表

在initChart方法中，需要定义一个包含图表配置的对象。这个对象应该包含图表的标题、提示框、图例、X轴和Y轴配置，以及一个或多个系列对象，这些对象定义了图表的类型和数据。

const option = {
  title: {
    text: 'ECharts 示例'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['销量']
  },
  xAxis: {
    type: 'category',
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
}

3.3.5 使用图表配置

在initChart方法中，使用setOption方法将配置对象应用到图表上。

chart.setOption(option)

3.3.6 完整代码

<template>
<div>
    <!-- 1设置容器 -->
  <div id="chart" style="width: 600px; height: 400px;"></div>
</div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: "Echarts",
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      // 2初始化
      const chart = echarts.init(document.getElementById('chart'))
      // 3配置
      const option = {
        title: {
          text: 'ECharts 示例'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['销量']
        },
        xAxis: {
          type: 'category',
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
      // 4使用图表配置
      chart.setOption(option)
    }
  }
}
</script>
<style scoped>
</style>

3.3.7 启动测试

四、异步获得数据[动态]

目前这是静态固定写死的数据,现在要从后台获得数据展现成报表

需求: 展现性别系统中用户性别的柱状图

前端:

1.设置容器展示报表

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

2.发送请求异步从后台获得数据

mounted() {
  this.initChart2()
},
methods: {
  // 动态演示数据
  initChart2(){
    // 初始化
    const chart = echarts.init(document.getElementById('chart2'))
    axios.get('/api/sysUser/echarts').then(res => {
      // console.log("res",res)
     
    })
  }
}

3.拿到数据后初始化报表,填充数据

axios.get('/api/sysUser/echarts').then(res => {
        // console.log("res",res)
        let retData = res.data.data;
        const options = {
          title: {
            text: '系统用户性别比例图'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['性别']
          },
          xAxis: {
            type: 'category',
            data: retData.sexX    // 从后端获得x轴展示内容
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '性别',
              type: 'bar',
              data: retData.sexY  // 从后端获得x轴展示数据
            }
          ]
        }
        // 使用图表配置
        chart.setOption(options)
      })

后端:

1.查询数据

2.封装数据

3.响应给前端

    /**
     * 报表展现
     * @return
     */
    @GetMapping("/echarts")
    public R showEcharts() {
        // 模拟假数据,要注意对应
        HashMap<String, Object> map = new HashMap<>( );
        map.put("sexX",Arrays.asList("男","女"));
        map.put("sexY",Arrays.asList("15","5"));
        return R.ok(map);
    }
/**
{
	code:2000,
	msg:"成功",
	data:{
		sexX: ['男','女'],
		sexY: [15,5]
	}
}
*/

/*
    select sex,count(*) num
    from sys_user
    group by sex
    
    以上这个sql,查询返回需要使用List<Map>来接收
*/    
  
   @GetMapping("/echarts")
    public R showEcharts() {
        List<Map<String,Object>> resultMap = sysUserService.findSex4Charts();
        ArrayList<String> sexList = new ArrayList<>( );
        ArrayList<Object> numList = new ArrayList<>( );
        resultMap.forEach(map -> {
            String sex = (String)map.get("sex");
            if (sex.equals("0")){
                sexList.add("男");
            } else {
                sexList.add("女");
            }
            Object num = map.get("num");
            numList.add(num);
        });



        HashMap<String, Object> map = new HashMap<>( );
        map.put("sexX",sexList);
        map.put("sexY",numList);
        /**
         * {
         *     sexX: [男,女],
         *     sexY: [81,29]
         * }
         */
        return R.ok(map);
    }