-
Notifications
You must be signed in to change notification settings - Fork 0
/
4561a0ef.html
1 lines (1 loc) · 146 KB
/
4561a0ef.html
1
<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>Echarts图表的基本使用 | 梦洁小站-属于你我的小天地</title><meta name="author" content="梦洁"><meta name="copyright" content="梦洁"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="Echarts的初始化使用 引入什么的就不多说了,普通的js脚本怎么引入echarts就怎么引入 大概初始化的步骤 获取DOM(用于绘制表格) 依据获取的DOM对象初始化echarts(使得这个DOM对象用于展示图表数据) 书写echarts配置对象 第二步返回的echarts对象调用setOption方法并传入第三步书写的配置对象 别忘记设置Dom容器的宽高了(css设置即可)"><meta property="og:type" content="article"><meta property="og:title" content="Echarts图表的基本使用"><meta property="og:url" content="https://www.dreamlove.top/4561a0ef.html"><meta property="og:site_name" content="梦洁小站-属于你我的小天地"><meta property="og:description" content="Echarts的初始化使用 引入什么的就不多说了,普通的js脚本怎么引入echarts就怎么引入 大概初始化的步骤 获取DOM(用于绘制表格) 依据获取的DOM对象初始化echarts(使得这个DOM对象用于展示图表数据) 书写echarts配置对象 第二步返回的echarts对象调用setOption方法并传入第三步书写的配置对象 别忘记设置Dom容器的宽高了(css设置即可)"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205162354315.png"><meta property="article:published_time" content="2022-05-16T16:25:00.000Z"><meta property="article:modified_time" content="2022-05-16T17:17:16.000Z"><meta property="article:author" content="梦洁"><meta property="article:tag" content="HTML"><meta property="article:tag" content="javscript"><meta property="article:tag" content="echarts"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205162354315.png"><link rel="shortcut icon" href="https://oss.dreamlove.top/i/2024/02/02/nw24wu.png"><link rel="canonical" href="https://www.dreamlove.top/4561a0ef.html"><link rel="preconnect" href="https://lib.baomitu.com"><link rel="preconnect" href="//busuanzi.ibruce.info"><link rel="stylesheet" href="/css/index.css?v=4.13.0"><link rel="stylesheet" href="https://lib.baomitu.com/font-awesome/6.5.1/css/all.min.css"><link rel="stylesheet" href="https://lib.baomitu.com/fancyapps-ui/5.0.33/fancybox/fancybox.min.css" media="print" onload='this.media="all"'><script>const GLOBAL_CONFIG={root:"/",algolia:{appId:"G7A2D1SYPY",apiKey:"49056313a9be02852c7dbedfcb772831",indexName:"blog",hits:{per_page:20},languages:{input_placeholder:"搜索文章",hits_empty:"找不到您查询的内容：${query}",hits_stats:"找到 ${hits} 条结果，用时 ${time} 毫秒"}},localSearch:void 0,translate:void 0,noticeOutdate:void 0,highlight:{plugin:"highlight.js",highlightCopy:!0,highlightLang:!0,highlightHeightLimit:!1},copy:{success:"复制成功",error:"复制错误",noSupport:"浏览器不支持"},relativeDate:{homepage:!1,post:!1},runtime:"天",dateSuffix:{just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},copyright:void 0,lightbox:"fancybox",Snackbar:void 0,infinitegrid:{js:"https://lib.baomitu.com/egjs-infinitegrid/4.11.1/infinitegrid.min.js",buttonText:"加载更多"},isPhotoFigcaption:!1,islazyload:!1,isAnchor:!1,percent:{toc:!0,rightside:!1},autoDarkmode:!1}</script><script id="config-diff">var GLOBAL_CONFIG_SITE={title:"Echarts图表的基本使用",isPost:!0,isHome:!1,isHighlightShrink:!1,isToc:!0,postUpdate:"2022-05-16 17:17:16"}</script><script>(e=>{e.saveToLocal={set:(e,t,o)=>{if(0===o)return;const a={value:t,expiry:Date.now()+864e5*o};localStorage.setItem(e,JSON.stringify(a))},get:e=>{const t=localStorage.getItem(e);if(!t)return;const o=JSON.parse(t);if(!(Date.now()>o.expiry))return o.value;localStorage.removeItem(e)}},e.getScript=(e,t={})=>new Promise((o,a)=>{const n=document.createElement("script");n.src=e,n.async=!0,n.onerror=a,n.onload=n.onreadystatechange=function(){const e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(n.onload=n.onreadystatechange=null,o())},Object.keys(t).forEach(e=>{n.setAttribute(e,t[e])}),document.head.appendChild(n)}),e.getCSS=(e,t=!1)=>new Promise((o,a)=>{const n=document.createElement("link");n.rel="stylesheet",n.href=e,t&&(n.id=t),n.onerror=a,n.onload=n.onreadystatechange=function(){const e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(n.onload=n.onreadystatechange=null,o())},document.head.appendChild(n)}),e.activateDarkMode=()=>{document.documentElement.setAttribute("data-theme","dark"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#0d0d0d")},e.activateLightMode=()=>{document.documentElement.setAttribute("data-theme","light"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#ffffff")};const t=saveToLocal.get("theme");"dark"===t?activateDarkMode():"light"===t&&activateLightMode();const o=saveToLocal.get("aside-status");void 0!==o&&("hide"===o?document.documentElement.classList.add("hide-aside"):document.documentElement.classList.remove("hide-aside"));/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)&&document.documentElement.classList.add("apple")})(window)</script><meta name="generator" content="Hexo 7.1.1"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://oss.dreamlove.top/i/2024/02/02/nw24wu.png" onerror='onerror=null,src="/img/404.png"' alt="avatar"></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">170</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">94</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">70</div></a></div><hr class="custom-hr"><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友情和链接</span></a></div><div class="menus_item"><a class="site-page" href="/navigation/"><i class="fa-fw fas fa-link"></i><span> 链接导航</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 私有化导航</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="https://mark.123916.xyz/"><i class="fa-fw fas fa-database"></i><span> 导航</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://cloud.reassurehome.com/"><i class="fa-fw fas fa-hippo"></i><span> Alist(私有)</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 工具</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="https://short.123916.xyz/027a2"><i class="fa-fw fas fa-paperclip"></i><span> clash免费订阅地址</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://short.123916.xyz/admin/"><i class="fa-fw fas fa-paperclip"></i><span> 短链接生成</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 好玩的</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="https://make.girls.moe/#/"><i class="fa-fw fas fa-database"></i><span> 动漫头像制作</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="http://dfqshy.ysepan.com/"><i class="fa-fw fas fa-database"></i><span> FC游戏大全网盘</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.yikm.net/"><i class="fa-fw fas fa-database"></i><span> 小霸王</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.return8090.com/"><i class="fa-fw fas fa-database"></i><span> 小霸王(广告多)</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="http://farm.dreamlove.top"><i class="fa-fw fas fa-database"></i><span> QQ农场经典版</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://codepip.com/"><i class="fa-fw fas fa-database"></i><span> CssGame</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://photo.123916.xyz/"><i class="fa-fw fas fa-database"></i><span> 有趣的照片</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 其他</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></li><li><a class="site-page child" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://buy.dreamlove.top/"><i class="fa-fw fas fa-heart"></i><span> 购物</span></a></li></ul></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image:url(https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205162354315.png)"><nav id="nav"><span id="blog-info"><a href="/" title="梦洁小站-属于你我的小天地"><span class="site-name">梦洁小站-属于你我的小天地</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友情和链接</span></a></div><div class="menus_item"><a class="site-page" href="/navigation/"><i class="fa-fw fas fa-link"></i><span> 链接导航</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 私有化导航</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="https://mark.123916.xyz/"><i class="fa-fw fas fa-database"></i><span> 导航</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://cloud.reassurehome.com/"><i class="fa-fw fas fa-hippo"></i><span> Alist(私有)</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 工具</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="https://short.123916.xyz/027a2"><i class="fa-fw fas fa-paperclip"></i><span> clash免费订阅地址</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://short.123916.xyz/admin/"><i class="fa-fw fas fa-paperclip"></i><span> 短链接生成</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 好玩的</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="https://make.girls.moe/#/"><i class="fa-fw fas fa-database"></i><span> 动漫头像制作</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="http://dfqshy.ysepan.com/"><i class="fa-fw fas fa-database"></i><span> FC游戏大全网盘</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.yikm.net/"><i class="fa-fw fas fa-database"></i><span> 小霸王</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.return8090.com/"><i class="fa-fw fas fa-database"></i><span> 小霸王(广告多)</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="http://farm.dreamlove.top"><i class="fa-fw fas fa-database"></i><span> QQ农场经典版</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://codepip.com/"><i class="fa-fw fas fa-database"></i><span> CssGame</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://photo.123916.xyz/"><i class="fa-fw fas fa-database"></i><span> 有趣的照片</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 其他</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></li><li><a class="site-page child" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://buy.dreamlove.top/"><i class="fa-fw fas fa-heart"></i><span> 购物</span></a></li></ul></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Echarts图表的基本使用</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-05-16T16:25:00.000Z" title="发表于 2022-05-16 16:25:00">2022-05-16</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-05-16T17:17:16.000Z" title="更新于 2022-05-16 17:17:16">2022-05-16</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/HTML/">HTML</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/HTML/javscript/">javscript</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/HTML/javscript/echarts/">echarts</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/HTML/javscript/echarts/vue/">vue</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">4k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>17分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" data-flag-title="Echarts图表的基本使用"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h3 id="Echarts的初始化使用"><a href="#Echarts的初始化使用" class="headerlink" title="Echarts的初始化使用"></a>Echarts的初始化使用</h3><ul><li><p>引入什么的就不多说了,普通的js脚本怎么引入echarts就怎么引入</p></li><li><p>大概初始化的步骤</p><ul><li><ol><li>获取DOM(用于绘制表格)</li><li>依据获取的DOM对象初始化echarts(使得这个DOM对象用于展示图表数据)</li><li>书写echarts配置对象</li><li>第二步返回的echarts对象调用setOption方法并传入第三步书写的配置对象</li></ol></li></ul></li><li><p><strong>别忘记设置Dom容器的宽高了(css设置即可)</strong></p></li><li><p>好像如果是同一个echarts实例化对象,再次调用setOption方法,不会造成图表全部重新绘制,只会造成部分修改</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//重新设置图表的标题,在这之前已经调用过setOption了</span></span><br><span class="line"><span class="comment">//所以只会重新绘制图表标题</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">table1</span>.<span class="title function_">setOption</span>({</span><br><span class="line"> <span class="attr">title</span>:{</span><br><span class="line"> <span class="attr">text</span>:<span class="variable language_">this</span>.<span class="property">showTitle</span>+<span class="string">"趋势"</span></span><br><span class="line"> },</span><br><span class="line">})</span><br></pre></td></tr></table></figure></li></ul><h4 id="示例代码"><a href="#示例代码" class="headerlink" title="示例代码"></a>示例代码</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> * {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">padding</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-id">#table1</span>{</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">500px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">500px</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"table1"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"table2"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./js/echarts.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//1.获取DOM容器</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> dom1 = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">"#table1"</span>)</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//2.根据DOM容器初始化echarts实例</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> table1 = echarts.<span class="title function_">init</span>(dom1);</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//3.设置echarts展示的数据和设置图表</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> options1 = {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置图表标题</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">title</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//主标题文本</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">text</span>: <span class="string">"数据可视化"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//副标题文本</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">subtext</span>: <span class="string">"echarts的基本使用"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置主标题样式</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">textStyle</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">color</span>: <span class="string">'hotpink'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">fontStyle</span>: <span class="string">'italic'</span></span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置副标题样式</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">subtextStyle</span>:{</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">color</span>:<span class="string">'yellow'</span></span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置居中</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">left</span>: <span class="string">'center'</span></span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置x坐标</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">xAxis</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: [<span class="string">"衣服"</span>, <span class="string">"直播"</span>, <span class="string">"游戏"</span>, <span class="string">"电影"</span>],</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置y坐标</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">yAxis</span>: {</span></span><br><span class="line"><span class="language-javascript"> </span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//系列的设置,绘制怎么样类型的图表,数据的展示在这里</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">series</span>:[</span></span><br><span class="line"><span class="language-javascript"> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">type</span>:<span class="string">'bar'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>:[<span class="number">20</span>,<span class="number">30</span>,<span class="number">26</span>,<span class="number">24</span>],</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置颜色</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">color</span>:<span class="string">'red'</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> ]</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//4.传入写好的配置项</span></span></span><br><span class="line"><span class="language-javascript"> table1.<span class="title function_">setOption</span>(options1);</span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure><h4 id="效果图"><a href="#效果图" class="headerlink" title="效果图"></a>效果图</h4><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205131139048.png"></p><h4 id="Echarts的setOption配置对象"><a href="#Echarts的setOption配置对象" class="headerlink" title="Echarts的setOption配置对象"></a>Echarts的setOption配置对象</h4><ul><li><code>grid</code>设置echarts的对于容器的位置 <a target="_blank" rel="noopener" href="https://echarts.apache.org/zh/option.html#grid">官网API</a><ul><li>left,right,top,bottom设置为0可以使得表格占满容器</li></ul></li></ul><h4 id="Echarts的series的配置对象"><a href="#Echarts的series的配置对象" class="headerlink" title="Echarts的series的配置对象"></a>Echarts的series的配置对象</h4><ul><li><p>设置渐变填充折线图</p><ul><li><p>关键配置参数<code>areaStyle</code> <a target="_blank" rel="noopener" href="https://echarts.apache.org/zh/option.html#series-line.areaStyle">官方API</a></p></li><li><p><a target="_blank" rel="noopener" href="https://echarts.apache.org/zh/option.html#color">官方渐变参考代码</a></p></li><li><p>代码</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">series</span>:[</span><br><span class="line">{</span><br><span class="line"> <span class="attr">type</span>:<span class="string">"line"</span>,</span><br><span class="line"> <span class="attr">data</span>:[<span class="number">45</span>,<span class="number">35</span>,<span class="number">25</span>,<span class="number">87</span>,<span class="number">45</span>,<span class="number">89</span>],</span><br><span class="line"> <span class="attr">itemStyle</span>:{</span><br><span class="line"> <span class="comment">// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</span></span><br><span class="line"> <span class="attr">opacity</span>:<span class="number">0</span>,</span><br><span class="line"> <span class="comment">//颜色设置为紫色</span></span><br><span class="line"> <span class="attr">color</span>:<span class="string">'purple'</span></span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//areaStyle区域填充样式。设置后显示成区域面积图。</span></span><br><span class="line"> <span class="comment">//https://echarts.apache.org/zh/option.html#series-line.areaStyle</span></span><br><span class="line"> <span class="attr">areaStyle</span>:{</span><br><span class="line"> <span class="comment">//支持渐变 https://echarts.apache.org/zh/option.html#color</span></span><br><span class="line"> <span class="attr">color</span>:{</span><br><span class="line"> <span class="comment">//线性渐变</span></span><br><span class="line"> <span class="attr">type</span>: <span class="string">'line'</span>,</span><br><span class="line"> <span class="attr">x</span>: <span class="number">0</span>,</span><br><span class="line"> <span class="attr">y</span>: <span class="number">0</span>,</span><br><span class="line"> <span class="attr">r</span>: <span class="number">0</span>,</span><br><span class="line"> <span class="attr">colorStops</span>: [{</span><br><span class="line"> <span class="attr">offset</span>: <span class="number">0</span>, <span class="attr">color</span>: <span class="string">'#ce9dce'</span> <span class="comment">// 0% 处的颜色</span></span><br><span class="line"> }, </span><br><span class="line"></span><br><span class="line"> {</span><br><span class="line"> <span class="attr">offset</span>: <span class="number">1</span>, <span class="attr">color</span>: <span class="string">'#dcb9dc'</span> <span class="comment">// 100% 处的颜色</span></span><br><span class="line"> } </span><br><span class="line"> ],</span><br><span class="line"> <span class="attr">global</span>: <span class="literal">false</span> <span class="comment">// 缺省为 false</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">],</span><br></pre></td></tr></table></figure></li></ul></li></ul><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205132032206.png"></p><h3 id="反向柱形图-也就是X轴和Y轴反过来显示"><a href="#反向柱形图-也就是X轴和Y轴反过来显示" class="headerlink" title="反向柱形图(也就是X轴和Y轴反过来显示)"></a>反向柱形图(也就是X轴和Y轴反过来显示)</h3><ul><li><p>原来的x轴变为了y轴,原来的y轴变为了x轴</p></li><li><p>只需要设置yAxis对象当中的<code>type:"category"</code>和x轴的数据放置在yAxis当中,然后把x部分删除<br><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205132058653.png"></p></li><li><p>代码</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> * {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">padding</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-id">#table1</span>,<span class="selector-id">#table2</span>{</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">500px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">500px</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"table1"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//1.获取DOM容器</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> dom1 = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">"#table1"</span>)</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//2.根据DOM容器初始化echarts实例</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> table1 = echarts.<span class="title function_">init</span>(dom1);</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//3.设置echarts展示的数据和设置图表</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> options1 = {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置图表标题</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">title</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//主标题文本</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">text</span>: <span class="string">"数据可视化"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//副标题文本</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">subtext</span>: <span class="string">"echarts的基本使用"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置主标题样式</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">textStyle</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">color</span>: <span class="string">'hotpink'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">fontStyle</span>: <span class="string">'italic'</span></span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置副标题样式</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">subtextStyle</span>:{</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">color</span>:<span class="string">'yellow'</span></span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置居中</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">left</span>: <span class="string">'center'</span></span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置x坐标</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">xAxis</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// data: ["衣服", "直播", "游戏", "电影"],</span></span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置y坐标</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">yAxis</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">type</span>:<span class="string">'category'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: [<span class="string">"衣服"</span>, <span class="string">"直播"</span>, <span class="string">"游戏"</span>, <span class="string">"电影"</span>],</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//系列的设置,绘制怎么样类型的图表,数据的展示在这里</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">series</span>:[</span></span><br><span class="line"><span class="language-javascript"> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">type</span>:<span class="string">'bar'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>:[<span class="number">20</span>,<span class="number">30</span>,<span class="number">26</span>,<span class="number">24</span>],</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置颜色</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">color</span>:<span class="string">'red'</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> ],</span></span><br><span class="line"><span class="language-javascript"> </span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//4.传入写好的配置项</span></span></span><br><span class="line"><span class="language-javascript"> table1.<span class="title function_">setOption</span>(options1);</span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure></li><li><p>效果图<br><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205132059769.png"></p></li></ul><h3 id="反向柱形图实现防进度条的静态图"><a href="#反向柱形图实现防进度条的静态图" class="headerlink" title="反向柱形图实现防进度条的静态图"></a>反向柱形图实现防进度条的静态图</h3><h4 id="效果"><a href="#效果" class="headerlink" title="效果"></a>效果</h4><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205132106738.png"></p><h4 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> table1 = echarts.<span class="title function_">init</span>(<span class="variable language_">this</span>.<span class="property">$refs</span>.<span class="property">dom</span>);</span><br><span class="line">table1.<span class="title function_">setOption</span>({</span><br><span class="line"> <span class="comment">//设置x轴,现在x轴在水平线上了</span></span><br><span class="line"> <span class="comment">//min最小值 范围</span></span><br><span class="line"> <span class="comment">//max:最大值 范围</span></span><br><span class="line"> <span class="attr">xAxis</span>:{<span class="attr">show</span>:<span class="literal">false</span>,<span class="attr">min</span>:<span class="number">0</span>,<span class="attr">max</span>:<span class="number">100</span>},</span><br><span class="line"> <span class="comment">//设置y轴,现在y轴在垂直线上了</span></span><br><span class="line"> <span class="attr">yAxis</span>:{<span class="attr">show</span>:<span class="literal">false</span>,<span class="attr">type</span>:<span class="string">"category"</span>},</span><br><span class="line"> <span class="comment">//设置位置</span></span><br><span class="line"> <span class="attr">grid</span>:{</span><br><span class="line"> <span class="attr">left</span>:<span class="number">0</span>,</span><br><span class="line"> <span class="attr">right</span>:<span class="number">0</span>,</span><br><span class="line"> <span class="attr">top</span>:<span class="number">0</span>,</span><br><span class="line"> <span class="attr">bottom</span>:<span class="number">0</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">series</span>:[</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">type</span>:<span class="string">'bar'</span>,</span><br><span class="line"> <span class="attr">barWidth</span>:<span class="number">10</span>,</span><br><span class="line"> <span class="comment">//设置颜色</span></span><br><span class="line"> <span class="attr">color</span>:<span class="string">"#92b532"</span>,</span><br><span class="line"> <span class="attr">data</span>:[<span class="number">78</span>],</span><br><span class="line"> <span class="comment">//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。 </span></span><br><span class="line"> <span class="comment">//label:{</span></span><br><span class="line"> <span class="comment">// show:true,</span></span><br><span class="line"> <span class="comment">// //内容</span></span><br><span class="line"> <span class="comment">// formatter:"|",</span></span><br><span class="line"> <span class="comment">// //标签的位置。</span></span><br><span class="line"> <span class="comment">// position:'right'</span></span><br><span class="line"> <span class="comment">//}</span></span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line">})</span><br></pre></td></tr></table></figure><h3 id="一个容器显示多个图表"><a href="#一个容器显示多个图表" class="headerlink" title="一个容器显示多个图表"></a>一个容器显示多个图表</h3><ul><li><p>使用配置对象当中的<code>series</code>属性</p></li><li><p>这就是为什么<code>series</code>是一个数组而不是一个对象了~ <a href="#series">series图</a></p><ul><li><p>series当中的格式</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> options = {</span><br><span class="line"> ...</span><br><span class="line"> <span class="attr">series</span>:[</span><br><span class="line"> <span class="comment">//图表1</span></span><br><span class="line"> {....},</span><br><span class="line"> <span class="comment">//图表2</span></span><br><span class="line"> {....}</span><br><span class="line"> ]</span><br><span class="line"> ...</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul></li></ul><h4 id="代码-1"><a href="#代码-1" class="headerlink" title="代码"></a>代码</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> *{</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">padding</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> <span class="selector-id">#dom1</span>{</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">500px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">500px</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"dom1"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./js/echarts.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> table1 = echarts.<span class="title function_">init</span>(<span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">"#dom1"</span>))</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> options = {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置标题</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">title</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//标题文字</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">text</span>: <span class="string">"月销售数据"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//副标题文字</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">subtext</span>: <span class="string">"销售人员必看!"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">left</span>:<span class="string">'center'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//主标题样式</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">textStyle</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">color</span>: <span class="string">'red'</span></span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//副标题样式</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">subtextStyle</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">color</span>: <span class="string">'yellow'</span></span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//x轴</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">xAxis</span>:{</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>:[<span class="string">'Mon'</span>,<span class="string">'Tue'</span>,<span class="string">'Wed'</span>,<span class="string">'Thu'</span>,<span class="string">'Fri'</span>,<span class="string">'Sat'</span>,<span class="string">'Sun'</span>]</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// y轴</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">yAxis</span>:{},</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//一系列数据展示</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">series</span>:[</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//图表1-显示柱形图</span></span></span><br><span class="line"><span class="language-javascript"> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">type</span>:<span class="string">"bar"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>:[<span class="number">125</span>,<span class="number">200</span>,<span class="number">150</span>,<span class="number">68</span>,<span class="number">52</span>,<span class="number">103</span>,<span class="number">146</span>],</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">color</span>:<span class="string">"#5470c6"</span>,</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//图表2-显示折线图</span></span></span><br><span class="line"><span class="language-javascript"> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">type</span>:<span class="string">'line'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>:[<span class="number">125</span>,<span class="number">200</span>,<span class="number">150</span>,<span class="number">68</span>,<span class="number">52</span>,<span class="number">103</span>,<span class="number">146</span>],</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">color</span>:<span class="string">'red'</span>,</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//图表3-饼图</span></span></span><br><span class="line"><span class="language-javascript"> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">type</span>:<span class="string">'pie'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置饼图半径(像素值)</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">radius</span>:<span class="number">20</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>:[</span></span><br><span class="line"><span class="language-javascript"> {<span class="attr">value</span>:<span class="number">125</span>,<span class="attr">name</span>:<span class="string">'Mon'</span>},</span></span><br><span class="line"><span class="language-javascript"> {<span class="attr">value</span>:<span class="number">200</span>,<span class="attr">name</span>:<span class="string">'Tue'</span>},</span></span><br><span class="line"><span class="language-javascript"> {<span class="attr">value</span>:<span class="number">150</span>,<span class="attr">name</span>:<span class="string">'Wed'</span>},</span></span><br><span class="line"><span class="language-javascript"> {<span class="attr">value</span>:<span class="number">68</span>,<span class="attr">name</span>:<span class="string">"Thu"</span>},</span></span><br><span class="line"><span class="language-javascript"> {<span class="attr">value</span>:<span class="number">52</span>,<span class="attr">name</span>:<span class="string">'Fri'</span>},</span></span><br><span class="line"><span class="language-javascript"> {<span class="attr">value</span>:<span class="number">103</span>,<span class="attr">name</span>:<span class="string">'Sat'</span>},</span></span><br><span class="line"><span class="language-javascript"> {<span class="attr">vaue</span>:<span class="number">146</span>,<span class="attr">name</span>:<span class="string">'Sun'</span>}</span></span><br><span class="line"><span class="language-javascript"> ],</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置宽度</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">width</span>:<span class="number">200</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">height</span>:<span class="number">200</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置位置</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">left</span>:<span class="number">200</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">top</span>:<span class="number">50</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> ]</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> table1.<span class="title function_">setOption</span>(options)</span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure><h4 id="效果图-1"><a href="#效果图-1" class="headerlink" title="效果图"></a>效果图</h4><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205170001504.png"></p><h3 id="dataset数据集的使用"><a href="#dataset数据集的使用" class="headerlink" title="dataset数据集的使用"></a>dataset数据集的使用</h3><ul><li><p>我理解的数据集就是<code>series</code>当中的每一个对象所对应的数据,方便我们统一处理数据</p></li><li><p>主要注意的是:</p><ul><li>如果我们设置了dataset数据集,而没有在series当中的对象当中使用encode去指明映射那一列</li><li>ECharts 就按最常见的理解进行默认映射：<strong>X 坐标轴声明为类目轴</strong>，默认情况下会自动对应到 dataset.source 中的第一列；</li><li>三个柱图系列，一一对应到 dataset.source 中后面每一列。(也就是按照series当中对象的顺序依次对应)</li></ul></li><li><p>dataset数据集基本使用简略代码</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">option = {</span><br><span class="line"> <span class="attr">dataset</span>: {</span><br><span class="line"> <span class="attr">source</span>: [</span><br><span class="line"> <span class="comment">// 每一列称为一个『维度』。</span></span><br><span class="line"> <span class="comment">// 这里分别是维度 0、1、2、3、4。</span></span><br><span class="line"> [<span class="number">12</span>, <span class="number">44</span>, <span class="number">55</span>, <span class="number">66</span>, <span class="number">2</span>],</span><br><span class="line"> [<span class="number">23</span>, <span class="number">6</span>, <span class="number">16</span>, <span class="number">23</span>, <span class="number">1</span>],</span><br><span class="line"> ]</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">series</span>: {</span><br><span class="line"> <span class="attr">type</span>: <span class="string">'xxx'</span>,</span><br><span class="line"> <span class="attr">encode</span>: {</span><br><span class="line"> <span class="comment">//使用0维度数据</span></span><br><span class="line"> <span class="attr">x</span>: <span class="number">0</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p><a target="_blank" rel="noopener" href="https://echarts.apache.org/handbook/zh/concepts/dataset/#%E5%9C%A8%E7%B3%BB%E5%88%97%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE">具体可参考Echarts官网数据集概念</a></p></li></ul><h4 id="代码-2"><a href="#代码-2" class="headerlink" title="代码"></a>代码</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> *{</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">padding</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> <span class="selector-id">#dom1</span>{</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">500px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">500px</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"dom1"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./js/echarts.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> table1 = echarts.<span class="title function_">init</span>(<span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">"#dom1"</span>))</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置数据集</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> data = [</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//分别对应柱状图,折线图,饼图</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 如果后面没有设置encode映射</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//ECharts 就按最常见的理解进行默认映射：</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//X 坐标轴声明为类目轴，默认情况下会自动对应到 dataset.source 中的第一列；</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//三个柱图系列，一一对应到 dataset.source 中后面每一列。(也就是按照series当中对象的顺序依次对应)</span></span></span><br><span class="line"><span class="language-javascript"> [<span class="string">'Mon'</span>,<span class="string">'Mon'</span>,<span class="number">125</span>,<span class="number">45</span>,<span class="number">35</span>],</span></span><br><span class="line"><span class="language-javascript"> [<span class="string">'Tue'</span>,<span class="string">'Tue'</span>,<span class="number">54</span>,<span class="number">53</span>,<span class="number">15</span>],</span></span><br><span class="line"><span class="language-javascript"> [<span class="string">'Wed'</span>,<span class="string">'Wed'</span>,<span class="number">85</span>,<span class="number">86</span>,<span class="number">38</span>],</span></span><br><span class="line"><span class="language-javascript"> [<span class="string">'Thu'</span>,<span class="string">'Thu'</span>,<span class="number">79</span>,<span class="number">86</span>,<span class="number">88</span>],</span></span><br><span class="line"><span class="language-javascript"> [<span class="string">'Fri'</span>,<span class="string">'Fri'</span>,<span class="number">103</span>,<span class="number">138</span>,<span class="number">49</span>],</span></span><br><span class="line"><span class="language-javascript"> [<span class="string">'Sat'</span>,<span class="string">'Sat'</span>,<span class="number">187</span>,<span class="number">251</span>,<span class="number">86</span>],</span></span><br><span class="line"><span class="language-javascript"> [<span class="string">'Sun'</span>,<span class="string">'Sun'</span>,<span class="number">56</span>,<span class="number">154</span>,<span class="number">78</span>],</span></span><br><span class="line"><span class="language-javascript"> ]</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> options = {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置数据集</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">dataset</span>:{</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">source</span>:data</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置标题</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">title</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//标题文字</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">text</span>: <span class="string">"月销售数据"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//副标题文字</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">subtext</span>: <span class="string">"销售人员必看!"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">left</span>:<span class="string">'center'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//主标题样式</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">textStyle</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">color</span>: <span class="string">'red'</span></span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//副标题样式</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">subtextStyle</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">color</span>: <span class="string">'yellow'</span></span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//x轴</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">xAxis</span>:{</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>:[<span class="string">'Mon'</span>,<span class="string">'Tue'</span>,<span class="string">'Wed'</span>,<span class="string">'Thu'</span>,<span class="string">'Fri'</span>,<span class="string">'Sat'</span>,<span class="string">'Sun'</span>]</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// y轴</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">yAxis</span>:{},</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//一系列数据展示</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">series</span>:[</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//图表1-显示柱形图</span></span></span><br><span class="line"><span class="language-javascript"> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">type</span>:<span class="string">"bar"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">color</span>:<span class="string">"#5470c6"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">encode</span>:{</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 把 数据集所有数组当中,下标为2的数组的值为映射为折线图当中的y值</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">y</span>:<span class="number">2</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//图表2-显示折线图</span></span></span><br><span class="line"><span class="language-javascript"> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">type</span>:<span class="string">'line'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">color</span>:<span class="string">'red'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">encode</span>:{</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 把 数据集所有数组当中,下标为3的数组的值为映射为折线图当中的y值</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">y</span>:<span class="number">3</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//图表3-饼图</span></span></span><br><span class="line"><span class="language-javascript"> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">type</span>:<span class="string">'pie'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置饼图半径(像素值)</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">radius</span>:<span class="number">20</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// data:[],</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">encode</span>:{</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 指定数据项的名称</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">itemName</span>:<span class="number">1</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 把 数据集所有数组当中,下标为5的数组的值为映射为饼图的值</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">value</span>:<span class="number">4</span></span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置宽度</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">width</span>:<span class="number">200</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">height</span>:<span class="number">200</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置位置</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">left</span>:<span class="number">100</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">top</span>:<span class="number">50</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> ]</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> table1.<span class="title function_">setOption</span>(options)</span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure><h4 id="效果图-2"><a href="#效果图-2" class="headerlink" title="效果图"></a>效果图</h4><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205131526702.png"></p><h3 id="Echarts内置组件的使用"><a href="#Echarts内置组件的使用" class="headerlink" title="Echarts内置组件的使用"></a>Echarts内置组件的使用</h3><ul><li>组件,可以理解为一块块的功能~ <a href="#%E7%BB%84%E4%BB%B6">组件图</a></li></ul><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205131726449.jpg" alt="echarts组件"></p><ul><li><p>使用也很简单,只需要在配置对象当中添加即可,比如<code>toolbox component</code></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> options = {</span><br><span class="line"> ...</span><br><span class="line"> <span class="attr">toolbox</span>:{},</span><br><span class="line"> ...</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul><h4 id="toolbox"><a href="#toolbox" class="headerlink" title="toolbox"></a>toolbox</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//toolBox工具箱</span></span><br><span class="line"><span class="attr">toolbox</span>:{</span><br><span class="line"> <span class="attr">show</span>:<span class="literal">true</span>,</span><br><span class="line"> <span class="attr">feature</span>:{</span><br><span class="line"> <span class="comment">//保存为图片</span></span><br><span class="line"> <span class="attr">saveAsImage</span>:{<span class="attr">title</span>:<span class="string">"保存为图片"</span>},</span><br><span class="line"> <span class="comment">//配置项还原(图表的一些配置项目会恢复默认)</span></span><br><span class="line"> <span class="attr">restore</span>:{<span class="attr">title</span>:<span class="string">"配置项还原"</span>},</span><br><span class="line"> <span class="comment">//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。</span></span><br><span class="line"> <span class="attr">dataView</span>:{<span class="attr">title</span>:<span class="string">"数据视图"</span>},</span><br><span class="line"> <span class="comment">// 数据区域缩放。目前只支持直角坐标系的缩放。</span></span><br><span class="line"> <span class="attr">dataZoom</span>:{<span class="attr">title</span>:{<span class="attr">zoom</span>:<span class="string">"数据区域缩放"</span>,<span class="attr">back</span>:<span class="string">"还原数据区域"</span>}},</span><br><span class="line"> <span class="comment">//动态类型切换</span></span><br><span class="line"> <span class="attr">magicType</span>:{</span><br><span class="line"> <span class="attr">title</span>:{<span class="attr">line</span>:<span class="string">"切换为折线图"</span>,<span class="attr">bar</span>:<span class="string">"切换为柱形图"</span>},</span><br><span class="line"> <span class="attr">type</span>:[<span class="string">"line"</span>,<span class="string">'bar'</span>]</span><br><span class="line"> } </span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ul><li>效果图<br><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205131618020.png"></li></ul><h4 id="dataZoom"><a href="#dataZoom" class="headerlink" title="dataZoom"></a>dataZoom</h4><ul><li><p>配置对象当中添加 <code>dataZoom:{ }</code> 即可</p></li><li><p>效果图<br><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205131620373.png"></p></li></ul><h4 id="legend"><a href="#legend" class="headerlink" title="legend"></a>legend</h4><ul><li><p>图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name（如果是饼图，也可以是饼图单个数据的 name）</p></li><li><p>示例</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> options = {</span><br><span class="line"> ...</span><br><span class="line"> <span class="attr">series</span>:[</span><br><span class="line"> {<span class="attr">name</span>:<span class="string">"柱形图"</span>,...},</span><br><span class="line"> {<span class="attr">name</span>:<span class="string">"折线图"</span>,...},</span><br><span class="line"> {<span class="attr">name</span>:<span class="string">"饼图"</span>,...},</span><br><span class="line"> ],</span><br><span class="line"> <span class="attr">legend</span>:{</span><br><span class="line"> <span class="comment">//每一项代码一个系列对象当中的name</span></span><br><span class="line"> <span class="attr">data</span>:[<span class="string">"柱形图"</span>,<span class="string">"折线图"</span>,<span class="string">"饼图"</span>]</span><br><span class="line"> },</span><br><span class="line"> ...</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>效果图<br><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205131624102.png"></p></li></ul><h3 id="其他一些常用的配置项目"><a href="#其他一些常用的配置项目" class="headerlink" title="其他一些常用的配置项目"></a>其他一些常用的配置项目</h3><h4 id="设置提示-tooltip"><a href="#设置提示-tooltip" class="headerlink" title="设置提示 tooltip"></a>设置提示 tooltip</h4><ul><li><p>tooltip:{ }</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> options = {</span><br><span class="line"> ...</span><br><span class="line"> <span class="attr">tooltip</span>:{},</span><br><span class="line"> ...</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>效果<br><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205131604726.png"></p></li></ul><h4 id="双坐标轴-Y轴"><a href="#双坐标轴-Y轴" class="headerlink" title="双坐标轴-Y轴"></a>双坐标轴-Y轴</h4><ul><li>如果需要设置多个Y轴,则配置对象当中<code>yAxis</code>从{ } 改为 [ {…},{…} ]</li><li>系列当中的对象设置为哪一个y轴需要设置<code>yAxisIndex</code>属性</li></ul><h5 id="代码-3"><a href="#代码-3" class="headerlink" title="代码"></a>代码</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> * {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">padding</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-id">#dom1</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">800px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">400px</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"dom1"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./js/echarts.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> table1 = echarts.<span class="title function_">init</span>(<span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">"#dom1"</span>))</span></span><br><span class="line"><span class="language-javascript"> table1.<span class="title function_">setOption</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//设置标题</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">title</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">text</span>: <span class="string">"双坐标"</span></span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">xAxis</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//适用于离散的类目数据 -- 散点图</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">type</span>: <span class="string">'category'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: [<span class="string">'游戏'</span>, <span class="string">'直播'</span>, <span class="string">'农业'</span>, <span class="string">'服饰'</span>],</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">yAxis</span>: [</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//y坐标轴1 设置</span></span></span><br><span class="line"><span class="language-javascript"> {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//显示Y轴的线</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">axisLine</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">show</span>: <span class="literal">true</span></span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//显示Y轴的刻度</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">axisTick</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">show</span>: <span class="literal">true</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//y坐标轴2 设置</span></span></span><br><span class="line"><span class="language-javascript"> {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//显示Y轴的线</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">axisLine</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">show</span>: <span class="literal">true</span></span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//显示Y轴的刻度</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">axisTick</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">show</span>: <span class="literal">true</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> ],</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">series</span>: [</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//柱形图</span></span></span><br><span class="line"><span class="language-javascript"> {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//指明使用那一条y轴索引</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">yAxisIndex</span>:<span class="number">0</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">type</span>: <span class="string">'bar'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: [<span class="number">20</span>, <span class="number">35</span>, <span class="number">48</span>, <span class="number">80</span>],</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//散点图</span></span></span><br><span class="line"><span class="language-javascript"> {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//指明使用那一条y轴索引</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">yAxisIndex</span>:<span class="number">1</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">type</span>: <span class="string">'scatter'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: [<span class="number">88</span>, <span class="number">99</span>, <span class="number">124</span>, <span class="number">200</span>],</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">color</span>: <span class="string">'red'</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> ]</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure><ul><li>效果图<br><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205131729534.png"></li></ul><h4 id="圆滑折线图"><a href="#圆滑折线图" class="headerlink" title="圆滑折线图"></a>圆滑折线图</h4><ul><li><p>series当中的对象添加<code>smooth:true</code>即可</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">table.<span class="title function_">setOption</span>({</span><br><span class="line">...</span><br><span class="line"><span class="attr">series</span>:[</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">type</span>:<span class="string">"line"</span>,</span><br><span class="line"> <span class="comment">//设置圆滑</span></span><br><span class="line"> <span class="attr">smooth</span>:<span class="literal">true</span>,</span><br><span class="line"> }</span><br><span class="line">]</span><br><span class="line">...</span><br><span class="line">})</span><br></pre></td></tr></table></figure></li><li><p>效果图</p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205151040708.png" alt="smooth=true的效果"></p></li></ul><h4 id="添加事件监控"><a href="#添加事件监控" class="headerlink" title="添加事件监控"></a>添加事件监控</h4><ul><li><p><a target="_blank" rel="noopener" href="https://echarts.apache.org/zh/api.html#events">官方API中Event网站</a></p></li><li><p>echarts经过<code>init</code>后返回实例化对象,实例化对象调用on即可(方法和原生js的addEventListener一样)</p></li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> echarts <span class="keyword">from</span> <span class="string">"echarts"</span>;</span><br><span class="line"><span class="keyword">var</span> table1 = echarts.<span class="title function_">init</span>(<span class="variable language_">this</span>.<span class="property">$refs</span>.<span class="property">dom1</span>);</span><br><span class="line"><span class="comment">//不适用节流阀</span></span><br><span class="line">table1.<span class="title function_">on</span>(<span class="string">'mousemove'</span>,<span class="function">()=></span>{</span><br><span class="line"> <span class="keyword">let</span> {name,value} = params;</span><br><span class="line"> <span class="comment">//重新绘制标题</span></span><br><span class="line"> table1.<span class="title function_">setOption</span>({</span><br><span class="line"> <span class="attr">title</span>:{</span><br><span class="line"> <span class="attr">text</span>:name,</span><br><span class="line"> <span class="attr">subtext</span>:value</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line">});</span><br><span class="line"><span class="comment">//使用节流阀</span></span><br><span class="line"> <span class="comment">//按需引入</span></span><br><span class="line"><span class="keyword">import</span> {throttle} <span class="keyword">from</span> <span class="string">"lodash/throttle"</span>;</span><br><span class="line">table1.<span class="title function_">on</span>(<span class="string">'mousemove'</span>,<span class="title function_">throttle</span>(<span class="function">(<span class="params">params</span>)=></span>{</span><br><span class="line"> <span class="keyword">let</span> {name,value} = params;</span><br><span class="line"> <span class="comment">//重新绘制标题</span></span><br><span class="line"> table1.<span class="title function_">setOption</span>({</span><br><span class="line"> <span class="attr">title</span>:{</span><br><span class="line"> <span class="attr">text</span>:name,</span><br><span class="line"> <span class="attr">subtext</span>:value</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line">},<span class="number">20</span>));</span><br></pre></td></tr></table></figure><ul><li><p>返回的参数<code>params</code>的值</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="comment">// 当前点击的图形元素所属的组件名称，</span></span><br><span class="line"> <span class="comment">// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。</span></span><br><span class="line"> <span class="attr">componentType</span>: string,</span><br><span class="line"> <span class="comment">// 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。</span></span><br><span class="line"> <span class="attr">seriesType</span>: string,</span><br><span class="line"> <span class="comment">// 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。</span></span><br><span class="line"> <span class="attr">seriesIndex</span>: number,</span><br><span class="line"> <span class="comment">// 系列名称。当 componentType 为 'series' 时有意义。</span></span><br><span class="line"> <span class="attr">seriesName</span>: string,</span><br><span class="line"> <span class="comment">// 数据名，类目名</span></span><br><span class="line"> <span class="attr">name</span>: string,</span><br><span class="line"> <span class="comment">// 数据在传入的 data 数组中的 index</span></span><br><span class="line"> <span class="attr">dataIndex</span>: number,</span><br><span class="line"> <span class="comment">// 传入的原始数据项</span></span><br><span class="line"> <span class="attr">data</span>: <span class="title class_">Object</span>,</span><br><span class="line"> <span class="comment">// sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，</span></span><br><span class="line"> <span class="comment">// dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。</span></span><br><span class="line"> <span class="comment">// 其他大部分图表中只有一种 data，dataType 无意义。</span></span><br><span class="line"> <span class="attr">dataType</span>: string,</span><br><span class="line"> <span class="comment">// 传入的数据值</span></span><br><span class="line"> <span class="attr">value</span>: number|<span class="title class_">Array</span>,</span><br><span class="line"> <span class="comment">// 数据图形的颜色。当 componentType 为 'series' 时有意义。</span></span><br><span class="line"> <span class="attr">color</span>: string,</span><br><span class="line"> <span class="comment">// 用户自定义的数据。只在 graphic component 和自定义系列（custom series）</span></span><br><span class="line"> <span class="comment">// 中生效，如果节点定义上设置了如：{type: 'circle', info: {some: 123}}。</span></span><br><span class="line"> <span class="attr">info</span>: *</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul><h3 id="其他图"><a href="#其他图" class="headerlink" title="其他图"></a>其他图</h3><h4 id="实例-Instance"><a href="#实例-Instance" class="headerlink" title="实例(Instance)"></a>实例(Instance)</h4><ul><li>实例是指在同一个容器所绘制所有的图表的统称。每一个图表实例中可以多含多种图类型，每一个图表实例必须单独占用一个DOM节点。</li></ul><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205131732554.png"></p><h4 id="系列-series"><a href="#系列-series" class="headerlink" title="系列(series)"></a>系列(series)</h4><ul><li>系列是指图表的类型（如柱形图、饼图、折线图等），在一个图表实例中可以存在多个图表系列。<a name="series"></a></li></ul><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205131731095.png"></p><h4 id="组件-component"><a href="#组件-component" class="headerlink" title="组件(component)"></a>组件(component)</h4><ul><li>组件是指图表的各个组件部分，如标题、X轴、Y轴，工具栏提示等。 <a name="组件"></a></li></ul><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205131731890.png"></p></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta"><i class="fas fa-circle-user fa-fw"></i>文章作者: </span><span class="post-copyright-info"><a href="https://www.dreamlove.top">梦洁</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta"><i class="fas fa-square-arrow-up-right fa-fw"></i>文章链接: </span><span class="post-copyright-info"><a href="https://www.dreamlove.top/4561a0ef.html">https://www.dreamlove.top/4561a0ef.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta"><i class="fas fa-circle-exclamation fa-fw"></i>版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://www.dreamlove.top" target="_blank">梦洁小站-属于你我的小天地</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/HTML/">HTML</a><a class="post-meta__tags" href="/tags/javscript/">javscript</a><a class="post-meta__tags" href="/tags/echarts/">echarts</a></div><div class="post_share"><div class="social-share" data-image="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205162354315.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://lib.baomitu.com/butterfly-extsrc/1.1.3/sharejs/dist/css/share.min.css" media="print" onload='this.media="all"'><script src="https://lib.baomitu.com/butterfly-extsrc/1.1.3/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/565d1ba5.html" title="尚品汇Vue项目 前台+后台完成品源码(含在线演示)"><img class="cover" src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205161708464.jpg" onerror='onerror=null,src="/img/404.png"' alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">尚品汇Vue项目 前台+后台完成品源码(含在线演示)</div></div></a></div><div class="next-post pull-right"><a href="/9131599a.html" title="vue-admin-template里面的异步路由,常量路由,任意路由的添加,记录笔记"><img class="cover" src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205162344719.jpg" onerror='onerror=null,src="/img/404.png"' alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">vue-admin-template里面的异步路由,常量路由,任意路由的添加,记录笔记</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/75bf0d7.html" title="webpack构建工具的学习"><img class="cover" src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205291452280.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-05-28</div><div class="title">webpack构建工具的学习</div></div></a></div><div><a href="/e031a88b.html" title="前端面试可能会问到的知识点记录"><img class="cover" src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202207181536689.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-07-18</div><div class="title">前端面试可能会问到的知识点记录</div></div></a></div><div><a href="/45513c12.html" title="React多个echarts图表在一个页面的使用"><img class="cover" src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202403181528746.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-03-02</div><div class="title">React多个echarts图表在一个页面的使用</div></div></a></div><div><a href="/4687ae16.html" title="canvas基本使用"><img class="cover" src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205132349743.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-05-13</div><div class="title">canvas基本使用</div></div></a></div><div><a href="/415dc4d6.html" title="flex设置为1后为什么要设置width为0,和布局超出省略号为什么会超出容器,为什么会没有用和在苹果环境下获取屏幕高度需要注意的点"><img class="cover" src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202304101654704.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-11-17</div><div class="title">flex设置为1后为什么要设置width为0,和布局超出省略号为什么会超出容器,为什么会没有用和在苹果环境下获取屏幕高度需要注意的点</div></div></a></div><div><a href="/7429306f.html" title="js正则匹配获取分组和正向反向的区别"><img class="cover" src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/20220228215037.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-11-13</div><div class="title">js正则匹配获取分组和正向反向的区别</div></div></a></div></div></div><hr class="custom-hr"><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="artalk-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="https://oss.dreamlove.top/i/2024/02/02/nw24wu.png" onerror='this.onerror=null,this.src="/img/404.png"' alt="avatar"></div><div class="author-info__name">梦洁</div><div class="author-info__description">小小的字,有大大的梦想~分享我的前端学习过程,经历,错误,和一些其他折腾过程</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">170</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">94</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">70</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/superBiuBiuMan"><i class="fab fa-github"></i><span>关注下我(*￣▽￣*)</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="mailto:[email protected]" target="_blank" title="Email"><i class="fas fa-envelope" style="color:#4a7dbe"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">不断更新中,有问题请留言回复(会通过邮箱提醒~)</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#Echarts%E7%9A%84%E5%88%9D%E5%A7%8B%E5%8C%96%E4%BD%BF%E7%94%A8"><span class="toc-number">1.</span> <span class="toc-text">Echarts的初始化使用</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81"><span class="toc-number">1.1.</span> <span class="toc-text">示例代码</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%95%88%E6%9E%9C%E5%9B%BE"><span class="toc-number">1.2.</span> <span class="toc-text">效果图</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Echarts%E7%9A%84setOption%E9%85%8D%E7%BD%AE%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.3.</span> <span class="toc-text">Echarts的setOption配置对象</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Echarts%E7%9A%84series%E7%9A%84%E9%85%8D%E7%BD%AE%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.4.</span> <span class="toc-text">Echarts的series的配置对象</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%8D%E5%90%91%E6%9F%B1%E5%BD%A2%E5%9B%BE-%E4%B9%9F%E5%B0%B1%E6%98%AFX%E8%BD%B4%E5%92%8CY%E8%BD%B4%E5%8F%8D%E8%BF%87%E6%9D%A5%E6%98%BE%E7%A4%BA"><span class="toc-number">2.</span> <span class="toc-text">反向柱形图(也就是X轴和Y轴反过来显示)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%8D%E5%90%91%E6%9F%B1%E5%BD%A2%E5%9B%BE%E5%AE%9E%E7%8E%B0%E9%98%B2%E8%BF%9B%E5%BA%A6%E6%9D%A1%E7%9A%84%E9%9D%99%E6%80%81%E5%9B%BE"><span class="toc-number">3.</span> <span class="toc-text">反向柱形图实现防进度条的静态图</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%95%88%E6%9E%9C"><span class="toc-number">3.1.</span> <span class="toc-text">效果</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81"><span class="toc-number">3.2.</span> <span class="toc-text">代码</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%80%E4%B8%AA%E5%AE%B9%E5%99%A8%E6%98%BE%E7%A4%BA%E5%A4%9A%E4%B8%AA%E5%9B%BE%E8%A1%A8"><span class="toc-number">4.</span> <span class="toc-text">一个容器显示多个图表</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81-1"><span class="toc-number">4.1.</span> <span class="toc-text">代码</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%95%88%E6%9E%9C%E5%9B%BE-1"><span class="toc-number">4.2.</span> <span class="toc-text">效果图</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#dataset%E6%95%B0%E6%8D%AE%E9%9B%86%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">5.</span> <span class="toc-text">dataset数据集的使用</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81-2"><span class="toc-number">5.1.</span> <span class="toc-text">代码</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%95%88%E6%9E%9C%E5%9B%BE-2"><span class="toc-number">5.2.</span> <span class="toc-text">效果图</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Echarts%E5%86%85%E7%BD%AE%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">6.</span> <span class="toc-text">Echarts内置组件的使用</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#toolbox"><span class="toc-number">6.1.</span> <span class="toc-text">toolbox</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#dataZoom"><span class="toc-number">6.2.</span> <span class="toc-text">dataZoom</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#legend"><span class="toc-number">6.3.</span> <span class="toc-text">legend</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%B6%E4%BB%96%E4%B8%80%E4%BA%9B%E5%B8%B8%E7%94%A8%E7%9A%84%E9%85%8D%E7%BD%AE%E9%A1%B9%E7%9B%AE"><span class="toc-number">7.</span> <span class="toc-text">其他一些常用的配置项目</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%AE%BE%E7%BD%AE%E6%8F%90%E7%A4%BA-tooltip"><span class="toc-number">7.1.</span> <span class="toc-text">设置提示 tooltip</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8F%8C%E5%9D%90%E6%A0%87%E8%BD%B4-Y%E8%BD%B4"><span class="toc-number">7.2.</span> <span class="toc-text">双坐标轴-Y轴</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81-3"><span class="toc-number">7.2.1.</span> <span class="toc-text">代码</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%9C%86%E6%BB%91%E6%8A%98%E7%BA%BF%E5%9B%BE"><span class="toc-number">7.3.</span> <span class="toc-text">圆滑折线图</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%B7%BB%E5%8A%A0%E4%BA%8B%E4%BB%B6%E7%9B%91%E6%8E%A7"><span class="toc-number">7.4.</span> <span class="toc-text">添加事件监控</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%B6%E4%BB%96%E5%9B%BE"><span class="toc-number">8.</span> <span class="toc-text">其他图</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AE%9E%E4%BE%8B-Instance"><span class="toc-number">8.1.</span> <span class="toc-text">实例(Instance)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%B3%BB%E5%88%97-series"><span class="toc-number">8.2.</span> <span class="toc-text">系列(series)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6-component"><span class="toc-number">8.3.</span> <span class="toc-text">组件(component)</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/bbed5cd2.html" title="大家好我是夯大力,这是我的影视,大力金刚等系列"><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202410091600476.png" onerror='this.onerror=null,this.src="/img/404.png"' alt="大家好我是夯大力,这是我的影视,大力金刚等系列"></a><div class="content"><a class="title" href="/bbed5cd2.html" title="大家好我是夯大力,这是我的影视,大力金刚等系列">大家好我是夯大力,这是我的影视,大力金刚等系列</a><time datetime="2024-10-21T08:12:21.000Z" title="发表于 2024-10-21 08:12:21">2024-10-21</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/91ff580f.html" title="Pycharm搭配miniConda(Anaconda的轻量版本)建立虚拟环境管理不同项目不同依赖">Pycharm搭配miniConda(Anaconda的轻量版本)建立虚拟环境管理不同项目不同依赖</a><time datetime="2024-10-18T21:22:02.000Z" title="发表于 2024-10-18 21:22:02">2024-10-18</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/50575b3e.html" title="独角数卡,打开商品列表出现Undefined variable form的解决办法"><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202408241535616.png" onerror='this.onerror=null,this.src="/img/404.png"' alt="独角数卡,打开商品列表出现Undefined variable form的解决办法"></a><div class="content"><a class="title" href="/50575b3e.html" title="独角数卡,打开商品列表出现Undefined variable form的解决办法">独角数卡,打开商品列表出现Undefined variable form的解决办法</a><time datetime="2024-08-24T15:31:38.000Z" title="发表于 2024-08-24 15:31:38">2024-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/6ace453b.html" title="前端常用npm库大全-vue,react,通用(持续更新)"><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202408241528979.png" onerror='this.onerror=null,this.src="/img/404.png"' alt="前端常用npm库大全-vue,react,通用(持续更新)"></a><div class="content"><a class="title" href="/6ace453b.html" title="前端常用npm库大全-vue,react,通用(持续更新)">前端常用npm库大全-vue,react,通用(持续更新)</a><time datetime="2024-08-24T15:24:59.000Z" title="发表于 2024-08-24 15:24:59">2024-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/f4cb1979.html" title="基于vue-pdf-embed的二开PDF预览的通用组件"><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202408241539662.png" onerror='this.onerror=null,this.src="/img/404.png"' alt="基于vue-pdf-embed的二开PDF预览的通用组件"></a><div class="content"><a class="title" href="/f4cb1979.html" title="基于vue-pdf-embed的二开PDF预览的通用组件">基于vue-pdf-embed的二开PDF预览的通用组件</a><time datetime="2024-08-11T08:53:00.000Z" title="发表于 2024-08-11 08:53:00">2024-08-11</time></div></div></div></div></div></div></main><footer id="footer" style="background-image:url(https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205162354315.png)"><div id="footer-wrap"><div class="copyright">©2021 - 2024 By 梦洁</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js?v=4.13.0"></script><script src="/js/main.js?v=4.13.0"></script><script src="https://lib.baomitu.com/fancyapps-ui/5.0.33/fancybox/fancybox.umd.min.js"></script><div class="js-pjax"><script>(()=>{let t=null;const e=()=>{if(t=Artalk.init(Object.assign({el:"#artalk-wrap",server:"https://artalk.dreamlove.top",site:"梦洁小站",pageKey:location.pathname,darkMode:"dark"===document.documentElement.getAttribute("data-theme")},null)),"null"===GLOBAL_CONFIG.lightbox)return;t.on("list-loaded",()=>{t.ctx.get("list").getCommentNodes().forEach(t=>{const e=t.getRender().$content;btf.loadLightbox(e.querySelectorAll("img:not([atk-emoticon])"))})});btf.addGlobalFn("pjax",()=>{t.destroy()},"destroyArtalk")},a=async()=>{"object"==typeof Artalk||(await getCSS("https://lib.baomitu.com/artalk/2.8.2/Artalk.min.css"),await getScript("https://lib.baomitu.com/artalk/2.8.2/Artalk.min.js")),e()};btf.addGlobalFn("themeChange",e=>{const a=document.getElementById("artalk-wrap");if(!a||!a.children.length)return;const l="dark"===e;t.setDarkMode(l)},"artalk"),a()})()</script></div><script id="canvas_nest" defer color="0,0,255" opacity="0.7" zindex="-1" count="99" mobile="false" src="https://lib.baomitu.com/butterfly-extsrc/1.1.3/canvas-nest.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="algolia-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="search-wrap"><div id="algolia-search-input"></div><hr><div id="algolia-search-results"><div id="algolia-hits"></div><div id="algolia-pagination"></div><div id="algolia-info"><div class="algolia-stats"></div><div class="algolia-poweredBy"></div></div></div></div></div><div id="search-mask"></div><script src="https://lib.baomitu.com/algoliasearch/4.22.1/algoliasearch-lite.umd.min.js"></script><script src="https://lib.baomitu.com/instantsearch.js/4.65.0/instantsearch.production.min.js"></script><script src="/js/search/algolia.js?v=4.13.0"></script></div></div></body></html>