跨境派

跨境派

跨境派,专注跨境行业新闻资讯、跨境电商知识分享!

当前位置:首页 > 工具系统 > 其他工具 > 前端vue echart自定义图表(柱形图 折线图 饼图 树形结构图 关系图谱 )

前端vue echart自定义图表(柱形图 折线图 饼图 树形结构图 关系图谱 )

时间:2024-04-21 07:30:32 来源:网络cs 作者:利杜鹃 栏目:其他工具 阅读:

标签: 折线  结构  图谱  关系  图表  定义 

  欢迎加入我们的前端组件学习交流群,可添加群主微信,审核通过后入群。

前端组件化开发:使用ECharts快速实现自定义图表

摘要:
随着前端开发技术的发展,组件化开发已成为提高开发效率和降低维护成本的有效手段。本文将介绍如何使用ECharts库进行前端组件化开发,快速实现自定义的图表,包括柱形图、折线图、饼图、树形结构图和关系图谱等。通过结合业务特性的模块拆分策略、模块间的交互方式和构建系统等,可以实现灵活的组件组合和扩展,提高开发效率和降低维护成本。

一、引言

在前端开发中,图表的展示对于数据的可视化具有重要意义。传统的开发方式将图表与整个应用绑定在一起,导致修改或增加新图表变得非常困难。组件化开发可以将图表解耦为独立的组件,单独进行开发和维护,使得开发效率和维护成本得到显著提升。ECharts是一种流行的图表库,提供了丰富的图表类型和交互功能,适用于各种业务场景。

二、技术背景和市场需求

随着Web应用程序的复杂度不断提高,对于前端开发的需求也越来越高。组件化开发是一种有效的手段,可以将复杂的应用拆分为一系列可重复使用的组件,单独进行开发和维护。ECharts是一种广泛使用的图表库,提供了丰富的图表类型和交互功能,适用于各种业务场景。通过使用ECharts进行组件化开发,可以快速实现自定义的图表,满足市场需求。

效果图如下:

c5057cae495379d5308a0e6dff20f665.png

三、技术实现

设计思路

使用ECharts进行组件化开发的设计思路是将图表解耦为独立的组件,使得各个组件可以单独进行开发和维护。在具体实现中,可以根据业务需求对图表进行模块拆分,例如将柱形图拆分为数据获取、图表配置和界面设计等模块。

关键技术

使用ECharts进行组件化开发的关键技术包括:

(1)模块拆分:根据业务需求对图表进行模块拆分,包括数据获取、图表配置和界面设计等模块。
(2)组件封装:将各个模块封装为独立的组件,单独进行开发和维护。
(3)交互设计:根据业务需求设计图表之间的交互方式,例如点击柱形图的某个数据点时弹出详细信息等。
(4)构建系统:使用构建系统将各个组件组合在一起,生成最终的图表。

代码实现

以下是一个使用ECharts实现柱形图的示例代码:

HTML代码部分
复制代码<template>    <view class="content">        <!-- 可视化 -->        <view style="background-color: white; border-radius: 4px; margin-top: -4px;">            <!-- 柱形图 堆叠 -->            <h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px;"> 柱形图 堆叠            </h4>            <div class="mui-content-padded">                <div id="dsj_zscq" style="width: calc(100vw - 40px); height: 280px;"></div>            </div>            <!-- 折线图 -->            <h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px;"> 折线图            </h4>            <div class="mui-content-padded">                <div id="dsj_cxcg" style="width: calc(100vw - 40px); margin: -18px 0px; height: 280px;">                </div>            </div>            <!-- 柱状图 + 折线图-->            <h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px; margin-top: 0px;">                柱状图 + 折线图 </h4>            <div class="mui-content-padded">                <div id="dsj_zlhjl" style="width: calc(100vw - 40px); height: 290px;"></div>            </div>            <!-- 有效知识产权结构 -->            <h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px; margin-top: 0px;">                饼图 </h4>            <div class="mui-content-padded">                <div id="dsj_zscqjg" style="width: calc(100vw - 40px); height: 306px;"></div>            </div>            <!-- 专利iPC结构 -->            <h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px; margin-top: 0px;">                树形结构图 </h4>            <div class="mui-content-padded">                <div id="dsj_zlipc_content"                    style="margin-left: -10px;  width: calc(100vw - 40px); height: auto; margin-bottom: 30px;">                </div>            </div>            <!-- 柱状图 -->            <h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px; margin-top: 0px;">                柱状图 </h4>            <div class="mui-content-padded">                <div id="dsj_zljz" style="width: calc(100vw - 40px); height: 280px;"></div>            </div>            <!-- 专利法律状态分布 -->            <h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px; margin-top: 0px;">                饼图 </h4>            <div class="mui-content-padded">                <div id="dsj_zlfl" style="width: calc(100vw - 40px); height: 280px;"></div>            </div>            <!-- 专利寿命分布 -->            <h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px; margin-top: 0px;">                柱状图 </h4>            <div class="mui-content-padded">                <div id="dsj_zlsm" style="width: calc(100vw - 40px); height: 280px;"></div>            </div>            <!-- 树形结构图 -->            <h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px; margin-top: 0px;">                树形结构图 </h4>            <div class="mui-content-padded">                <div id="dsj_zllhsq" style="width: calc(100vw - 40px); height: auto; margin-bottom: 30px;">                </div>            </div>        </view>    </view></template>
JS代码 (引入组件 填充数据)
复制代码<script>    import myIndex from '../index/index.js'    export default {        data() {            return {                title: 'Hello'            }        },        mounted() {            this.refreshEchartData();        },        methods: {            refreshEchartData() {                // 返回数据需在json转换格式工具 转成Json格式                let result = {                    "data": {                        "unionCompanyNum": 4,                        "goldList": [{                            "isNewRecord": true,                            "comId": "1",                            "socialCode": "123456",                            "fmsqYx": "1",                            "cfmwyxzscqsl": "1",                            "years": "1",                            "yxzscqsl": "1",                            "dnzlhjl": "1"                        }],                        "patentLifeList": [{                            "isNewRecord": true,                            "comId": "1",                            "socialCode": "123456",                            "percentage": "1",                            "quantity": "1",                            "scope": "1-3",                            "totalNum": "1"                        }, {                            "isNewRecord": true,                            "comId": "1",                            "socialCode": "123456",                            "percentage": "1",                            "quantity": "1",                            "scope": "3-5",                            "totalNum": "2"                        }, {                            "isNewRecord": true,                            "comId": "1",                            "socialCode": "123456",                            "percentage": "1",                            "quantity": "3",                            "scope": "5-10",                            "totalNum": "3"                        }, {                            "isNewRecord": true,                            "comId": "1",                            "socialCode": "123456",                            "percentage": "1",                            "quantity": "3",                            "scope": "10-",                            "totalNum": "4"                        }],                        "patentValueList": [{                            "isNewRecord": true,                            "comId": "1",                            "socialCode": "123456",                            "fmgbZs": "1",                            "fmsqYx": "1",                            "syxxYx": "1",                            "wgsjYx": "1",                            "scope": "0-5",                            "totalNum": "1",                            "percentageHighRights": "1",                            "percentageHigh": "1",                            "dspw": "1",                            "jslypw": "1"                        }, {                            "isNewRecord": true,                            "comId": "1",                            "socialCode": "123456",                            "fmgbZs": "1",                            "fmsqYx": "1",                            "syxxYx": "1",                            "wgsjYx": "1",                            "scope": "5-10",                            "totalNum": "1",                            "percentageHighRights": "1",                            "percentageHigh": "1",                            "dspw": "1",                            "jslypw": "1"                        }, {                            "isNewRecord": true,                            "comId": "1",                            "socialCode": "123456",                            "fmgbZs": "1",                            "fmsqYx": "2",                            "syxxYx": "3",                            "wgsjYx": "4",                            "scope": "90-100",                            "totalNum": "10"                        }],                        "legalList": [{                            "isNewRecord": true,                            "comId": "1",                            "socialCode": "123456",                            "underTrial": "1",                            "invalid": "1",                            "efficient": "1",                            "totalNum": "1",                            "percentage": "1"                        }],                        "propertyRightList": [{                            "isNewRecord": true,                            "comId": "1",                            "socialCode": "123456",                            "fmgbZs": "1",                            "fmgbZsP": "1",                            "fmsqYx": "1",                            "fmsqYxP": "1",                            "syxxYx": "1",                            "syxxYxP": "1",                            "wgsjYx": "1",                            "wgsjYxP": "1",                            "rzYx": "1",                            "rzYxP": "1",                            "maxPercentage": "1",                            "maxPercentageRights": "1",                            "dspw": "1",                            "jslypw": "1"                        }],                        "unionPatentNum": 13,                        "ipcList": [{                            "isNewRecord": true,                            "comId": "1",                            "socialCode": "123456",                            "ipcDept": "1",                            "ipcClass": "1",                            "ipcNum": "1",                            "ipcZbClass": "1",                            "ipcZb": "1",                            "dspw": "1",                            "jslypw": "1"                        }],                        "yearList": [{                            "isNewRecord": true,                            "comId": "1",                            "fmgbZs": "1",                            "fmsqYx": "1",                            "syxxYx": "1",                            "wgsjYx": "1",                            "rzYx": "1",                            "years": "2022",                            "dnkjcxcgkbjshl": "1",                            "socialCode": "123456"                        }, {                            "isNewRecord": true,                            "comId": "1",                            "years": "2023",                            "dnkjcxcgkbjshl": "2",                            "socialCode": "123456"                        }, {                            "isNewRecord": true,                            "comId": "1",                            "years": "2026",                            "dnkjcxcgkbjshl": "6",                            "socialCode": "123456"                        }, {                            "isNewRecord": true,                            "comId": "1",                            "years": "2027",                            "dnkjcxcgkbjshl": "7",                            "socialCode": "123456"                        }],                        "unionList": [{                            "isNewRecord": true,                            "comId": "1",                            "socialCode": "123456",                            "unionName": "测试5",                            "unionNum": "5",                            "unionCompany": "1"                        }, {                            "isNewRecord": true,                            "comId": "1",                            "socialCode": "123456",                            "unionName": "测试4",                            "unionNum": "4",                            "unionCompany": "1"                        }, {                            "isNewRecord": true,                            "comId": "1",                            "socialCode": "123456",                            "unionName": "测试3",                            "unionNum": "3",                            "unionCompany": "1"                        }, {                            "isNewRecord": true,                            "comId": "1",                            "socialCode": "123456",                            "unionName": "测试1",                            "unionNum": "1",                            "unionCompany": "1"                        }]                    },                    "statusCode": 200,                    "header": {                        "date": "Tue, 30 May 2023 07:08:28 GMT",                        "powered-by": "JeeSite V5.0.1 0",                        "transfer-encoding": "chunked",                        "content-type": "application/json"                    },                    "errMsg": "request:ok"                };                let resultData = result.data;                if (resultData.yearList != undefined && resultData.yearList.length > 0) {                    console.log('执行图表1');                    // 填充图表1 2                    myIndex.fillChartOneTwo(resultData.yearList);                }                if (resultData.goldList != undefined && resultData.goldList.length > 0) {                    // 填充图表3                    myIndex.fillChartThree(resultData.goldList);                }                if (resultData.propertyRightList != undefined && resultData.propertyRightList.length > 0) {                    // 填充图表4                    myIndex.fillChartFour(resultData.propertyRightList);                }                if (resultData.ipcList != undefined && resultData.ipcList.length > 0) {                    // 填充图表5                    myIndex.fillChartFive(resultData.ipcList);                }                if (resultData.patentValueList != undefined && resultData.patentValueList.length > 0) {                    // 填充图表6                    myIndex.fillChartSix(resultData.patentValueList);                }                if (resultData.legalList != undefined && resultData.legalList.length > 0) {                    // 填充图表7 法律                    myIndex.fillChartSeven(resultData.legalList);                }                if (resultData.patentLifeList != undefined && resultData.patentLifeList.length > 0) {                    // 填充图表8 寿命                    myIndex.fillChartEight(resultData.patentLifeList);                }                if (resultData.unionList != undefined && resultData.unionList.length > 0) {                    // 填充图表9 专利联合                    myIndex.fillChartNine(resultData, "广汽集团");                }            }        }    }</script>
CSS
复制代码<style>    .content {        display: flex;        flex-direction: column;        align-items: center;        justify-content: center;    }    .mui-content-padded {        margin: 10px 8px;    }    .mui-content-padded div {        font-size: 13px;    }</style>
四、性能优化与应用场景

通过组件化开发,可以将图表解耦为独立的组件,单独进行开发和维护。这使得在性能优化和应用场景方面具有以下优势:

性能优化:通过将图表解耦为独立的组件,可以针对各个组件进行优化,例如优化数据获取速度、调整图表渲染效果等。这样可以提高整个应用程序的性能。应用场景:通过将图表封装为独立的组件,可以方便地将不同图表集成到各种业务场景中,例如Web应用程序、移动应用程序等。这有助于提高应用程序的可扩展性和灵活性。

五、结论

使用ECharts进行前端组件化开发可以快速实现自定义的图表,提高开发效率和降低维护成本。通过将图表解耦为独立的组件,单独进行开发和维护,可以满足各种业务需求。未来,随着前端开发技术的不断发展,组件化开发将在更多的领域得到应用和发展。

阅读全文下载完整组件代码请关注

本文链接:https://www.kjpai.cn/news/2024-04-21/160821.html,文章来源:网络cs,作者:利杜鹃,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。

文章评论

跨境派是跨境电商综合服务平台,为您搜集整理跨境电商最新新闻资讯、行业动态、平台政策、运营干货、综合服务、相关工具软件等讯息。

© 2019-2021 www.kjpai.cn 版权所有:跨境派

(本站只是一个分享跨境资讯、行业新闻、行业知识的网站,属个人网站,并非公司、机构、或者其他组织。)

蜘蛛地图备案号:豫ICP备2022015993号-2