devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：2023面试高手 | 2024-04-15 11:38:55

赞

踩

vue 图表 自定义工具

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

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

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

一、引言

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

二、技术背景和市场需求

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

效果图如下:

c5057cae495379d5308a0e6dff20f665.png

三、技术实现

  1. 设计思路

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

  1. 关键技术

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

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

  1. 代码实现

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

HTML代码部分
复制代码
  1. <template>
  2.     <view class="content">
  3.  
  4.         <!-- 可视化 -->
  5.         <view style="background-color: white; border-radius: 4px; margin-top: -4px;">
  6.  
  7.             <!-- 柱形图 堆叠 -->
  8.             <h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px;"> 柱形图 堆叠
  9.             </h4>
  10.             <div class="mui-content-padded">
  11.  
  12.                 <div id="dsj_zscq" style="width: calc(100vw - 40px); height: 280px;"></div>
  13.  
  14.             </div>
  15.  
  16.             <!-- 折线图 -->
  17.             <h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px;"> 折线图
  18.             </h4>
  19.             <div class="mui-content-padded">
  20.  
  21.                 <div id="dsj_cxcg" style="width: calc(100vw - 40px); margin: -18px 0px; height: 280px;">
  22.                 </div>
  23.  
  24.             </div>
  25.  
  26.             <!-- 柱状图 + 折线图-->
  27.             <h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px; margin-top: 0px;">
  28.                 柱状图 + 折线图 </h4>
  29.             <div class="mui-content-padded">
  30.  
  31.                 <div id="dsj_zlhjl" style="width: calc(100vw - 40px); height: 290px;"></div>
  32.  
  33.             </div>
  34.  
  35.             <!-- 有效知识产权结构 -->
  36.             <h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px; margin-top: 0px;">
  37.                 饼图 </h4>
  38.             <div class="mui-content-padded">
  39.  
  40.                 <div id="dsj_zscqjg" style="width: calc(100vw - 40px); height: 306px;"></div>
  41.  
  42.             </div>
  43.  
  44.             <!-- 专利iPC结构 -->
  45.             <h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px; margin-top: 0px;">
  46.                 树形结构图 </h4>
  47.             <div class="mui-content-padded">
  48.  
  49.                 <div id="dsj_zlipc_content"
  50.                     style="margin-left: -10px;  width: calc(100vw - 40px); height: auto; margin-bottom: 30px;">
  51.                 </div>
  52.  
  53.             </div>
  54.  
  55.             <!-- 柱状图 -->
  56.             <h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px; margin-top: 0px;">
  57.                 柱状图 </h4>
  58.             <div class="mui-content-padded">
  59.  
  60.                 <div id="dsj_zljz" style="width: calc(100vw - 40px); height: 280px;"></div>
  61.  
  62.             </div>
  63.  
  64.             <!-- 专利法律状态分布 -->
  65.             <h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px; margin-top: 0px;">
  66.                 饼图 </h4>
  67.             <div class="mui-content-padded">
  68.  
  69.                 <div id="dsj_zlfl" style="width: calc(100vw - 40px); height: 280px;"></div>
  70.  
  71.             </div>
  72.  
  73.             <!-- 专利寿命分布 -->
  74.             <h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px; margin-top: 0px;">
  75.                 柱状图 </h4>
  76.             <div class="mui-content-padded">
  77.  
  78.                 <div id="dsj_zlsm" style="width: calc(100vw - 40px); height: 280px;"></div>
  79.  
  80.             </div>
  81.  
  82.             <!-- 树形结构图 -->
  83.             <h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px; margin-top: 0px;">
  84.                 树形结构图 </h4>
  85.             <div class="mui-content-padded">
  86.  
  87.                 <div id="dsj_zllhsq" style="width: calc(100vw - 40px); height: auto; margin-bottom: 30px;">
  88.                 </div>
  89.  
  90.             </div>
  91.  
  92.         </view>
  93.     </view>
  94. </template>
JS代码 （引入组件 填充数据）
复制代码
  1. <script>
  2.     import myIndex from '../index/index.js'
  3.  
  4.     export default {
  5.         data() {
  6.             return {
  7.                 title: 'Hello'
  8.             }
  9.         },
  10.         mounted() {
  11.  
  12.             this.refreshEchartData();
  13.  
  14.         },
  15.         methods: {
  16.  
  17.             refreshEchartData() {
  18.  
  19.                 // 返回数据需在json转换格式工具 转成Json格式
  20.                 let result = {
  21.                     "data": {
  22.                         "unionCompanyNum": 4,
  23.                         "goldList": [{
  24.                             "isNewRecord": true,
  25.                             "comId": "1",
  26.                             "socialCode": "123456",
  27.                             "fmsqYx": "1",
  28.                             "cfmwyxzscqsl": "1",
  29.                             "years": "1",
  30.                             "yxzscqsl": "1",
  31.                             "dnzlhjl": "1"
  32.                         }],
  33.                         "patentLifeList": [{
  34.                             "isNewRecord": true,
  35.                             "comId": "1",
  36.                             "socialCode": "123456",
  37.                             "percentage": "1",
  38.                             "quantity": "1",
  39.                             "scope": "1-3",
  40.                             "totalNum": "1"
  41.                         }, {
  42.                             "isNewRecord": true,
  43.                             "comId": "1",
  44.                             "socialCode": "123456",
  45.                             "percentage": "1",
  46.                             "quantity": "1",
  47.                             "scope": "3-5",
  48.                             "totalNum": "2"
  49.                         }, {
  50.                             "isNewRecord": true,
  51.                             "comId": "1",
  52.                             "socialCode": "123456",
  53.                             "percentage": "1",
  54.                             "quantity": "3",
  55.                             "scope": "5-10",
  56.                             "totalNum": "3"
  57.                         }, {
  58.                             "isNewRecord": true,
  59.                             "comId": "1",
  60.                             "socialCode": "123456",
  61.                             "percentage": "1",
  62.                             "quantity": "3",
  63.                             "scope": "10-",
  64.                             "totalNum": "4"
  65.                         }],
  66.                         "patentValueList": [{
  67.                             "isNewRecord": true,
  68.                             "comId": "1",
  69.                             "socialCode": "123456",
  70.                             "fmgbZs": "1",
  71.                             "fmsqYx": "1",
  72.                             "syxxYx": "1",
  73.                             "wgsjYx": "1",
  74.                             "scope": "0-5",
  75.                             "totalNum": "1",
  76.                             "percentageHighRights": "1",
  77.                             "percentageHigh": "1",
  78.                             "dspw": "1",
  79.                             "jslypw": "1"
  80.                         }, {
  81.                             "isNewRecord": true,
  82.                             "comId": "1",
  83.                             "socialCode": "123456",
  84.                             "fmgbZs": "1",
  85.                             "fmsqYx": "1",
  86.                             "syxxYx": "1",
  87.                             "wgsjYx": "1",
  88.                             "scope": "5-10",
  89.                             "totalNum": "1",
  90.                             "percentageHighRights": "1",
  91.                             "percentageHigh": "1",
  92.                             "dspw": "1",
  93.                             "jslypw": "1"
  94.                         }, {
  95.                             "isNewRecord": true,
  96.                             "comId": "1",
  97.                             "socialCode": "123456",
  98.                             "fmgbZs": "1",
  99.                             "fmsqYx": "2",
  100.                             "syxxYx": "3",
  101.                             "wgsjYx": "4",
  102.                             "scope": "90-100",
  103.                             "totalNum": "10"
  104.                         }],
  105.                         "legalList": [{
  106.                             "isNewRecord": true,
  107.                             "comId": "1",
  108.                             "socialCode": "123456",
  109.                             "underTrial": "1",
  110.                             "invalid": "1",
  111.                             "efficient": "1",
  112.                             "totalNum": "1",
  113.                             "percentage": "1"
  114.                         }],
  115.                         "propertyRightList": [{
  116.                             "isNewRecord": true,
  117.                             "comId": "1",
  118.                             "socialCode": "123456",
  119.                             "fmgbZs": "1",
  120.                             "fmgbZsP": "1",
  121.                             "fmsqYx": "1",
  122.                             "fmsqYxP": "1",
  123.                             "syxxYx": "1",
  124.                             "syxxYxP": "1",
  125.                             "wgsjYx": "1",
  126.                             "wgsjYxP": "1",
  127.                             "rzYx": "1",
  128.                             "rzYxP": "1",
  129.                             "maxPercentage": "1",
  130.                             "maxPercentageRights": "1",
  131.                             "dspw": "1",
  132.                             "jslypw": "1"
  133.                         }],
  134.                         "unionPatentNum": 13,
  135.                         "ipcList": [{
  136.                             "isNewRecord": true,
  137.                             "comId": "1",
  138.                             "socialCode": "123456",
  139.                             "ipcDept": "1",
  140.                             "ipcClass": "1",
  141.                             "ipcNum": "1",
  142.                             "ipcZbClass": "1",
  143.                             "ipcZb": "1",
  144.                             "dspw": "1",
  145.                             "jslypw": "1"
  146.                         }],
  147.                         "yearList": [{
  148.                             "isNewRecord": true,
  149.                             "comId": "1",
  150.                             "fmgbZs": "1",
  151.                             "fmsqYx": "1",
  152.                             "syxxYx": "1",
  153.                             "wgsjYx": "1",
  154.                             "rzYx": "1",
  155.                             "years": "2022",
  156.                             "dnkjcxcgkbjshl": "1",
  157.                             "socialCode": "123456"
  158.                         }, {
  159.                             "isNewRecord": true,
  160.                             "comId": "1",
  161.                             "years": "2023",
  162.                             "dnkjcxcgkbjshl": "2",
  163.                             "socialCode": "123456"
  164.                         }, {
  165.                             "isNewRecord": true,
  166.                             "comId": "1",
  167.                             "years": "2026",
  168.                             "dnkjcxcgkbjshl": "6",
  169.                             "socialCode": "123456"
  170.                         }, {
  171.                             "isNewRecord": true,
  172.                             "comId": "1",
  173.                             "years": "2027",
  174.                             "dnkjcxcgkbjshl": "7",
  175.                             "socialCode": "123456"
  176.                         }],
  177.                         "unionList": [{
  178.                             "isNewRecord": true,
  179.                             "comId": "1",
  180.                             "socialCode": "123456",
  181.                             "unionName": "测试5",
  182.                             "unionNum": "5",
  183.                             "unionCompany": "1"
  184.                         }, {
  185.                             "isNewRecord": true,
  186.                             "comId": "1",
  187.                             "socialCode": "123456",
  188.                             "unionName": "测试4",
  189.                             "unionNum": "4",
  190.                             "unionCompany": "1"
  191.                         }, {
  192.                             "isNewRecord": true,
  193.                             "comId": "1",
  194.                             "socialCode": "123456",
  195.                             "unionName": "测试3",
  196.                             "unionNum": "3",
  197.                             "unionCompany": "1"
  198.                         }, {
  199.                             "isNewRecord": true,
  200.                             "comId": "1",
  201.                             "socialCode": "123456",
  202.                             "unionName": "测试1",
  203.                             "unionNum": "1",
  204.                             "unionCompany": "1"
  205.                         }]
  206.                     },
  207.                     "statusCode": 200,
  208.                     "header": {
  209.                         "date": "Tue, 30 May 2023 07:08:28 GMT",
  210.                         "powered-by": "JeeSite V5.0.1 0",
  211.                         "transfer-encoding": "chunked",
  212.                         "content-type": "application/json"
  213.                     },
  214.                     "errMsg": "request:ok"
  215.                 };
  216.  
  217.                 let resultData = result.data;
  218.  
  219.                 if (resultData.yearList != undefined && resultData.yearList.length > 0) {
  220.                     console.log('执行图表1');
  221.                     // 填充图表1 2
  222.                     myIndex.fillChartOneTwo(resultData.yearList);
  223.  
  224.                 }
  225.                 if (resultData.goldList != undefined && resultData.goldList.length > 0) {
  226.  
  227.                     // 填充图表3
  228.                     myIndex.fillChartThree(resultData.goldList);
  229.  
  230.                 }
  231.                 if (resultData.propertyRightList != undefined && resultData.propertyRightList.length > 0) {
  232.  
  233.                     // 填充图表4
  234.                     myIndex.fillChartFour(resultData.propertyRightList);
  235.  
  236.                 }
  237.                 if (resultData.ipcList != undefined && resultData.ipcList.length > 0) {
  238.  
  239.                     // 填充图表5
  240.                     myIndex.fillChartFive(resultData.ipcList);
  241.  
  242.                 }
  243.                 if (resultData.patentValueList != undefined && resultData.patentValueList.length > 0) {
  244.  
  245.                     // 填充图表6
  246.                     myIndex.fillChartSix(resultData.patentValueList);
  247.  
  248.                 }
  249.                 if (resultData.legalList != undefined && resultData.legalList.length > 0) {
  250.  
  251.                     // 填充图表7 法律
  252.                     myIndex.fillChartSeven(resultData.legalList);
  253.  
  254.                 }
  255.                 if (resultData.patentLifeList != undefined && resultData.patentLifeList.length > 0) {
  256.  
  257.                     // 填充图表8 寿命
  258.                     myIndex.fillChartEight(resultData.patentLifeList);
  259.  
  260.                 }
  261.                 if (resultData.unionList != undefined && resultData.unionList.length > 0) {
  262.  
  263.                     // 填充图表9 专利联合
  264.                     myIndex.fillChartNine(resultData, "广汽集团");
  265.  
  266.                 }
  267.             }
  268.  
  269.         }
  270.     }
  271. </script>
CSS
复制代码
  1. <style>
  2.     .content {
  3.         display: flex;
  4.         flex-direction: column;
  5.         align-items: center;
  6.         justify-content: center;
  7.     }
  8.  
  9.     .mui-content-padded {
  10.         margin: 10px 8px;
  11.     }
  12.  
  13.     .mui-content-padded div {
  14.  
  15.         font-size: 13px;
  16.     }
  17. </style>
四、性能优化与应用场景

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

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

五、结论

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

阅读全文下载完整组件代码请关注微信公众号： 前端组件开发

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/427675
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号