【ECharts】数据可视化

苏生Susheng2024-05-25 12:24

目录

ECharts介绍

  • ECharts 是一个由百度开发和维护的开源的可视化图表库。
  • 它提供了丰富的图表类型和交互功能，可以用于创建各种类型的数据可视化图表，包括折线图、柱状图、饼图、散点图、雷达图、地图等。

ECharts 特点

  1. 强大的兼容性：ECharts 可以在主流的浏览器上运行，包括 Chrome、Firefox、Safari、IE8+ 等。

  2. 灵活的配置选项：ECharts 提供丰富的配置选项，可以自定义图表的样式、布局、标签、动画等，以满足不同的需求。

  3. 丰富的交互功能：ECharts 支持多种交互方式，如鼠标悬停、点击、拖拽等，可以实现图表的联动、筛选、缩放等交互效果。

  4. 多维度的数据展示：ECharts 支持多维度的数据可视化，可以通过数据的不同维度来展示数据的关联性、分布情况等。

  5. 可视化的配置工具：ECharts 提供了一个可视化的配置工具，可以通过拖拽和编辑来创建和调整图表，让非开发人员也能轻松使用。

总的来说，ECharts 是一个功能强大、灵活易用的数据可视化图表库，广泛应用于数据分析、商业报表、可视化大屏等领域。

Vue2使用EChats步骤

在 Vue2 中使用 ECharts 需要进行以下几个步骤：

安装 ECharts

可以通过 npm 或者 CDN 的方式安装 ECharts。如果使用 npm，可以在项目目录下运行以下命令安装 ECharts：

js 复制代码 
npm install echarts --save
//或者
npm install echarts@4.8.0 --save

引入 ECharts

main.js中加入以下配置

javascript 复制代码 
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;

创建图表容器

在 Vue 的模板中创建一个用于显示图表的容器元素。

html 复制代码 
<template>
  <div id="chart" style="width:50%;height: 300px;border: 1px solid blue"></div>
</template>

初始化图表

在 Vue 的方法中初始化 ECharts，通过 ECharts 的实例来配置和渲染图表。

javascript 复制代码 
export default {
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      // 获取容器元素
      const chartContainer = document.getElementById('chart')
      // 创建图表实例
      const chart = echarts.init(chartContainer)
      
      // 配置图表
      const option = {
        // 图表的配置项
      }
      
      // 渲染图表
      chart.setOption(option)
    }
  }
}

上述代码中，通过 mounted 钩子函数来在组件挂载后调用 initChart 方法初始化图表。在 initChart 方法中，通过 echarts.init 方法创建图表实例，并通过 setOption 方法将配置项应用到图表中。

更新图表

如果需要在组件中根据数据的变化来更新图表，可以在相应的方法中调用 setOption 方法来更新图表的数据。

javascript 复制代码 
export default {
  methods: {
    updateChart() {
      const chart = echarts.getInstanceByDom(document.getElementById('chart'))
      // 更新图表的配置项
      const option = {
        // 新的配置项
      }
      // 更新图表
      chart.setOption(option)
    }
  }
}

通过以上步骤，你可以在 Vue2 中使用 ECharts 来创建和更新图表。记得在组件销毁时调用 dispose 方法来销毁图表实例，以释放资源。

javascript 复制代码 
export default {
  beforeDestroy() {
    const chart = echarts.getInstanceByDom(document.getElementById('chart'))
    chart.dispose()
  }
}

示例

基本柱状图

  • 柱状图（或称条形图）是一种通过柱形的长度来表现数据大小的一种常用图表类型。
  • 设置柱状图的方式，是将 series 的 type 设为 'bar'。

后台代码

java 复制代码 
@RestController
@RequestMapping("/bill")
@CrossOrigin
public class BillController {
    @RequestMapping("/product")
    public Object bill(){
        Map<String,Object> resultMap = new HashMap<>();
        List<String> productNameList = new ArrayList<>();
        List<Integer> productNumberList = new ArrayList<>();
        Collections.addAll(productNameList,"电脑","鼠标","键盘","鼠标垫","显示器","扩展屏");
        Collections.addAll(productNumberList,200,220,317,211,179,302);
        resultMap.put("xMap",productNameList);
        resultMap.put("seriesMap",productNumberList);
        return resultMap;
    }
}

vue2代码

配置

serverConfig.js：后台url路径

js 复制代码 
const baseurl = {
  dev: 'http://192.168.2.220:9006',
}
export default baseurl

request.js：配置axios

js 复制代码 
import axios from 'axios'
import baseurl from '@/utils/serverConfig'

// create an axios instance
const service = axios.create({
  baseURL: baseurl.dev, // url = base url + request url
  withCredentials: false, // 是否跨域
  timeout: 60000 // 请求超时
})

export default service

bill.js：访问后台bill模块的接口文件

js 复制代码 
import request from '@/utils/request'
function getBillProductData() {
    return request({
        url: '/bill/product',
        method: 'post',
        //params
    })
}

export default {
    getBillProductData,
}

组件代码

html 复制代码 
<template>
    <div id="chart" style="width:50%;height: 300px;border: 1px solid blue">

    </div>
</template>

<script>
import billReq from '@/api/bill'
export default {
    name: "MyEChart",
    mounted() {
        this.initData()
    },
    data() {
        return {

        }
    },
    methods: {
        initData() {
            billReq.getBillProductData().then(response=>{
                //const resultJson = JSON.stringify(response.data);
                this.createEcharts(response.data.xMap,response.data.seriesMap);
            })
        },
        createEcharts(x,s) {
            let options = {
                //配置项
                tooltip: {
                    //鼠标触摸显示值
                    trigger: "axis",
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {//x轴设置
                    data: x
                },
                yAxis: {},//y轴设置
                series: [
                    {type:'bar',data:s}
                ]
            }
            // 获取容器元素
            var chartContainer = document.getElementById('chart')
            // 创建图表实例
            var chart = this.$echarts.init(chartContainer)
            // 渲染图表
            chart.setOption(options)
            window.addEventListener("resize", function () {
                chart.resize(); //图表自适应的一个方法
            });
        }
    }
}
</script>

<style scoped>

</style>

运行效果

基本折线图

折线图主要用来展示数据项随着时间推移的趋势或变化。

示例代码

组件
html 复制代码 
<template>
    <div id="chart" style="width:50%;height: 300px;border: 1px solid blue">

    </div>
</template>

<script>
import billReq from '@/api/bill'
export default {
    name: "ZheEChart",
    mounted() {
        this.initData()
    },
    data() {
        return {

        }
    },
    methods: {
        initData() {
            billReq.getBillProductData().then(response=>{
                //const resultJson = JSON.stringify(response.data);
                this.createEcharts(response.data.xMap,response.data.seriesMap);
            })
        },
        createEcharts(x,s) {
            let options = {
                //配置项
                tooltip: {
                    //鼠标触摸显示值
                    trigger: "axis",
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {//x轴设置
                    type:'category',
                    data: x
                },
                yAxis: {type:'value'},//y轴设置
                series: [
                    {type:'line',data:s}
                ]
            }
            // 获取容器元素
            var chartContainer = document.getElementById('chart')
            // 创建图表实例
            var chart = this.$echarts.init(chartContainer)
            // 渲染图表
            chart.setOption(options)
            window.addEventListener("resize", function () {
                chart.resize(); //图表自适应的一个方法
            });
        }
    }
}
</script>

<style scoped>

</style>

基础饼图

  • 饼图主要用于表现不同类目的数据在总和中的占比。
  • 每个的弧度表示数据数量的比例。
  • 饼图的配置和折线图、柱状图略有不同，不再需要配置坐标轴，而是把数据名称和值都写在系列中。

示例代码

后台
java 复制代码 
    @RequestMapping("/bing")
    public Object bing(){
        List<Map<String,Object>> resultList = new ArrayList<>();
        Map<String,Object> resultMap1 = new HashMap<>();
        resultMap1.put("name","鼠标");
        resultMap1.put("value","45");
        Map<String,Object> resultMap2 = new HashMap<>();
        resultMap2.put("name","鼠标垫");
        resultMap2.put("value","35");
        Map<String,Object> resultMap3 = new HashMap<>();
        resultMap3.put("name","键盘");
        resultMap3.put("value","512");
        Map<String,Object> resultMap4 = new HashMap<>();
        resultMap4.put("name","显示器");
        resultMap4.put("value","233");
        Collections.addAll(resultList,resultMap1,resultMap2,resultMap3,resultMap4);
        return resultList;
    }
前端配置
js 复制代码 
import request from '@/utils/request'
function getBillProductData() {
    return request({
        url: '/bill/product',
        method: 'post',
        //params
    })
}
function getBillProductBing() {
    return request({
        url: '/bill/bing',
        method: 'post',
        //params
    })
}

export default {
    getBillProductData,
    getBillProductBing,
}
组件
html 复制代码 
<template>
    <div id="chart" style="width:50%;height: 300px;border: 1px solid blue">

    </div>
</template>

<script>
import billReq from '@/api/bill'
export default {
    name: "BingEChart",
    mounted() {
        this.initData()
    },
    data() {
        return {

        }
    },
    methods: {
        initData() {
            billReq.getBillProductBing().then(response=>{
                //const resultJson = JSON.stringify(response.data);
                this.createEcharts(response.data);
            })
        },
        createEcharts(s) {
            let options = {
                //配置项
                tooltip: {
                    //鼠标触摸显示值
                    trigger: "axis",
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                series: [
                    {type:'pie',data:s}
                ]
            }
            // 获取容器元素
            var chartContainer = document.getElementById('chart')
            // 创建图表实例
            var chart = this.$echarts.init(chartContainer)
            // 渲染图表
            chart.setOption(options)
            window.addEventListener("resize", function () {
                chart.resize(); //图表自适应的一个方法
            });
        }
    }
}
</script>

<style scoped>

</style>
运行效果

其他

更多内容，参考官网，很详细，很适合学习

相关推荐
SameX几秒前
初识 HarmonyOS Next 的分布式管理：设备发现与认证
前端·harmonyos
Hello-Brand2 分钟前
Java核心知识体系10-线程管理
java·高并发·多线程·并发·多线程模型·线程管理
乐悠小码8 分钟前
数据结构------队列（Java语言描述）
java·开发语言·数据结构·链表·队列
史努比.10 分钟前
Pod控制器
java·开发语言
2的n次方_13 分钟前
二维费用背包问题
java·算法·动态规划
皮皮林55113 分钟前
警惕！List.of() vs Arrays.asList()：这些隐藏差异可能让你的代码崩溃！
java
莳光.13 分钟前
122、java的LambdaQueryWapper的条件拼接实现数据sql中and (column1 =1 or column1 is null)
java·mybatis
程序猿麦小七18 分钟前
基于springboot的景区网页设计与实现
java·spring boot·后端·旅游·景区
weisian15125 分钟前
认证鉴权框架SpringSecurity-2--重点组件和过滤器链篇
java·安全
蓝田～26 分钟前
SpringBoot-自定义注解，拦截器
java·spring boot·后端
热门推荐
01玄机平台应急响应—webshell查杀02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04新版微信小程序获取用户手机号05文件或文件夹名称中有空格如何批量去除06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07【TC3xx芯片】TC3xx芯片电源管理系统PMS详解08优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10【Flutter】基于 GetX 实现 Dio 的生命周期自动化