【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 [email protected] --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>
运行效果

其他

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

相关推荐
腾讯TNTWeb前端团队2 小时前
helux v5 发布了，像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
mghio4 小时前
Dubbo 中的集群容错
java·微服务·dubbo
范文杰5 小时前
AI 时代如何更高效开发前端组件？21st.dev 给了一种答案
前端·ai编程
拉不动的猪5 小时前
刷刷题50（常见的js数据通信与渲染问题）
前端·javascript·面试
拉不动的猪6 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy6 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom7 小时前
Astro 框架：快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom7 小时前
了解Nest.js和Next.js：如何选择合适的框架
前端·javascript·面试
uhakadotcom7 小时前
React与Next.js：基础知识及应用场景
前端·面试·github
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04【AUTOSAR 基础软件】Can模块详解（Can栈之驱动模块）05RAG 实践- Ollama+RagFlow 部署本地知识库06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07Mac cursor设置jdk、Maven版本08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09DeepSeek RAGFlow构建本地知识库系统10纯离线部署本地知识库LLM大模型