本文共 3372 字，大约阅读时间需要 11 分钟。

echarts 基础使用及实践案例

本篇博客主要记录了在项目中使用 ECharts 进行数据可视化的经历，内容将围绕 ECharts 的安装配置、基于 Vue 的实现以及自适应图表展示等主题展开，供后续开发参考。

echarts 官方入门案例

ECharts 是一个强大的数据可视化工具，其官方文档提供了详细的入门案例，值得参考。以下是常用的操作步骤：

以下是典型的 HTML 和 JavaScript 代码示例：

个人 Demo 实现（窗口自适应）

在实际项目中，图表的自适应能力显得尤为重要。通过自定义 JavaScript 模块，可以实现窗口大小变化时图表自动调整的功能。以下是实现 self-adaptive 的代码示例：

// echarts 自适应 JSvar EleResize = {    // ...(完整自适应逻辑，建议参考原文获取完整代码)`;// 在 Vue 组件中引入使用import { EleResize } from '../util/esresize';// 在 HTML 中添加容器
   
// 在 CSS 中设置#ywlxtjChart {    width: 100%;    height: 320px;}// 在 JS 中使用export default {    data() {        return {            // ...        }    },    mounted() {        this.itemQuantityApi();    },    methods: {        itemQuantityApi() {            // 内容较多，建议查看完整代码            // ...        },        realstate(data) {            // 数据处理并渲染            // ...        }    }    // ...}

多图表切换渲染 Demo

在实际场景中，通常需要多个图表之间切换渲染，尤其是在无数据情况下需要显示提示信息。以下是实现的代码逻辑：

完整代码示例如下：

import echarts from 'echarts';import { EleResize } from '../util/esresize';export default {    data() {        return {            bdcsxbjlTabItem: ['本周', '本月', '本年'],            bdcsxbjlCur: 1,            bdcsxbjlChart: '',            noDataTipText: null        };    },    mounted() {        this.itemQuantityApi();    },    methods: {        itemQuantityApi() {            this.Axios.get(...)                .then(res => {                    if (res.data.length === 0) {                        this.bdcsxbjlChart.dispose();                        // 设置提示文本                        if (this.bdcsxbjlCur === 0) {                            this.noDataTipText = '本周暂无不动产事项办理';                        } else if (this.bdcsxbjlCur === 1) {                            this.noDataTipText = '本月暂无不动产事项办理';                        } else {                            this.noDataTipText = '本年暂无不动产事项办理';                        }                    } else {                        this.noDataTipText = null;                        setTimeout(() => {                            this.bdcsxbjlChart = echarts.init(document.getElementById('realestate'));                            this.realestate(res.data);                        }, 0);                    }                });        },        realstate(data) {            const option = {                // ...配置项            };            this.bdcsxbjlChart.setOption(option);            // 自适应设置            let resizeDiv = document.getElementById('realestate');            let listener = () => {                this.bdcsxbjlChart.resize();            };            EleResize.on(resizeDiv, listener);        }    }};

ECharts 配置与注意事项

安装配置

cnpm install echarts

2. 自适应容器 JS：

// 未要自定义优化后的脚本...

---

关于本文

本文通过个人实践总结了 ECharts 的基础使用方法与一些实用技巧，内容涵盖了 ECharts 的安装、配置、多图表切换展示以及自适应图表实现等方面。整篇文章旨在提供实用价值，同时也对 ECharts 使用过程中的注意事项进行了总结，希望对其他开发者有所帮助。

转载地址：http://wrytz.baihongyu.com/