Eachars的介绍和快速入门（含有代码示例）

late summer182

于 2024-12-09 11:58:35 发布

阅读量1k

点赞数 19

文章标签： echarts java

本文链接：https://blog.csdn.net/qq_63533204/article/details/144343233

版权

1. Eachars的概述

ECharts 是一个开源的、基于 JavaScript 的图表库，广泛用于创建交互式的数据可视化图表。它支持丰富的图表类型，如折线图、柱状图、饼图、散点图、地图等，且具有高度的定制性和良好的性能。ECharts 的目标是提供灵活、易用且高效的图表解决方案，适用于各种 Web 应用程序。官网地址：Apache ECharts

1.1. Eachars的引入

（1）从npm获取：

npm install echarts --save

然后在你的 JS 文件中引入：

import * as echarts from 'echarts';

（2）通过CND引入

jsDelivr：

cdnjs

<script src="https://cdn.jsdelivr.net/npm/echarts@5"></script>

（3）从 GitHub 获取

Releases · apache/echarts · GitHub页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code，解压后 dist 目录下的 echarts.js 即为包含完整 ECharts 功能的文件。

1.2. 常见的图表类型

bar 柱状图

option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};

line折线图

option = {
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150],
      type: 'line',
      // smooth:true
    }
  ]
};

(1)曲线图
在series属性中加上smooth:true;就会变成曲线图
(2)面积图
在series属性中加上areaStyle:{fill:“#f70”} 会变成面积图

pie 饼形图

option = {
  series: [
    {
      type: 'pie',
      data: [
        {
          value: 335,
          name: '直接访问'
        },
        {
          value: 234,
          name: '联盟广告'
        },
        {
          value: 1548,
          name: '搜索引擎'
        }
      ],
      // radius: ['40%', '70%']
      // roseType: 'area'
    }
  ]
};

（1）在series属性加上radius:[80,50]属性会变成环形图

（2）在series属性加上roseType: 'area' 会变成玫瑰图

2. Eachars常用的一些配置属性

2.1. 常用的属性

图例 (legend) ：

控制系列数据对应的图例。

legend: {
    data: ['数据1', '数据2'],  // 图例名称数组，需与 series.name 对应
    orient: 'horizontal',     // 图例排列方式：'horizontal' | 'vertical'
    left: 'center',           // 图例水平位置
    top: 'bottom',            // 图例垂直位置
    textStyle: {              // 文本样式
        color: '#333',
        fontSize: 12
    }
}

这里有一点要说一下 data: ['数据1', '数据2'], 必须要和series的name属性对应

工具箱 (toolbox) :

提供一些工具按钮，如导出图片、数据视图等

toolbox: {
    feature: {
        saveAsImage: {},      // 保存为图片
        dataView: {           // 数据视图
            readOnly: false   // 是否只读
        },
        restore: {},          // 还原
        magicType: {          // 图表类型切换
            type: ['line', 'bar']
        }
    }
}

提示框 (tooltip) :

控制鼠标悬停时的提示框。

tooltip: {
    trigger: 'item',          // 触发类型：'item' | 'axis' | 'none'
    formatter: '{a} <br/>{b}: {c}', // 自定义显示格式
    backgroundColor: 'rgba(50,50,50,0.7)', // 背景颜色
    textStyle: {              // 文本样式
        color: '#fff'
    },
    axisPointer: {            // 坐标轴指示器
        type: 'shadow'        // 类型：'line' | 'shadow'
    }
}

数据系列 (series) :

配置图表展示的数据和类型。

series: [
    {
        name: '销量',         // 系列名称，与 legend 对应
        type: 'bar',          // 图表类型：'line' | 'bar' | 'pie' 等
        data: [120, 200, 150], // 数据
        itemStyle: {          // 样式
            color: '#f49f42', // 单一颜色
            borderWidth: 1
        },
        barWidth: '50%'       // 柱状图宽度
    }
]


//这样可以使用与单个柱状的数据和颜色
series: [
    {
        name: '销量',         // 系列名称，与 legend 对应
        type: 'bar',          // 图表类型：'line' | 'bar' | 'pie' 等
       data:[
            {
                value:120,
                itemStyle:{
                    color:"red",
                }

            },
            {
                value:200,
                itemStyle:{
                    color:"blue",
                }
            },
            {
                value:150,
                itemStyle:{
                    color:"green",
                }

            }
        ], // 数据
        itemStyle: {          // 样式
            color: '#f49f42', // 单一颜色
            borderWidth: 1
        },
        barWidth: '50%'       // 柱状图宽度
    }
]

注意：name属性要和legend 的data属性对应

数据缩放（dataZoom）：

适用于当数据量较大时，可以通过拖拽或缩放选择特定范围内的数据进行查看。

var option = {
    dataZoom: [{
        type: 'slider',  // 缩放类型：滑动条slider，inside内置缩放
        start: 10,  // 缩放起始位置 
        end: 60  // 缩放结束位置
    }],
    ...
};

3. 先看一个简单柱状图示例


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <!-- 01 导入js -->
    <script src="/static/js/echarts.js"></script>
    <!-- 03 设置容器的样式 -->
    <style>
      #container{
        width: 800px;
        height: 600px;
      }
    </style>
  </head>
  <body>
    <!-- 02 创建个容器 -->
    <div id="container"></div>

  </body>
  <script>
    //04 实例化echarts
    // 4.1 创建一个实例
    var echart = echarts.init(document.getElementById("container"))
    // 4.2 定义配置项
    var option = {
      // 图表的标题
      title:{
        text:"我的第一个图表"
      },
      // 图表的提示
      tooltip:{},
      // 图例
      legend:{data:["睡眠时长"]},
      // x轴线
      xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},
      // y轴线
      yAxis:{},

      // 设置数据
      series:[
        {
          // 数据名称
          name:"睡眠时长",
          // 类型为柱状图
          type:"bar",
          // 数据data
          data:[8,10,4,5,9,4,8]
        }
      ]
    }
    // 4.3 更新配置 把咱们写的配置 装给实例对象
    echart.setOption(option);
    // chart图表，set设置 Option选项  data数据 type类型 bar条（柱状条），series系列（数据） Axis轴线 xAxis水平轴线
    // legend传奇（图例） tooltip 提示 init初始化 document文档
  </script>
</html>

echarts.init(document.getElementById("container"))Eachars的初始化实例对象的方法

echart.setOption(option); 是将配置信息应用到图表实例的关键方法简单点来说就是将咱们配置的图表样式应用到实例上

我们可以很清晰的发现series的data 属性和xAxis的data属性封装的是咱们所需展示的数据

而且他们的类型都是数组，那么接下来我们的目标就明确了我们后端从数据库获取数据只针对这两项来拿就可以实现前后端交互！！

4. 案例

4.1. 通过Eachars柱状图展示各部门人数

所需要的表：学生表含有外键 gradeId

所需要的sql：

        SELECT a.gradeName,a.gradeID,COUNT(1) as num
        FROM grade a
        LEFT JOIN student b
        ON a.gradeID=b.gradeId
        GROUP BY a.gradeID

前段页面：

<body>
<!-- 02 创建个容器 -->
<div id="container"></div>
</body>

<script src="/js/echarts.js"></script>
<script src="/js/jquery-3.7.1.min.js"></script>
<script>
    //04 实例化echarts
    // 4.1 创建一个实例
    var echart = echarts.init(document.getElementById("container"))
    $.getJSON(
        "/selectGradeNum",
        null,
        function (res) {
            console.log(res)
            if (res.code===200){
                updateEach(res)
            }
        }
    )
    function updateEach(res) {

        var option = {
            // 图表的标题
            title:{
                text:"我的第一个图表"
            },
            toolbox: {
                feature: {
                    saveAsImage: {},      // 保存为图片
                    dataView: {           // 数据视图
                        readOnly: false   // 是否只读
                    },
                    restore: {},          // 还原
                    magicType: {          // 图表类型切换
                        type: ['line', 'bar']
                    }
                }
            },
            // 图表的提示
            tooltip:{
                trigger: 'item', // 悬停数据项时触发
                formatter: '{a} <br/>{b}: {c}（人）', // 自定义格式：系列名、类别名、值
                backgroundColor: 'rgba(50,50,30,0.7)', // 背景色
                borderColor: '#333', // 边框色
                textStyle: {
                    color: '#fff' // 文本颜色
                }
                },
            // 图例
            legend:{data: ["年级人数"]}, // 图例数据},
            // x轴线
            xAxis:{data:res.xAxis},
            // y轴线
            yAxis:{},

            // 设置数据
            series:[
                {
                    name:"年级人数",// 与 legend.data 的值一致
                    type:"bar",
                    data:res.series
                }
            ]
        }
        // 4.3 更新配置 把咱们写的配置 装给实例对象
        echart.setOption(option);
    }
</script>

pojo：

Mapper：

controller：我们只是一个简单的demo 我就不写业务层service了

package com.lfq.controller;

import com.alibaba.fastjson.JSON;
import com.lfq.mapper.GradeMapper;
import com.lfq.pojo.Grade;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @Author：lfq
 * @Package：com.lfq.controller
 * @Filename：GradeCoontroller
 * @Date：2024/12/8 22:08
 * @Describe:
 */

@Controller
public class GradeController {

    @Autowired
    private GradeMapper gm;//这里咱们简单一点 就不写业务层了 直接注入


    @RequestMapping("/selectGradeNum")
    @ResponseBody
    public Map<String, Object> selectGradeNum(){
        List<Grade> gradeList = gm.selectGradeNum();
        String [] xAxis = new String[gradeList.size()];//x轴标题
        Long [] series = new Long[gradeList.size()];//series


        for (int i = 0; i < gradeList.size(); i++) {
            Grade grade = gradeList.get(i);
            xAxis[i] = grade.getGradeName();
            series[i] = (Long) grade.getNum();
        }
        HashMap<String, Object> hashMap = new HashMap<>();
        hashMap.put("xAxis",xAxis);
        hashMap.put("series",series);
        hashMap.put("code",200);
        System.out.println(JSON.toJSONString(hashMap));
        return  hashMap;
    }
}

需要注意：

这里的as别名一定要为num 这样才能拿到我们需要的数据

4.2. 用饼状图展示男女生人数及比例

还是基于上表：

sql：男女生人数只涉及单表

SELECT sex,COUNT(1)
FROM student 
GROUP BY sex

前段页面：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #container{
            width: 800px;
            height: 600px;
        }
    </style>
</head>
<body>
<!-- 02 创建个容器 -->
<div id="container"></div>

</body>
<script src="/js/echarts.js"></script>
<script src="/js/jquery-3.7.1.min.js"></script>
<script>

    var echart = echarts.init(document.getElementById("container"))

    function updateEach(res) {
        var option = {
            // 图表的标题
            title:{
                text:"性别比例图"
            },
            tooltip:{
                trigger: 'item', // 悬停数据项时触发  触发类型
                formatter: function (params) {
                    // 返回格式化字符串
                    return `${params.seriesName}<br/>${params.name}: ${params.value} (${params.percent}%)`;
                }
            },
            // 图例
            legend:{data:[res[0].name,res[1].name]},
            // 设置数据
            series:[//后端也可以拿list套map
                {
                    // 数据名称
                    name:"性别比例",
                    // 类型为柱状图
                    type:"pie",
                    // 数据data
                    data: res,
                    radius: '50%'
                }
            ]
        }
        echart.setOption(option);
    }

    $.getJSON(
        "/findSexCount",
        null,
        function (res) {
            $.each(res,function (){//这里咱们自己判断格式化一下男,女
                if (this.name=='1'){
                    this.name='男'
                }else {
                    this.name='女';
                }
            })
            console.log(res);
           updateEach(res)
        }
    )
</script>
</html>

pojo：这里咱们自己定义一个条件类 Series

Mapper：

注意：

这里咱们要用条件类接收方便以后的传递前提是一定要拿 as 起别名这样才能接收数据

Controller：

package com.lfq.controller;

import com.lfq.mapper.StudentMapper;
import com.lfq.pojo.Series;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

/**
 * @Author：lfq
 * @Package：com.lfq.controller
 * @Filename：StudentController
 * @Date：2024/12/9 11:36
 * @Describe:
 */
@Controller
public class StudentController {

    @Autowired
    private StudentMapper sm;//这里咱们简单一点 就不写业务层了 直接注入


    @RequestMapping("/findSexCount")
    @ResponseBody
    public List<Series> findSexCount(){
        List<Series> sexCount = sm.findSexCount();
        System.out.println(sexCount);
        return sexCount;
    }
}