devbox
在线问答5
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

1.Echarts的简单使用_echarts连接数据库

作者：在线问答5 | 2024-07-15 08:18:03

赞

踩

echarts连接数据库

目录

1  下载echarts.min.js

2  使用示例

3  其他参数

4  echarts社区

4.1  找社区

4.2  找想要的效果

4.3  移植到自己的项目上

4.3.1  方法一

4.3.2  方法二

4.4  调试样式

Echarts是做前端数据可视化的，数据可视化是将数据做成图表，常见的可视化库有D3.js，ECharts.js,Highchart.js,AntV等

ECharts官网地址 Apache ECharts

进入后点击所有示例

示例中有各种图像

1  下载echarts.min.js

有很多种下载方式，只要最后能下载到echarts.min.js就行

打开后ctrl+s保存

2  使用示例

之后找到想要的示例，然后点击

点击下载示例

下载后会得到一个html文件

将这里引用echarts.min.js改为本地

  • 如果用上面的方式无法下载echarts.min.js，用浏览器直接访问这个链接然后保存也可以下载echarts.min.js

如果样式上没有调整的话，填入你需要的数据就行了

3  其他参数

除此之外还有很多参数，常用的参数大类有下面这些

  • title 标题组件
  • tooltip 提示框组件
  • legend 图例组件
  • toolbox 工具栏
  • grid 直角坐标系内绘图网格
  • xAxis 直角坐标系grid中的x轴
  • yAxis 直角坐标系grid中的y轴
  • serise 图标类型
  • color 调色盘颜色列表

这个用的时候去官网查手册就行

4  echarts社区

4.1  找社区

上面都是官方的示例，只靠官方自己开发的东西有时不能满足我们的所有需求，这个时候我们只能找其他开发者创作的东西，以前在官网中有 社区->Gallery

这里面有很多非官方创作者创造的东西

现在这个gallery在官网中没有了，你可以简单搜索一下，得到一些替代品

比如 echarts图表集

4.2  找想要的效果

用法与Echarts官方差不多，比如我看这个水球的效果感觉很好，我就点它

打开之后是这样的，左边是代码，右边是效果

首先要先看Echarts的版本，你去任何一个网站，他应该都会告诉你echarts的版本是什么，我这里给提示了，是4.1.0

他可以支持的版本有很多，在这里可以选，选择后可以看效果，如果与自己项目的版本不一致需要考虑一下

4.3  移植到自己的项目上

下面这两种方法实际上殊途同归，最后结果一样，但过程有所不同

4.3.1  方法一

按F12，看一下人家这个水球都引入什么了

发现右侧的图表本质上是一个iframe，里面引入了4个JS

我们可以发现引入了4个JS

  • echarts-liquidfill.min.js
  • jquery.min.js
  • main.js
  • echarts.min.js

除了 echarts-liquidfill.min.js 其余的三个都可以通过右键src的链接搞到

echarts-liquidfill.min.js可以在这里面搞到

之后我们看一下这段代码，发现代码的目的是改动option这个变量

这个option我们是很熟悉的，他就是echarts图表的配置项

我们现在随便下载一个官方示例，替换掉官方示例的option，并引入我们之前看到的4个JS文件

  • main.js很明显它不是一个库的名字，推测是页面左侧的代码，所以我不引入
  • jQuery.js也先不引入，如果有问题它后面会告诉我，少$符号这种东西
  1. <!DOCTYPE html>
  2. <html lang="zh-CN" style="height: 100%">
  3. <head>
  4.   <meta charset="utf-8">
  5. </head>
  6. <body style="height: 100%; margin: 0">
  7.   <div id="container" style="height: 100%"></div>
  8. </body>
  9. <script src="./4.1.0_echarts.min.js"></script>
  10. <script src="./echarts-liquidfill.min.js"></script>
  11. <script type="text/javascript">
  12. var dom = document.getElementById('container');
  13. var myChart = echarts.init(dom, null, {
  14.     renderer: 'canvas',
  15.     useDirtyRect: false
  16. });
  17. var app = {};
  18.  
  19. var option;
  20.  
  21. const series = [
  22.     {
  23.         type: 'liquidFill',
  24.         shape: 'circle',
  25.         radius: '80%',
  26.         center: ['50%', '50%'],
  27.         data: [0.6, 0.5, 0.4],
  28.         // 球体配置
  29.         outline: {
  30.             borderDistance: 0,
  31.             itemStyle: {
  32.                 borderWidth: 2,
  33.                 borderColor: '#3dfff6',
  34.                 shadowBlur: 20,
  35.                 shadowColor: '#12786f'
  36.             }
  37.         },
  38.         color: ['rgba(50, 255, 238, .6)', 'rgba(154, 255, 247, .6)'],
  39.         backgroundStyle: {
  40.             color: 'transparent',
  41.         },
  42.  
  43.         label: {
  44.             show: true,
  45.             textStyle: {
  46.                 color: '#12786f',
  47.                 insideColor: '#12786f',
  48.                 fontSize: 28
  49.             }
  50.         },
  51.         label: {
  52.             show: true,
  53.             textStyle: {
  54.                 color: '#12786f',
  55.                 insideColor: '#12786f',
  56.                 fontSize: 40
  57.             },
  58.             formatter: params => {
  59.                 return `${(params.value * 100).toFixed(0)}%\n {a|百分比}`
  60.             },
  61.             rich:{
  62.                 a: {
  63.                     fontSize: 24,
  64.                 }
  65.             }
  66.         }
  67.     },
  68. ]
  69.  
  70. option = { series,backgroundColor: 'rgba(0, 0, 0, 0.8)' }
  71.  
  72. if (option && typeof option === 'object') {
  73.     myChart.setOption(option);
  74. }
  75.  
  76. window.addEventListener('resize', myChart.resize);
  77. </script>
  78. </html>

这个时候效果已经出来了

4.3.2  方法二

直接拿这里的iframe，iframe其实不算好拿的，如果只有个div这样的就能好拿

下面演示一下怎么拿

对网页使用ctrl+s保存网页

发现除了一个html之外还有一个文件夹

iframe一定是一个html文件，我们搜索一下，发现有一个editer.html

打开之后发现就是之前看到的iframe(之前你是知道内容的)

把这个html复制出来，然后格式化该页代码

之后再简单搞一下

  1. <!DOCTYPE html>
  2. <html style="height: 100%">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. </head>
  6. <body style="height: 100%; margin: 0">
  7.     <div id="container" style="height: 100%; -webkit-tap-highlight-color: transparent; user-select: none;"_echarts_instance_="ec_1675405420806">
  8.         <div
  9.             style="position: relative; overflow: hidden; width: 744px; height: 458px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
  10.             <canvas data-zr-dom-id="zr_0" width="930" height="572"
  11.                 style="position: absolute; left: 0px; top: 0px; width: 744px; height: 458px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
  12.         </div>
  13.     </div>
  14. </body>
  15. <script id="echartsjs" src="../../4.1.0_echarts.min.js"></script>
  16. <script type="text/javascript" charset="UTF-8" src="../../echarts-liquidfill.min.js"></script>
  17. <script id="codejs" type="text/javascript">
  18.     dom = document.getElementById("container");
  19.     myChart = echarts.init(dom);
  20.     app = {};
  21.  
  22.  
  23.     const series = [
  24.         {
  25.             type: 'liquidFill',
  26.             shape: 'circle',
  27.             radius: '80%',
  28.             center: ['50%', '50%'],
  29.             data: [0.6, 0.5, 0.4],
  30.             // 球体配置
  31.             outline: {
  32.                 borderDistance: 0,
  33.                 itemStyle: {
  34.                     borderWidth: 2,
  35.                     borderColor: '#3dfff6',
  36.                     shadowBlur: 20,
  37.                     shadowColor: '#12786f'
  38.                 }
  39.             },
  40.             color: ['rgba(50, 255, 238, .6)', 'rgba(154, 255, 247, .6)'],
  41.             backgroundStyle: {
  42.                 color: 'transparent',
  43.             },
  44.  
  45.             label: {
  46.                 show: true,
  47.                 textStyle: {
  48.                     color: '#12786f',
  49.                     insideColor: '#12786f',
  50.                     fontSize: 28
  51.                 }
  52.             },
  53.             label: {
  54.                 show: true,
  55.                 textStyle: {
  56.                     color: '#12786f',
  57.                     insideColor: '#12786f',
  58.                     fontSize: 40
  59.                 },
  60.                 formatter: params => {
  61.                     return `${(params.value * 100).toFixed(0)}%\n {a|百分比}`
  62.                 },
  63.                 rich: {
  64.                     a: {
  65.                         fontSize: 24,
  66.                     }
  67.                 }
  68.             }
  69.         },
  70.     ]
  71.  
  72.     option = { series, backgroundColor: 'rgba(0, 0, 0, 0.8)' }
  73.  
  74.     if (option && typeof option === 'object') {
  75.         myChart.setOption(option);
  76.     }
  77. </script>
  78. </html>

4.4  调试样式

如果先调样式然后应用，发现并不能在自己的项目中应用，是比较费时间的

调试样式只需要对option进行修改了，看文档比较麻烦，我们一般直接看变量来蒙

  • 开源的东西他本质上是想让你用，所以在用法上他不会搞得特别晦涩

比如上面这个circle就是圆形，我们可以尝试使用rectangle看它会不会变成一个矩形，修改之后点击播放发现可以变成矩形

这里大致猜一猜应该是百分比的值，对应右侧的三个波浪

我们可以给他都加20%看看，发现可以适用

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

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

  

闽ICP备14008679号