search.xml

<?xml version="1.0" encoding="utf-8"?>
<search> 
  
  
    
    <entry>
      <title></title>
      <link href="/2023/11/05/echarts-cheng-shen-zhi-lu/"/>
      <url>/2023/11/05/echarts-cheng-shen-zhi-lu/</url>
      
        <content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>以前学习的时候，学了一点Canvas基础，看了一眼Echarts（真的是看了一眼，是干什么的），就没有看过这方面的内容了，没想到我又开始接触了，既然接触了那就好好的学习。<br>跟着做一段时间的项目（我是打酱油的），然后断断续续的学习<code>Echarts</code>有一段时间了，真正学习大概两周吧，能用一些基本的图形，想了一会儿之后还是输出文档吧，能帮助我梳理知识，又能让我快速复习。<br>说干咱就干呀，仅作为个人笔记。</p><h2 id="Echarts快速入门"><a href="#Echarts快速入门" class="headerlink" title="Echarts快速入门"></a>Echarts快速入门</h2><p>Echarts入门很简单，官网就有。</p><ul><li><p>1、引入<code>Echarts.js</code>文件</p><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>    <span class="token comment">&lt;!-- 引入刚刚下载的 ECharts 文件 --&gt;</span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>echarts.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li><li><p>2、准备一个容器，也就是一个盒子（div）这个盒子决定了我们显示在哪个地方，宽高是多少。</p><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>  <span class="token comment">&lt;!-- 为 ECharts 准备一个定义了宽高的 DOM --&gt;</span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></li><li><p>3、初始化Echarts</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// 获取DOM</span><span class="token keyword">const</span> echrtsDom <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// 初始化实例</span><span class="token keyword">const</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>echrtsDom<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// 也可以简化成一步</span><span class="token keyword">var</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li><li><p>4、配置项，配置项决定了我们怎么展示图表，图表的样式是什么样的，等等一些功能。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>  <span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span>    <span class="token literal-property property">type</span><span class="token operator">:</span><span class="token string">'category'</span><span class="token punctuation">,</span>    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'衬衫'</span><span class="token punctuation">,</span> <span class="token string">'羊毛衫'</span><span class="token punctuation">,</span> <span class="token string">'雪纺衫'</span><span class="token punctuation">,</span> <span class="token string">'裤子'</span><span class="token punctuation">,</span> <span class="token string">'高跟鞋'</span><span class="token punctuation">,</span> <span class="token string">'袜子'</span><span class="token punctuation">]</span>  <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span>    <span class="token literal-property property">type</span><span class="token operator">:</span><span class="token string">'value'</span>  <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span>    <span class="token punctuation">{</span>      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'销量'</span><span class="token punctuation">,</span>      <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>      <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">]</span>    <span class="token punctuation">}</span>  <span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li><li><p>5、将配置项设置给<code>Echarts</code>实例。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// 使用刚指定的配置项和数据显示图表。</span>myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><p>通过这些操作之后，就会出现如下的图表。<br><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669080505035-56637b3f-0e83-434d-90c8-7a6da7880689.png#averageHue=%23ffffff&amp;clientId=ucbf2e079-8484-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=343&amp;id=u1d782763&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=377&amp;originWidth=604&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=5996&amp;status=done&amp;style=none&amp;taskId=u31017557-5635-419d-bb8f-567320fe356&amp;title=&amp;width=549.0908971896844" alt="image.png"><br>当你看到这样的图表的时候，恭喜你，小笨同学，离出师只有最后一步了。</p><h3 id="配置解释"><a href="#配置解释" class="headerlink" title="配置解释"></a>配置解释</h3></li><li><p><code>xAxis</code></p></li></ul><p><strong>直角坐标系</strong>中的 X 轴, 如果 <code>type</code> 属性的值为 <code>category</code> ,那么需要配置 <code>data</code> 数据, 代表在 X 轴的呈现</p><ul><li><code>yAxis</code></li></ul><p><strong>直角坐标系</strong>中的 Y 轴, 如果 <code>type</code> 属性的值为 <code>value</code> ,可以不用设置 <code>data</code>,这个时候，Y 轴就会自动去<code>series</code>下面找数据进行渲染。</p><ul><li><code>series</code></li></ul><p>系列列表。每个系列通过 <code>type</code> 决定自己的图表类型, <code>data</code> 来设置每个系列的数据<br>配置项都是以键值对的形式进行配置的，配置项真的是巨多，真的记不住呀真的记不住，上个链接：<a href="https://echarts.apache.org/zh/option.html#title">https://echarts.apache.org/zh/option.html#title</a>。</p><h2 id="柱状图"><a href="#柱状图" class="headerlink" title="柱状图"></a>柱状图</h2><p>刚刚我们入门的时候展示出的图表，叫柱状图，我们下面就开始学习一些柱状图的配置。后面的代码，只解释一下 <code>option</code>配置和提供最终代码</p><h3 id="柱状图标题"><a href="#柱状图标题" class="headerlink" title="柱状图标题"></a>柱状图标题</h3><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token comment">// 标题</span><span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否展示标题</span><span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'ECharts大佬学习之路'</span><span class="token punctuation">,</span> <span class="token comment">// 标题文字</span><span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">'http://www.baidu.com'</span><span class="token punctuation">,</span> <span class="token comment">// 点击标题时，跳转的链接。</span><span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token string">"center"</span><span class="token punctuation">,</span> <span class="token comment">// 标题到盒子左边的距离</span><span class="token literal-property property">textStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 文字样式</span><span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span> <span class="token comment">// 颜色</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"category"</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'衬衫'</span><span class="token punctuation">,</span> <span class="token string">'羊毛衫'</span><span class="token punctuation">,</span> <span class="token string">'雪纺衫'</span><span class="token punctuation">,</span> <span class="token string">'裤子'</span><span class="token punctuation">,</span> <span class="token string">'高跟鞋'</span><span class="token punctuation">,</span> <span class="token string">'袜子'</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"value"</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'销量'</span><span class="token punctuation">,</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="柱状图标记"><a href="#柱状图标记" class="headerlink" title="柱状图标记"></a>柱状图标记</h3><p>我们给其设置标记的时候，需要在<code>series</code>里面进行相关的配置。</p><h4 id="最大值-最小值"><a href="#最大值-最小值" class="headerlink" title="最大值/最小值"></a>最大值/最小值</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'销量'</span><span class="token punctuation">,</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token literal-property property">markPoint</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">//设置标记</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'max'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'最大值'</span> <span class="token comment">// 最大值 type 为max</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'min'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'最小值'</span> <span class="token comment">// 最小值 type 为min</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669081966454-c1ffab48-4876-400e-80b7-20163fee65b2.png#averageHue=%23fefdfd&amp;clientId=ucbf2e079-8484-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=401&amp;id=ub5329ad8&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=441&amp;originWidth=605&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=12496&amp;status=done&amp;style=none&amp;taskId=u21f089b9-89c3-4366-952a-39993fd6ba1&amp;title=&amp;width=549.9999880790713" alt="image.png"></p><h4 id="平均值"><a href="#平均值" class="headerlink" title="平均值"></a>平均值</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'销量'</span><span class="token punctuation">,</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">,</span><span class="token literal-property property">markLine</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 设置平均值</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'average'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'平均值'</span> <span class="token comment">// 平均值 type 为 average </span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="数值显示"><a href="#数值显示" class="headerlink" title="数值显示"></a>数值显示</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'销量'</span><span class="token punctuation">,</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">,</span><span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 数值是否可见</span><span class="token literal-property property">rotate</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token comment">// 数值旋转角度</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="设置柱的宽度"><a href="#设置柱的宽度" class="headerlink" title="设置柱的宽度"></a>设置柱的宽度</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'销量'</span><span class="token punctuation">,</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">,</span><span class="token literal-property property">barWidth</span><span class="token operator">:</span> <span class="token string">'30%'</span> <span class="token comment">// 柱的宽度</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="设置横向柱状图"><a href="#设置横向柱状图" class="headerlink" title="设置横向柱状图"></a>设置横向柱状图</h4><p>横向柱状图, 只需要让x轴的角色和y轴的角色互换一下.  <code>xAxis</code> 的 type 设置为<br><code>value</code> , <code>yAxis</code> 的 <code>type</code> 设置为 <code>category</code> , 并且设置 <code>data</code> 即可。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"value"</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"category"</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'衬衫'</span><span class="token punctuation">,</span> <span class="token string">'羊毛衫'</span><span class="token punctuation">,</span> <span class="token string">'雪纺衫'</span><span class="token punctuation">,</span> <span class="token string">'裤子'</span><span class="token punctuation">,</span> <span class="token string">'高跟鞋'</span><span class="token punctuation">,</span> <span class="token string">'袜子'</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'销量'</span><span class="token punctuation">,</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669082564011-c1eb3993-3e7f-463c-a1c6-6cdc8361d4f4.png#averageHue=%23fffdfd&amp;clientId=ucbf2e079-8484-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=359&amp;id=ud913ff08&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=395&amp;originWidth=628&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=11358&amp;status=done&amp;style=none&amp;taskId=ua868b5ff-eda3-4d23-b7f6-bdcef6d1540&amp;title=&amp;width=570.9090785349699" alt="image.png"></p><h3 id="完整的代码"><a href="#完整的代码" class="headerlink" title="完整的代码"></a>完整的代码</h3><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'ECharts大佬学习之路'</span><span class="token punctuation">,</span><span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">'http://www.itcast.cn'</span><span class="token punctuation">,</span><span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token string">"center"</span><span class="token punctuation">,</span><span class="token literal-property property">textStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"value"</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"category"</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'衬衫'</span><span class="token punctuation">,</span> <span class="token string">'羊毛衫'</span><span class="token punctuation">,</span> <span class="token string">'雪纺衫'</span><span class="token punctuation">,</span> <span class="token string">'裤子'</span><span class="token punctuation">,</span> <span class="token string">'高跟鞋'</span><span class="token punctuation">,</span> <span class="token string">'袜子'</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'销量'</span><span class="token punctuation">,</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token literal-property property">markPoint</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'max'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'最大值'</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'min'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'最小值'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">markLine</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'average'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'平均值'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否可见</span><span class="token literal-property property">rotate</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token comment">// 旋转角度</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">barWidth</span><span class="token operator">:</span> <span class="token string">'30%'</span> <span class="token comment">// 柱的宽度</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669082582505-0b4d351f-27f6-4223-bb9e-9842cc92a1ce.png#averageHue=%23fefdfd&amp;clientId=ucbf2e079-8484-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=361&amp;id=u89bf9ee9&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=397&amp;originWidth=630&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=16394&amp;status=done&amp;style=none&amp;taskId=u692f3d7a-b891-4571-af59-b56e75a4706&amp;title=&amp;width=572.7272603137437" alt="image.png"></p><h3 id="通用配置"><a href="#通用配置" class="headerlink" title="通用配置"></a>通用配置</h3><p>通用配置，即我们在其他的图形之中，也是进行相同的配置，根据设置不同，表现出类似的结果。就是同一个东东。</p><h4 id="标题title"><a href="#标题title" class="headerlink" title="标题title"></a>标题title</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否显示标题</span><span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">"ECharts大佬学习之路"</span><span class="token punctuation">,</span> <span class="token comment">// 标题文字</span><span class="token literal-property property">textStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 文字样式</span><span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span> <span class="token comment">// 文字颜色</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">'http://www.itcast.cn'</span><span class="token punctuation">,</span> <span class="token comment">// 点击标题时，跳转的链接。</span><span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token comment">// 标题边框</span><span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token string">'green'</span><span class="token punctuation">,</span> <span class="token comment">// 标题边框颜色</span><span class="token literal-property property">borderRadius</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token comment">// 标题边框圆角</span><span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> <span class="token comment">// 标题到盒子左边的距离</span><span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token comment">// 标题到盒子顶部的距离</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id><a href="#" class="headerlink" title></a><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669083048884-5570d09d-8ecc-4cca-9117-4c8d79ddfbb3.png#averageHue=%23fffdfd&amp;clientId=ucbf2e079-8484-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=370&amp;id=u7d421db0&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=407&amp;originWidth=641&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=11232&amp;status=done&amp;style=none&amp;taskId=uab68723f-b133-4c8f-b88a-c928e8435b5&amp;title=&amp;width=582.7272600969995" alt="image.png"></h3><h4 id="提示框-tooltip"><a href="#提示框-tooltip" class="headerlink" title="提示框: tooltip"></a>提示框: tooltip</h4><p><code>tooltip</code> 指的是当鼠标移入到图表或者点击图表时, 展示出的提示框。</p><h5 id="触发类型"><a href="#触发类型" class="headerlink" title="触发类型"></a>触发类型</h5><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">'axis'</span><span class="token punctuation">,</span> <span class="token comment">// 可选值有 item\axis 我现在看到的唯一区别就是：item 移入的具体的柱上面才会触发提示，axis 不需要移入到具体的柱上，只需要对应的上方即可显示出来</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669083874160-86ea9e00-67dc-4714-9fbf-8141c52eec54.png#averageHue=%23fefcfc&amp;clientId=ucbf2e079-8484-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=389&amp;id=u7973119e&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=428&amp;originWidth=659&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=16958&amp;status=done&amp;style=none&amp;taskId=uc9b7f53a-a643-4f80-a3b0-9cdff6be747&amp;title=&amp;width=599.0908961059636" alt="image.png"></p><h5 id="触发时机-triggerOn"><a href="#触发时机-triggerOn" class="headerlink" title="触发时机 triggerOn"></a>触发时机 <code>triggerOn</code></h5><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">,</span><span class="token literal-property property">triggerOn</span><span class="token operator">:</span> <span class="token string">'click'</span><span class="token punctuation">,</span><span class="token comment">// 可选值有 mousemove\click,移入移除/点击 时触发</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h5 id="格式化显示-formatter"><a href="#格式化显示-formatter" class="headerlink" title="格式化显示: formatter"></a>格式化显示: <code>formatter</code></h5><p>我们提示框显示的时候，想要自定义显示的内容。</p><h6 id="字符串模板"><a href="#字符串模板" class="headerlink" title="字符串模板"></a>字符串模板</h6><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">,</span><span class="token literal-property property">formatter</span><span class="token operator">:</span> <span class="token string">'{b}:{c}'</span><span class="token punctuation">}</span><span class="token punctuation">}</span>这个<span class="token punctuation">{</span>b<span class="token punctuation">}</span> 和 <span class="token punctuation">{</span>c<span class="token punctuation">}</span> 所代表的含义不需要去记<span class="token punctuation">,</span> 在官方文档中有详细的描述<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669085407538-cf070aae-d6d3-487a-b6e2-890e934ba783.png#averageHue=%23fdfcfc&amp;clientId=ucbf2e079-8484-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=321&amp;id=ud14ffe3a&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=353&amp;originWidth=1500&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=66784&amp;status=done&amp;style=none&amp;taskId=u37e4a6cc-9a5e-4a18-b1c5-a5cf090be49&amp;title=&amp;width=1363.636334080342" alt="image.png"><br><strong>模板变量</strong></p><table><thead><tr><th>图名称</th><th>{a}</th><th>{b}</th><th>{c}</th><th>{d}</th><th>{e}</th></tr></thead><tbody><tr><td>折线图</td><td>系列名称</td><td>数据名称（X轴）</td><td>数值（Y轴）</td><td>无</td><td>无</td></tr><tr><td>柱状图</td><td>系列名称</td><td>数据名称（X轴）</td><td>数值（Y轴）</td><td>无</td><td>无</td></tr><tr><td>K线图</td><td>系列名称</td><td>数据名称（X轴）</td><td>数值（Y轴）</td><td>无</td><td>无</td></tr><tr><td>散点图</td><td>系列名称</td><td>数据名称（X轴）</td><td>数值数组（Y轴）</td><td>无</td><td>无</td></tr><tr><td>地图</td><td>系列名称</td><td>区域名称</td><td>合并数值</td><td>无</td><td>无</td></tr><tr><td>饼图</td><td>系列名称</td><td>数据项名称</td><td>数值</td><td>无</td><td>无</td></tr><tr><td>仪表盘</td><td>系列名称</td><td>数据项名称</td><td>数值</td><td>无</td><td>无</td></tr><tr><td>沙漏图</td><td>系列名称</td><td>数据项名称</td><td>数值</td><td>无</td><td>无</td></tr></tbody></table><h6 id="回调函数"><a href="#回调函数" class="headerlink" title="回调函数"></a>回调函数</h6><p>这个形式有三个参数。第一个 <code>params</code>。<code>params</code> 是 <code>formatter </code>  需要的数据集，是一个数组。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">'item'</span><span class="token punctuation">,</span><span class="token literal-property property">triggerOn</span><span class="token operator">:</span> <span class="token string">'click'</span><span class="token punctuation">,</span><span class="token function-variable function">formatter</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">return</span> params<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> params<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>data<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token punctuation">{</span>    <span class="token literal-property property">componentType</span><span class="token operator">:</span> <span class="token string">'series'</span><span class="token punctuation">,</span>    <span class="token comment">// 系列类型</span>    <span class="token literal-property property">seriesType</span><span class="token operator">:</span> string<span class="token punctuation">,</span>    <span class="token comment">// 系列在传入的 option.series 中的 index</span>    <span class="token literal-property property">seriesIndex</span><span class="token operator">:</span> number<span class="token punctuation">,</span>    <span class="token comment">// 系列名称</span>    <span class="token literal-property property">seriesName</span><span class="token operator">:</span> string<span class="token punctuation">,</span>    <span class="token comment">// 数据名，类目名</span>    <span class="token literal-property property">name</span><span class="token operator">:</span> string<span class="token punctuation">,</span>    <span class="token comment">// 数据在传入的 data 数组中的 index</span>    <span class="token literal-property property">dataIndex</span><span class="token operator">:</span> number<span class="token punctuation">,</span>    <span class="token comment">// 传入的原始数据项</span>    <span class="token literal-property property">data</span><span class="token operator">:</span> Object<span class="token punctuation">,</span>    <span class="token comment">// 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）</span>    <span class="token literal-property property">value</span><span class="token operator">:</span> number<span class="token operator">|</span>Array<span class="token operator">|</span>Object<span class="token punctuation">,</span>    <span class="token comment">// 坐标轴 encode 映射信息，</span>    <span class="token comment">// key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）</span>    <span class="token comment">// value 必然为数组，不会为 null/undefied，表示 dimension index 。</span>    <span class="token comment">// 其内容如：</span>    <span class="token comment">// {</span>    <span class="token comment">//     x: [2] // dimension index 为 2 的数据映射到 x 轴</span>    <span class="token comment">//     y: [0] // dimension index 为 0 的数据映射到 y 轴</span>    <span class="token comment">// }</span>    <span class="token literal-property property">encode</span><span class="token operator">:</span> Object<span class="token punctuation">,</span>    <span class="token comment">// 维度名列表</span>    <span class="token literal-property property">dimensionNames</span><span class="token operator">:</span> Array<span class="token operator">&lt;</span>String<span class="token operator">&gt;</span><span class="token punctuation">,</span>    <span class="token comment">// 数据的维度 index，如 0 或 1 或 2 ...</span>    <span class="token comment">// 仅在雷达图中使用。</span>    <span class="token literal-property property">dimensionIndex</span><span class="token operator">:</span> number<span class="token punctuation">,</span>    <span class="token comment">// 数据图形的颜色</span>    <span class="token literal-property property">color</span><span class="token operator">:</span> string<span class="token punctuation">,</span>    <span class="token comment">// 饼图，漏斗图的百分比</span>    <span class="token literal-property property">percent</span><span class="token operator">:</span> number<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="工具按钮-toolbox"><a href="#工具按钮-toolbox" class="headerlink" title="工具按钮: toolbox"></a>工具按钮: toolbox</h4><h5 id="内置工具"><a href="#内置工具" class="headerlink" title="内置工具"></a>内置工具</h5><p><code>toolbox</code> 是 <code>ECharts</code> 提供的工具栏, 工具栏。内置有<a href="https://echarts.apache.org/zh/option.html#toolbox.feature.saveAsImage">导出图片</a>，<a href="https://echarts.apache.org/zh/option.html#toolbox.feature.dataView">数据视图</a>，<a href="https://echarts.apache.org/zh/option.html#toolbox.feature.magicType">动态类型切换</a>，<a href="https://echarts.apache.org/zh/option.html#toolbox.feature.dataZoom">数据区域缩放</a>，<a href="https://echarts.apache.org/zh/option.html#toolbox.feature.reset">重置</a>五个工具。<br>工具栏的按钮是配置在 <code>feature</code> 的节点之下</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">toolbox</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">feature</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">saveAsImage</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 将图表保存为图片</span><span class="token literal-property property">dataView</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 是否显示出原始数据</span><span class="token literal-property property">restore</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 还原图表</span><span class="token literal-property property">dataZoom</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 数据缩放</span><span class="token literal-property property">magicType</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 将图表在不同类型之间切换,图表的转换需要数据的支持</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'bar'</span><span class="token punctuation">,</span> <span class="token string">'line'</span><span class="token punctuation">]</span> <span class="token comment">// 柱状图 和 折线图之间切换</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669086499333-d2076b79-0f2e-4011-85c9-fab57bc898f5.png#averageHue=%23fefdfd&amp;clientId=ucbf2e079-8484-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=390&amp;id=u7100733c&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=429&amp;originWidth=719&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=13728&amp;status=done&amp;style=none&amp;taskId=u10cfcdad-f9d0-4dd3-9651-3da9aed16fa&amp;title=&amp;width=653.6363494691773" alt="image.png"></p><h5 id="自定义工具"><a href="#自定义工具" class="headerlink" title="自定义工具"></a>自定义工具</h5><p>同时 <code>Echarts</code>还提供了自定义工具，需要注意的是，自定义的工具名字，只能以 my 开头，例如 myTool1，myTool2：</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">toolbox</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">feature</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">,</span><span class="token literal-property property">myTool1</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否显示</span><span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'自定义扩展方法1'</span><span class="token punctuation">,</span> <span class="token comment">// 移入之后提示的内容</span><span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token string">'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891'</span><span class="token punctuation">,</span><span class="token comment">// 展示的图标</span><span class="token function-variable function">onclick</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment">// 点击的时候触发的函数。</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'myToolHandler1'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="图例-legend"><a href="#图例-legend" class="headerlink" title="图例: legend"></a>图例: legend</h4><p><code>legend</code> 是图例,用于筛选类别,需要和 <code>series</code> 配合使用</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">legend</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'销量'</span><span class="token punctuation">,</span> <span class="token string">'利润'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token comment">//数据</span><span class="token literal-property property">orient</span><span class="token operator">:</span> <span class="token string">"horizontal"</span><span class="token punctuation">,</span><span class="token comment">//图例列表的布局朝向 横向 horizontal 竖直 vertical(默认)</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'销量'</span><span class="token punctuation">,</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'利润'</span><span class="token punctuation">,</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">93</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token punctuation">,</span> <span class="token number">61</span><span class="token punctuation">,</span> <span class="token number">82</span><span class="token punctuation">,</span> <span class="token number">95</span><span class="token punctuation">,</span> <span class="token number">70</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>这里会有个问题。<br>如果只是单个类型的柱状图，那么在<code>formatter</code>中的<code>params</code>是一个数组。<br>如果只是多个类型的柱状图，那么在<code>formatter</code>中的<code>params</code>是一个对象。<br>所以自己设置的时候需要注意一下。<br><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669087926930-8409c441-4ff4-4bf3-9521-1718ae642f16.png#averageHue=%23fefdfd&amp;clientId=ucbf2e079-8484-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=397&amp;id=ucba9e4b0&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=437&amp;originWidth=736&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=16476&amp;status=done&amp;style=none&amp;taskId=u91a1558b-1aaa-4c4b-bb73-ad087460870&amp;title=&amp;width=669.0908945887545" alt="image.png"></p><h2 id="折线图"><a href="#折线图" class="headerlink" title="折线图"></a>折线图</h2><h3 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h3><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token constant">DOCTYPE</span> html<span class="token operator">&gt;</span><span class="token operator">&lt;</span>html lang<span class="token operator">=</span><span class="token string">"en"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span>head<span class="token operator">&gt;</span>    <span class="token operator">&lt;</span>meta charset<span class="token operator">=</span><span class="token string">"UTF-8"</span><span class="token operator">&gt;</span>    <span class="token operator">&lt;</span>meta http<span class="token operator">-</span>equiv<span class="token operator">=</span><span class="token string">"X-UA-Compatible"</span> content<span class="token operator">=</span><span class="token string">"IE=edge"</span><span class="token operator">&gt;</span>    <span class="token operator">&lt;</span>meta name<span class="token operator">=</span><span class="token string">"viewport"</span> content<span class="token operator">=</span><span class="token string">"width=device-width, initial-scale=1.0"</span><span class="token operator">&gt;</span>    <span class="token operator">&lt;</span>title<span class="token operator">&gt;</span>折线图<span class="token operator">&lt;</span><span class="token operator">/</span>title<span class="token operator">&gt;</span>    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">1.</span>引入echarts <span class="token operator">--</span><span class="token operator">&gt;</span>    <span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"echarts.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>head<span class="token operator">&gt;</span><span class="token operator">&lt;</span>body<span class="token operator">&gt;</span>    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">2.</span>设置盒子 <span class="token operator">--</span><span class="token operator">&gt;</span>    <span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">"main"</span> style<span class="token operator">=</span><span class="token string">"width: 600px;height:400px;"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>    <span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>        <span class="token comment">// 3.初始化实例</span>        <span class="token keyword">var</span> chartDom <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token keyword">var</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>chartDom<span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token keyword">var</span> option<span class="token punctuation">;</span>        <span class="token comment">// 5.配置项</span>        option <span class="token operator">=</span> <span class="token punctuation">{</span>            <span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span>                <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>                <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'一月'</span><span class="token punctuation">,</span> <span class="token string">'二月'</span><span class="token punctuation">,</span> <span class="token string">'三月'</span><span class="token punctuation">,</span> <span class="token string">'四月'</span><span class="token punctuation">,</span> <span class="token string">'五月'</span><span class="token punctuation">,</span> <span class="token string">'六月'</span><span class="token punctuation">,</span> <span class="token string">'七月'</span><span class="token punctuation">]</span>            <span class="token punctuation">}</span><span class="token punctuation">,</span>            <span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span>                <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'value'</span>            <span class="token punctuation">}</span><span class="token punctuation">,</span>            <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span>                <span class="token punctuation">{</span>                    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">150</span><span class="token punctuation">,</span> <span class="token number">230</span><span class="token punctuation">,</span> <span class="token number">224</span><span class="token punctuation">,</span> <span class="token number">218</span><span class="token punctuation">,</span> <span class="token number">135</span><span class="token punctuation">,</span> <span class="token number">147</span><span class="token punctuation">,</span> <span class="token number">260</span><span class="token punctuation">]</span><span class="token punctuation">,</span>                    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span>                <span class="token punctuation">}</span>            <span class="token punctuation">]</span>        <span class="token punctuation">}</span><span class="token punctuation">;</span>        <span class="token comment">// 6.将配置设置给Echarts实例</span>        option <span class="token operator">&amp;&amp;</span> myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>html<span class="token operator">&gt;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>到这里，你已经可以看到折线图了。<br><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669088649506-afdcb93a-47e4-4169-93b2-e5d369cbd61c.png#averageHue=%23fefefe&amp;clientId=ucbf2e079-8484-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=364&amp;id=u89e6e8aa&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=400&amp;originWidth=566&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=12452&amp;status=done&amp;style=none&amp;taskId=u64dd433b-c1cd-44e1-a583-e387a3b66fa&amp;title=&amp;width=514.5454433929824" alt="image.png"></p><h3 id="常见效果"><a href="#常见效果" class="headerlink" title="常见效果"></a>常见效果</h3><h4 id="标记"><a href="#标记" class="headerlink" title="标记"></a>标记</h4><h5 id="最大值-最小值-markPoint"><a href="#最大值-最小值-markPoint" class="headerlink" title="最大值/最小值 markPoint"></a>最大值/最小值 markPoint</h5><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">,</span><span class="token literal-property property">markPoint</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'max'</span><span class="token punctuation">,</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'最大值'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'min'</span><span class="token punctuation">,</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'最小值'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669088806049-3f3fa4fb-498d-4739-87cd-2775fae39322.png#averageHue=%23fefefe&amp;clientId=ucbf2e079-8484-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=359&amp;id=u4c9a6e4a&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=395&amp;originWidth=616&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=14828&amp;status=done&amp;style=none&amp;taskId=u243d1cdb-27d9-4cc6-8142-f492be10c13&amp;title=&amp;width=559.9999878623271" alt="image.png"></p><h5 id="平均值-markLine"><a href="#平均值-markLine" class="headerlink" title="平均值 markLine"></a>平均值 markLine</h5><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">,</span><span class="token literal-property property">markLine</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'average'</span><span class="token punctuation">,</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'平均值'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669088882627-6e24f89a-3992-4232-a9ba-36ea2fa77a5f.png#averageHue=%23fefefe&amp;clientId=ucbf2e079-8484-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=385&amp;id=u398a9ea9&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=423&amp;originWidth=661&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=16383&amp;status=done&amp;style=none&amp;taskId=u84c60d87-7b13-4a66-9a67-28f1a79b381&amp;title=&amp;width=600.9090778847374" alt="image.png"></p><h5 id="标注区间-markArea"><a href="#标注区间-markArea" class="headerlink" title="标注区间 markArea"></a>标注区间 markArea</h5><p>需要注意的是，<code>data</code>中的数据需要和x轴中的值对应，并且不要超出，比如6月到9月之类的，这样的话就会从1月到6月</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">,</span><span class="token literal-property property">markArea</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token string">'1月'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token string">'2月'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token string">'6月'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token string">'7月'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669088975509-aefa4293-af20-4978-ae24-e592a132d5c4.png#averageHue=%23fefefe&amp;clientId=ucbf2e079-8484-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=338&amp;id=ue1a68601&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=372&amp;originWidth=607&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=16639&amp;status=done&amp;style=none&amp;taskId=u5da567e5-b1e1-4da4-be37-0044a6c7b24&amp;title=&amp;width=551.8181698578451" alt="image.png"></p><h4 id="线条控制"><a href="#线条控制" class="headerlink" title="线条控制"></a>线条控制</h4><h5 id="平滑线条-smooth"><a href="#平滑线条-smooth" class="headerlink" title="平滑线条 smooth"></a>平滑线条 smooth</h5><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">,</span><span class="token literal-property property">smooth</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669091220168-cfb317b7-dda3-486b-90e4-c56aaf50899f.png#averageHue=%23fefefe&amp;clientId=ucbf2e079-8484-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=382&amp;id=u7f7b3d38&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=420&amp;originWidth=663&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=17120&amp;status=done&amp;style=none&amp;taskId=ucb098275-e298-4ad7-a7d7-bff4757f2c5&amp;title=&amp;width=602.7272596635112" alt="image.png"></p><h5 id="线条样式-lineStyle"><a href="#线条样式-lineStyle" class="headerlink" title="线条样式 lineStyle"></a>线条样式 lineStyle</h5><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">,</span><span class="token literal-property property">lineStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'green'</span><span class="token punctuation">,</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'dashed'</span> <span class="token comment">// 可选值还有 dotted solid</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669091244656-2a594b1f-3444-4d81-a1aa-5798dc6a3afb.png#averageHue=%23fefefe&amp;clientId=ucbf2e079-8484-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=396&amp;id=uf5852ce1&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=436&amp;originWidth=631&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=16006&amp;status=done&amp;style=none&amp;taskId=u4653ece6-c242-4f81-88f2-8dbcefb6cb8&amp;title=&amp;width=573.6363512031305" alt="image.png"></p><h4 id="填充风格-areaStyle"><a href="#填充风格-areaStyle" class="headerlink" title="填充风格 areaStyle"></a>填充风格 areaStyle</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">,</span><span class="token literal-property property">areaStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'pink'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669095561853-1eec8c42-d456-46dc-8225-f3c37d9a09f5.png#averageHue=%23449b41&amp;clientId=ucbf2e079-8484-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=401&amp;id=u1cb4ff31&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=441&amp;originWidth=652&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=16968&amp;status=done&amp;style=none&amp;taskId=u145a35d4-6019-4d6d-aa2f-53f411786d5&amp;title=&amp;width=592.7272598802554" alt="image.png"></p><h4 id="紧挨边缘-boundaryGap"><a href="#紧挨边缘-boundaryGap" class="headerlink" title="紧挨边缘 boundaryGap"></a>紧挨边缘 boundaryGap</h4><p>经过观察发现，我们的数据并没有从X轴的0坐标开始，如果我们想要设置从0开始，那么就给X轴设置 <code>boundaryGap</code>。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> xDataArr<span class="token punctuation">,</span><span class="token literal-property property">boundaryGap</span><span class="token operator">:</span> <span class="token boolean">false</span>  <span class="token comment">// 坐标轴的留白策略</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669095846555-c7087c00-69d3-4f2f-95fa-1fd4b728146a.png#averageHue=%23439b42&amp;clientId=ucbf2e079-8484-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=382&amp;id=ub9363df5&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=420&amp;originWidth=619&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=16317&amp;status=done&amp;style=none&amp;taskId=uca04ba3c-9759-49bb-9840-8ff69b34a8f&amp;title=&amp;width=562.7272605304878" alt="image.png"><br>官网的配置项中的有句话我们需要知道：类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候<a href="https://echarts.apache.org/zh/option.html#xAxis.axisTick">刻度</a>只是作为分隔线，标签和数据点都会在两个<a href="https://echarts.apache.org/zh/option.html#xAxis.axisTick">刻度</a>之间的带(band)中间。<br>简单来说，就是设置了 <code>boundaryGap </code>为 <code>false</code>数据对应的就是刻度线，为<code>true</code>,那么真实的数据对应的真实值位于两个相邻刻度线的中间。</p><h4 id="缩放-脱离0值比例"><a href="#缩放-脱离0值比例" class="headerlink" title="缩放, 脱离0值比例"></a>缩放, 脱离0值比例</h4><h5 id="如果每一组数据之间相差较少-且都比0大很多-那么有可能会出现这种情况"><a href="#如果每一组数据之间相差较少-且都比0大很多-那么有可能会出现这种情况" class="headerlink" title="如果每一组数据之间相差较少, 且都比0大很多, 那么有可能会出现这种情况"></a>如果每一组数据之间相差较少, 且都比0大很多, 那么有可能会出现这种情况</h5><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> xDataArr<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">3005</span><span class="token punctuation">,</span> <span class="token number">3003</span><span class="token punctuation">,</span> <span class="token number">3001</span><span class="token punctuation">,</span> <span class="token number">3002</span><span class="token punctuation">,</span> <span class="token number">3009</span><span class="token punctuation">,</span> <span class="token number">3007</span><span class="token punctuation">,</span> <span class="token number">3003</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token comment">// 此时y轴的数据都在3000附近, 每个数之间相差不多</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669096291808-2e9c29ad-6d5f-4f7c-8e63-a44a41af5032.png#averageHue=%2351a451&amp;clientId=ucbf2e079-8484-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=406&amp;id=ue344a5cd&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=447&amp;originWidth=703&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=13287&amp;status=done&amp;style=none&amp;taskId=ub3604401-7ef4-48fd-b9fb-167150ed77d&amp;title=&amp;width=639.090895238987" alt="image.png"><br>我们就会发现，咋个变成了一个直线，因此可以配置上 scale , 让其摆脱0值比例</p><h5 id="scale-配置"><a href="#scale-配置" class="headerlink" title="scale 配置"></a>scale 配置</h5><p>scale 应该配置给 y 轴</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span><span class="token literal-property property">scale</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669096407829-2cbacea2-b609-4f9b-a402-82af944187af.png#averageHue=%234a9f46&amp;clientId=ucbf2e079-8484-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=405&amp;id=ua3dbdf49&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=445&amp;originWidth=687&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=19560&amp;status=done&amp;style=none&amp;taskId=u5d2bd6ac-f859-4cf9-8f8c-3cc2bf63ce8&amp;title=&amp;width=624.5454410087966" alt="image.png"><br>这时候，你会发现，Y轴的0刻度线，是从3000开始的。</p><h4 id="堆叠图"><a href="#堆叠图" class="headerlink" title="堆叠图"></a>堆叠图</h4><p>堆叠图指的是, 同个类目轴上系列配置相同的 stack 值后，后一个系列的值会在前一个系列的值上相加 。<br>如果在一个图表中有两个或者多个折线图, 在没有使用堆叠配置的时候, 效果如下:</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token constant">DOCTYPE</span> html<span class="token operator">&gt;</span><span class="token operator">&lt;</span>html lang<span class="token operator">=</span><span class="token string">"en"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span>head<span class="token operator">&gt;</span>    <span class="token operator">&lt;</span>meta charset<span class="token operator">=</span><span class="token string">"UTF-8"</span><span class="token operator">&gt;</span>    <span class="token operator">&lt;</span>meta http<span class="token operator">-</span>equiv<span class="token operator">=</span><span class="token string">"X-UA-Compatible"</span> content<span class="token operator">=</span><span class="token string">"IE=edge"</span><span class="token operator">&gt;</span>    <span class="token operator">&lt;</span>meta name<span class="token operator">=</span><span class="token string">"viewport"</span> content<span class="token operator">=</span><span class="token string">"width=device-width, initial-scale=1.0"</span><span class="token operator">&gt;</span>    <span class="token operator">&lt;</span>title<span class="token operator">&gt;</span>折线图<span class="token operator">&lt;</span><span class="token operator">/</span>title<span class="token operator">&gt;</span>    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">1.</span>引入echarts <span class="token operator">--</span><span class="token operator">&gt;</span>    <span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"echarts.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>head<span class="token operator">&gt;</span><span class="token operator">&lt;</span>body<span class="token operator">&gt;</span>    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">2.</span>设置盒子 <span class="token operator">--</span><span class="token operator">&gt;</span>    <span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">"main"</span> style<span class="token operator">=</span><span class="token string">"width: 600px;height:400px;"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>    <span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>        <span class="token keyword">var</span> mCharts <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#main"</span><span class="token punctuation">)</span><span class="token punctuation">)</span>        <span class="token keyword">var</span> xDataArr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'周一'</span><span class="token punctuation">,</span> <span class="token string">'周二'</span><span class="token punctuation">,</span> <span class="token string">'周三'</span><span class="token punctuation">,</span> <span class="token string">'周四'</span><span class="token punctuation">,</span> <span class="token string">'周五'</span><span class="token punctuation">,</span> <span class="token string">'周六'</span><span class="token punctuation">,</span> <span class="token string">'周日'</span><span class="token punctuation">]</span>        <span class="token keyword">var</span> yDataArr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">120</span><span class="token punctuation">,</span> <span class="token number">132</span><span class="token punctuation">,</span> <span class="token number">101</span><span class="token punctuation">,</span> <span class="token number">134</span><span class="token punctuation">,</span> <span class="token number">90</span><span class="token punctuation">,</span> <span class="token number">230</span><span class="token punctuation">,</span> <span class="token number">210</span><span class="token punctuation">]</span>        <span class="token keyword">var</span> yDataArr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">82</span><span class="token punctuation">,</span> <span class="token number">191</span><span class="token punctuation">,</span> <span class="token number">94</span><span class="token punctuation">,</span> <span class="token number">290</span><span class="token punctuation">,</span> <span class="token number">330</span><span class="token punctuation">,</span> <span class="token number">310</span><span class="token punctuation">]</span>        <span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>            <span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span>                <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>                <span class="token literal-property property">data</span><span class="token operator">:</span> xDataArr            <span class="token punctuation">}</span><span class="token punctuation">,</span>            <span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span>                <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>                <span class="token literal-property property">scale</span><span class="token operator">:</span> <span class="token boolean">true</span>            <span class="token punctuation">}</span><span class="token punctuation">,</span>            <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span>                <span class="token punctuation">{</span>                    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>                    <span class="token literal-property property">data</span><span class="token operator">:</span> yDataArr1                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token punctuation">{</span>                    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>                    <span class="token literal-property property">data</span><span class="token operator">:</span> yDataArr2                <span class="token punctuation">}</span>            <span class="token punctuation">]</span>        <span class="token punctuation">}</span>        mCharts<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span>    <span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>html<span class="token operator">&gt;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669096607623-ffc29e51-3a37-43b6-927a-eb1c15daf35c.png#averageHue=%23fefefe&amp;clientId=ucbf2e079-8484-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=354&amp;id=u7cf389c3&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=389&amp;originWidth=587&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=20409&amp;status=done&amp;style=none&amp;taskId=u2f686e95-ebd4-44d0-8700-8f3cd271030&amp;title=&amp;width=533.6363520701073" alt="image.png"><br>说简单点，就是会出现交叉的形式，如果我们不想让其交叉，我们就可以让其堆叠。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> yDataArr1<span class="token punctuation">,</span><span class="token literal-property property">stack</span><span class="token operator">:</span> <span class="token string">'all'</span> <span class="token comment">// series中的每一个对象配置相同的stack值, 这个all可以任</span>意写<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> yDataArr2<span class="token punctuation">,</span><span class="token literal-property property">stack</span><span class="token operator">:</span> <span class="token string">'all'</span> <span class="token comment">// series中的每一个对象配置相同的stack值, 这个all可以任意</span>写<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669096765516-8131b447-86f3-475f-8707-52aad2612620.png#averageHue=%23fefefe&amp;clientId=ucbf2e079-8484-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=325&amp;id=ubdff166e&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=357&amp;originWidth=534&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=16160&amp;status=done&amp;style=none&amp;taskId=u65683298-a269-48fa-a516-335bc592bf0&amp;title=&amp;width=485.4545349326018" alt="image.png"><br>这个时候，我们就会发现，一个折线是在另一个折线的基础上设置的。</p><h2 id="散点图"><a href="#散点图" class="headerlink" title="散点图"></a>散点图</h2><h3 id="基本实现"><a href="#基本实现" class="headerlink" title="基本实现"></a>基本实现</h3><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>散点图<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span><span class="token comment">&lt;!-- 1.引入Echarts--&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>echarts.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span><span class="token comment">&lt;!--2.准备盒子容器  --&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 1200px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"><span class="token comment">// 3.初始化实例</span><span class="token keyword">var</span> chartDom <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">var</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>chartDom<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">var</span> option<span class="token punctuation">;</span><span class="token comment">// 4.设置配置项</span>option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">10.0</span><span class="token punctuation">,</span> <span class="token number">8.04</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">8.07</span><span class="token punctuation">,</span> <span class="token number">6.95</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">13.0</span><span class="token punctuation">,</span> <span class="token number">7.58</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">9.05</span><span class="token punctuation">,</span> <span class="token number">8.81</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">11.0</span><span class="token punctuation">,</span> <span class="token number">8.33</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">14.0</span><span class="token punctuation">,</span> <span class="token number">7.66</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">13.4</span><span class="token punctuation">,</span> <span class="token number">6.81</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">10.0</span><span class="token punctuation">,</span> <span class="token number">6.33</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">14.0</span><span class="token punctuation">,</span> <span class="token number">8.96</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">12.5</span><span class="token punctuation">,</span> <span class="token number">6.82</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">9.15</span><span class="token punctuation">,</span> <span class="token number">7.2</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">11.5</span><span class="token punctuation">,</span> <span class="token number">7.2</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">3.03</span><span class="token punctuation">,</span> <span class="token number">4.23</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">12.2</span><span class="token punctuation">,</span> <span class="token number">7.83</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">2.02</span><span class="token punctuation">,</span> <span class="token number">4.47</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">1.05</span><span class="token punctuation">,</span> <span class="token number">3.33</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">4.05</span><span class="token punctuation">,</span> <span class="token number">4.96</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">6.03</span><span class="token punctuation">,</span> <span class="token number">7.24</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">12.0</span><span class="token punctuation">,</span> <span class="token number">6.26</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">12.0</span><span class="token punctuation">,</span> <span class="token number">8.84</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">7.08</span><span class="token punctuation">,</span> <span class="token number">5.82</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">5.02</span><span class="token punctuation">,</span> <span class="token number">5.68</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token comment">// 5.将配置设置给实例</span>option <span class="token operator">&amp;&amp;</span> myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>需要值得注意的一点是，散点图的数据是<strong>二维数组</strong></p><h3 id="气泡图效果"><a href="#气泡图效果" class="headerlink" title="气泡图效果"></a>气泡图效果</h3><p>要能够达到气泡图的效果, 其实就是让每一个散点的大小不同, 让每一个散点的颜色不同<br>要实现这样的效果需要使用<code>symbolSize</code>和 <code>itemStyle.color </code>,这两个配置项都支持固定值的写法, 也支持回调函数的写法</p><h4 id="配置方式"><a href="#配置方式" class="headerlink" title="配置方式"></a>配置方式</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> axisData<span class="token punctuation">,</span><span class="token literal-property property">symbolSize</span><span class="token operator">:</span> <span class="token number">25</span><span class="token punctuation">,</span><span class="token comment">// 设置散点的大小</span><span class="token literal-property property">itemStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'green'</span><span class="token punctuation">,</span>  <span class="token comment">// 控制散点的颜色</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="回调函数-1"><a href="#回调函数-1" class="headerlink" title="回调函数"></a>回调函数</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> axisData<span class="token punctuation">,</span><span class="token function-variable function">symbolSize</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 设置散点的大小</span><span class="token keyword">if</span> <span class="token punctuation">(</span>params<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">&gt;</span> <span class="token number">6</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">return</span> <span class="token number">25</span><span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span><span class="token keyword">return</span> <span class="token number">10</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">itemStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token function-variable function">color</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 控制散点的颜色</span><span class="token keyword">if</span> <span class="token punctuation">(</span>params<span class="token punctuation">.</span>data<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">&gt;</span> <span class="token number">6</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">return</span> <span class="token string">'red'</span><span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span><span class="token keyword">return</span> <span class="token string">'green'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669168414198-14e568af-0ce3-4714-bbb7-77436e9d0f4a.png#averageHue=%23fefcfc&amp;clientId=u4a50a71f-01b5-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=522&amp;id=u395df5b2&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=574&amp;originWidth=1029&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=15752&amp;status=done&amp;style=none&amp;taskId=u1577200c-932e-4a1f-a3d6-63548d75339&amp;title=&amp;width=935.4545251791146" alt="image.png"></p><h3 id="涟漪效果"><a href="#涟漪效果" class="headerlink" title="涟漪效果"></a>涟漪效果</h3><p>我们在一些大数据的图标上面会发现这种散点的小圆圈可以呈现出涟漪的状态，就像小石头打在水里那样，这就是所说的涟漪效果。最典型的我觉得就是地震的时候，看震源，发出那种波的形式。<br>我们需要做的是将 <code>type</code>  的值从 <code>scatter</code> 设置为 <code>effectScatter</code> 就能够产生涟漪动画的效果。</p><h4 id="基本配置"><a href="#基本配置" class="headerlink" title="基本配置"></a>基本配置</h4><p><code>rippleEffect</code> 可以配置涟漪动画的大小。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">,</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'effectScatter'</span><span class="token punctuation">,</span><span class="token literal-property property">rippleEffect</span><span class="token operator">:</span><span class="token punctuation">{</span><span class="token literal-property property">scale</span><span class="token operator">:</span><span class="token number">3</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669168531594-cc6bdad4-7e6f-46bd-9406-e0597dd8fb7a.png#averageHue=%23fef3f3&amp;clientId=u4a50a71f-01b5-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=553&amp;id=u1992256b&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=608&amp;originWidth=1059&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=55386&amp;status=done&amp;style=none&amp;taskId=u32771127-52be-4a20-981e-055dd7eeb4f&amp;title=&amp;width=962.7272518607215" alt="image.png"></p><h4 id="产生时间"><a href="#产生时间" class="headerlink" title="产生时间"></a>产生时间</h4><p><code>showEffectOn</code> 可以控制涟漪动画在什么时候产生, 它的可选值有两个: <code>render</code> 和 <code>emphasis</code><br><code>render</code> 代表界面渲染完成就开始涟漪动画<br><code>emphasis</code> 代表鼠标移过某个散点的时候, 该散点开始涟漪动画</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">,</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'effectScatter'</span><span class="token punctuation">,</span><span class="token literal-property property">showEffectOn</span><span class="token operator">:</span> <span class="token string">'emphasis'</span><span class="token punctuation">,</span><span class="token literal-property property">rippleEffect</span><span class="token operator">:</span><span class="token punctuation">{</span><span class="token literal-property property">scale</span><span class="token operator">:</span><span class="token number">3</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="直角坐标系的常见配置"><a href="#直角坐标系的常见配置" class="headerlink" title="直角坐标系的常见配置"></a>直角坐标系的常见配置</h2><p>直角坐标系的常见配置，主要是针对我们常用的柱状图、折线图、散点图，针对直角坐标系的图有一些通用的配置。</p><h3 id="网格grid"><a href="#网格grid" class="headerlink" title="网格grid"></a>网格grid</h3><p><code>grid</code>是用来控制直角坐标系的布局和大小, 比如我们要设置背景间隔线，<code>x``y</code>轴。</p><h4 id="是否显示网格"><a href="#是否显示网格" class="headerlink" title="是否显示网格"></a>是否显示网格</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">grid</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否显示网格(grid)</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669268533118-cd992a95-201a-4cad-a931-10b33a36c991.png#averageHue=%23fefefe&amp;clientId=u260189bb-ab1c-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=395&amp;id=u720cc4fa&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=434&amp;originWidth=658&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=17625&amp;status=done&amp;style=none&amp;taskId=ucd7c242c-43e7-45e5-9bc8-4e89e6babc9&amp;title=&amp;width=598.1818052165768" alt="image.png"></p><h4 id="边框宽度"><a href="#边框宽度" class="headerlink" title="边框宽度"></a>边框宽度</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">grid</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否显示网格(grid)</span><span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token comment">// 网格(grid)的边框宽度</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669268566082-f848c0ab-a9c2-4cd4-8e84-76874ee5e65e.png#averageHue=%23fdfdfd&amp;clientId=u260189bb-ab1c-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=470&amp;id=ube786764&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=517&amp;originWidth=794&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=18850&amp;status=done&amp;style=none&amp;taskId=ueb5c14a0-ed6c-4eef-b2ff-7077e42f0ad&amp;title=&amp;width=721.8181661731944" alt="image.png"></p><h4 id="网格边框颜色"><a href="#网格边框颜色" class="headerlink" title="网格边框颜色"></a>网格边框颜色</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">grid</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否显示网格(grid)</span><span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token comment">// 网格(grid)的边框宽度</span><span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span> <span class="token comment">// 网格(grid)的边框颜色</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669268637557-b66bd226-5d25-49ce-b26d-5bcfa2b0815e.png#averageHue=%23fef0f0&amp;clientId=u260189bb-ab1c-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=368&amp;id=u805f6d95&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=405&amp;originWidth=629&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=17339&amp;status=done&amp;style=none&amp;taskId=u4e54870d-f182-442d-9a1b-174080332f3&amp;title=&amp;width=571.8181694243568" alt="image.png"></p><h4 id="离容器左侧的距离（left）"><a href="#离容器左侧的距离（left）" class="headerlink" title="离容器左侧的距离（left）"></a>离容器左侧的距离（left）</h4><p>当<code>left</code>小于容器盒子的宽度的时候，会将里面的内容进行压缩。比如容器<code>div</code>的宽度是<code>600px</code>,<code>left</code>设置为<code>200px</code>,那么相当于将左边的边框向右推<code>200px</code>，但是整个图像的整体位置没有变，就感觉像是图像被压缩了。<br>当<code>left</code>等于盒子的大小的时候，那么盒子整体会被向右推到盒子的宽度。比如<code>left</code>等于<code>600px</code>那么就是等于盒子的宽度，那么图像的整体就会被推<code>600px</code>，这个时候不会再压缩图像，就好像图像已经压缩到<code>一种极致</code>，不能在被压缩了，就推<code>600px</code>。<br>当<code>left</code>大于盒子的宽度的时候，我们会发现右边框不见了，这个时候无论我们<code>left</code>是多少，最终左边边框都是不会再变动了。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">grid</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否显示网格(grid)</span><span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token comment">// 网格(grid)的边框宽度</span><span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span> <span class="token comment">// 网格(grid)的边框颜色</span><span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span> <span class="token comment">// 离容器左侧的距离。</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><code>left</code>等于<code>200px</code><br><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669269838774-559e8774-362c-458f-b755-1fb5b2d2e316.png#averageHue=%23fef3f2&amp;clientId=u260189bb-ab1c-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=376&amp;id=ue967cd91&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=414&amp;originWidth=684&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=20942&amp;status=done&amp;style=none&amp;taskId=uc3399158-a16e-4ac2-9a09-37591541be1&amp;title=&amp;width=621.818168340636" alt="image.png"><br><code>left</code>等于<code>500px</code><br><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669269884855-dba1edd1-bd40-4bbb-90e0-368212b8c662.png#averageHue=%23fef9f8&amp;clientId=u260189bb-ab1c-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=392&amp;id=uffb1e63f&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=431&amp;originWidth=695&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=13803&amp;status=done&amp;style=none&amp;taskId=u344569e6-a751-4e20-be94-8f0ae129c59&amp;title=&amp;width=631.8181681238918" alt="image.png"><br>从这里我们就发现，其实右边边框一直没动，只是一直在进行压缩图形。<br><code>left</code>等于<code>600px</code><br><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669269992044-cc98cc2c-9e99-4aa6-b80b-9e1b52ace6d7.png#averageHue=%23fef9f8&amp;clientId=u260189bb-ab1c-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=357&amp;id=u176f483b&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=393&amp;originWidth=694&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=14967&amp;status=done&amp;style=none&amp;taskId=ue26464c4-f42d-4142-8737-64e8a187aab&amp;title=&amp;width=630.9090772345049" alt="image.png"><br>我们会发现，图形整体向右边走了一段距离。<br><code>left</code>等于<code>900px</code><br><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669270067428-a98e53c6-67bc-4adb-b87b-dd1c00b75600.png#averageHue=%23fefbfa&amp;clientId=u260189bb-ab1c-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=404&amp;id=ua89f366f&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=444&amp;originWidth=698&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=10497&amp;status=done&amp;style=none&amp;taskId=ucca4befe-7020-44f2-9dc2-bd19b67e138&amp;title=&amp;width=634.5454407920525" alt="image.png"></p><h4 id="离容器顶部的距离-top"><a href="#离容器顶部的距离-top" class="headerlink" title="离容器顶部的距离(top)"></a>离容器顶部的距离(top)</h4><p><code>top</code>跟<code>left</code>有类似的特点。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">grid</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否显示网格(grid)</span><span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token comment">// 网格(grid)的边框宽度</span><span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span> <span class="token comment">// 网格(grid)的边框颜色</span><span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span> <span class="token comment">// 离容器左侧的距离。</span><span class="token literal-property property">top</span><span class="token operator">:</span><span class="token number">100</span><span class="token punctuation">,</span><span class="token comment">//离顶部的距离</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="容器宽高"><a href="#容器宽高" class="headerlink" title="容器宽高"></a>容器宽高</h4><p>当我们不设置宽高的时候，图形默认就是容器的宽高。<br><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669270379341-71ee19c4-d9a9-49c9-94e5-2381df4736bc.png#averageHue=%23fef0ef&amp;clientId=u260189bb-ab1c-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=400&amp;id=ub7bfda7f&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=440&amp;originWidth=623&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=21020&amp;status=done&amp;style=none&amp;taskId=u24b25a31-1328-40a8-a3d9-40f3292c64d&amp;title=&amp;width=566.3636240880354" alt="image.png"></p><h3 id="坐标轴axis"><a href="#坐标轴axis" class="headerlink" title="坐标轴axis"></a>坐标轴axis</h3><p>坐标轴分为<code>x</code>轴和<code>y</code>轴，一个 grid 中最多有两种位置的<code>x</code>轴和 <code>y</code> 轴</p><h4 id="坐标轴类型"><a href="#坐标轴类型" class="headerlink" title="坐标轴类型"></a>坐标轴类型</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> xDataArr<span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><code>value</code> : 数值轴, 自动会从目标数据中读取数据<br><code>category</code> : 类目轴, 该类型必须通过 <code>data</code> 设置类目数据</p><h4 id="坐标轴的位置"><a href="#坐标轴的位置" class="headerlink" title="坐标轴的位置"></a>坐标轴的位置</h4><p><code>xAxis</code> : 可取值为 <code>top</code> 或者 <code>bottom</code><br><code>yAxis</code> : 可取值为 <code>left</code> 或者 <code>right</code></p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> xDataArr<span class="token punctuation">,</span><span class="token literal-property property">position</span><span class="token operator">:</span> <span class="token string">'bottom'</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span><span class="token literal-property property">scale</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><span class="token literal-property property">position</span><span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="区域缩放"><a href="#区域缩放" class="headerlink" title="区域缩放"></a>区域缩放</h3><p><code>dataZoom</code> 用于区域缩放, 对数据范围过滤, <code>x</code>轴和<code>y</code>轴都可以拥有, <code>dataZoom</code> 是一个数组, 意味着可以配置多个区域缩放器。</p><h4 id="区域缩放类型"><a href="#区域缩放类型" class="headerlink" title="区域缩放类型"></a>区域缩放类型</h4><p><code>slider</code> : 滑块<br><code>inside</code> : 内置, 依靠鼠标滚轮或者双指缩放</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">dataZoom</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'slider'</span><span class="token punctuation">,</span><span class="token comment">//区域缩放类型</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669271278364-59beaaa8-0154-4938-8b7c-c6e55126123b.png#averageHue=%23fefefe&amp;clientId=u260189bb-ab1c-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=415&amp;id=u1b9a0d0a&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=457&amp;originWidth=594&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=20285&amp;status=done&amp;style=none&amp;taskId=ub0a64d9b-edcf-43fc-b99b-4030daf34e6&amp;title=&amp;width=539.9999882958155" alt="image.png"></p><h4 id="产生作用的轴"><a href="#产生作用的轴" class="headerlink" title="产生作用的轴"></a>产生作用的轴</h4><p><code>xAxisIndex</code> :设置缩放组件控制的是哪个 <code>x</code> 轴, 一般写<code>0</code>即可<br><code>yAxisIndex</code> :设置缩放组件控制的是哪个 <code>y</code> 轴, 一般写<code>0</code>即可</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">dataZoom</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'slider'</span><span class="token punctuation">,</span><span class="token comment">//区域缩放类型</span><span class="token literal-property property">xAxisIndex</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'inside'</span><span class="token punctuation">,</span><span class="token literal-property property">yAxisIndex</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669271348067-a6fb3c08-a290-4d73-a4f0-cbb1391717b2.png#averageHue=%23fefefe&amp;clientId=u260189bb-ab1c-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=414&amp;id=u984bee44&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=455&amp;originWidth=647&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=21783&amp;status=done&amp;style=none&amp;taskId=u7ee16345-7225-4c14-9820-9d22ca7d231&amp;title=&amp;width=588.1818054333208" alt="image.png"></p><h4 id="初始状态的缩放情况"><a href="#初始状态的缩放情况" class="headerlink" title="初始状态的缩放情况"></a>初始状态的缩放情况</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">dataZoom</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'slider'</span><span class="token punctuation">,</span><span class="token comment">//区域缩放类型</span><span class="token literal-property property">xAxisIndex</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span><span class="token literal-property property">start</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span><span class="token literal-property property">end</span><span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'inside'</span><span class="token punctuation">,</span><span class="token literal-property property">yAxisIndex</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669271671373-ded70e58-9777-4585-b5f7-4e6d23166faf.png#averageHue=%23fefefe&amp;clientId=u260189bb-ab1c-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=375&amp;id=ue413e0f9&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=412&amp;originWidth=665&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=20546&amp;status=done&amp;style=none&amp;taskId=u60c82f0f-7c4c-4a5b-9d0c-065a36796a4&amp;title=&amp;width=604.545441442285" alt="image.png"></p><h2 id="饼图"><a href="#饼图" class="headerlink" title="饼图"></a>饼图</h2><p>饼图的数据是由 <code>name</code> 和 <code>value</code>组成的字典所形成的数组<br>饼图无须配置 <code>xAxis</code> 和 <code>yAxis</code><br>将类型 <code>type</code>设置为<code>pie</code>。</p><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>饼图<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>echarts.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 1200px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"><span class="token keyword">var</span> chartDom <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">var</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>chartDom<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">var</span> option<span class="token punctuation">;</span>option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1048</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'衣服'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">735</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'裤子'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">580</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'内衣'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">484</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'鞋子'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'帽子'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">;</span>option <span class="token operator">&amp;&amp;</span> myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669272090270-f6f65232-8658-4fa6-8833-5aa5b6ecced3.png#averageHue=%23f9c859&amp;clientId=u260189bb-ab1c-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=496&amp;id=u00e364d5&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=546&amp;originWidth=698&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=21122&amp;status=done&amp;style=none&amp;taskId=u905aed76-a95b-4ff8-8abd-7e21ffae810&amp;title=&amp;width=634.5454407920525" alt="image.png"></p><h3 id="饼图的常见效果"><a href="#饼图的常见效果" class="headerlink" title="饼图的常见效果"></a>饼图的常见效果</h3><h4 id="显示数值-label"><a href="#显示数值-label" class="headerlink" title="显示数值 label"></a>显示数值 label</h4><h5 id="显示文字"><a href="#显示文字" class="headerlink" title="显示文字"></a>显示文字</h5><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1048</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'衣服'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">735</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'裤子'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">580</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'内衣'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">484</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'鞋子'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'帽子'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//圆周围的那一圈文字，默认就是显示的</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h5 id="格式化文字"><a href="#格式化文字" class="headerlink" title="格式化文字"></a>格式化文字</h5><p>有两种形式，字符串和回调函数的形式。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1048</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'衣服'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">735</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'裤子'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">580</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'内衣'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">484</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'鞋子'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'帽子'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//圆周围的那一圈文字，默认就是显示的</span><span class="token function-variable function">formatter</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">return</span> params<span class="token punctuation">.</span>data<span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">'平台'</span> <span class="token operator">+</span> params<span class="token punctuation">.</span>data<span class="token punctuation">.</span>value <span class="token operator">+</span> <span class="token string">'元\n'</span> <span class="token operator">+</span>params<span class="token punctuation">.</span>percent <span class="token operator">+</span> <span class="token string">'%'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669272766007-a3070c90-b541-4bf2-ba56-572e78c2ce04.png#averageHue=%23f9c859&amp;clientId=u260189bb-ab1c-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=510&amp;id=uf530c354&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=561&amp;originWidth=729&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=28521&amp;status=done&amp;style=none&amp;taskId=uf12d9027-d985-4e3a-9437-edcea5f5614&amp;title=&amp;width=662.7272583630463" alt="image.png"></p><h3 id="南丁格尔图"><a href="#南丁格尔图" class="headerlink" title="南丁格尔图"></a>南丁格尔图</h3><p>南丁格尔图指的是每一个扇形的半径随着数据的大小而不同, 数值占比越大, 扇形的半径也就越大，只需要将<code>roseType: 'radius'</code></p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1048</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'衣服'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">735</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'裤子'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">580</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'内衣'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">484</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'鞋子'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'帽子'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><span class="token function-variable function">formatter</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">return</span> params<span class="token punctuation">.</span>data<span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">'平台'</span> <span class="token operator">+</span> params<span class="token punctuation">.</span>data<span class="token punctuation">.</span>value <span class="token operator">+</span> <span class="token string">'元\n'</span> <span class="token operator">+</span>params<span class="token punctuation">.</span>percent <span class="token operator">+</span> <span class="token string">'%'</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">roseType</span><span class="token operator">:</span> <span class="token string">'radius'</span><span class="token punctuation">,</span> <span class="token comment">//设置就会出现南丁格尔图</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669272913301-9a9d31e4-ceed-496c-8a80-19a9e24cd35e.png#averageHue=%23fdfaf7&amp;clientId=u260189bb-ab1c-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=529&amp;id=ue2787afd&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=582&amp;originWidth=715&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=29089&amp;status=done&amp;style=none&amp;taskId=uf5e00f9b-a2a5-4aa3-ac5f-a8fad5f2f8b&amp;title=&amp;width=649.9999859116298" alt="image.png"></p><h3 id="选中效果"><a href="#选中效果" class="headerlink" title="选中效果"></a>选中效果</h3><h4 id="选中模式"><a href="#选中模式" class="headerlink" title="选中模式"></a>选中模式</h4><p><code>selectedMode: 'multiple'</code><br>选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可<br>选 <code>'single'</code> ,<code>'multiple'</code>，分别表示单选还是多选</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">,</span><span class="token literal-property property">selectedMode</span><span class="token operator">:</span> <span class="token string">'multiple'</span><span class="token punctuation">,</span> <span class="token comment">// 多选</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669273122643-0b54605d-73c5-4833-b487-e251155dfe21.png#averageHue=%23fdf9f6&amp;clientId=u260189bb-ab1c-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=499&amp;id=u4ed91ec6&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=549&amp;originWidth=710&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=30848&amp;status=done&amp;style=none&amp;taskId=udc9a4341-6e15-4c41-8a88-5260f25a1b7&amp;title=&amp;width=645.4545314646953" alt="image.png"></p><h4 id="偏移距离"><a href="#偏移距离" class="headerlink" title="偏移距离"></a>偏移距离</h4><p>选中扇形部分向外的偏移。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">,</span><span class="token literal-property property">selectedMode</span><span class="token operator">:</span> <span class="token string">'multiple'</span><span class="token punctuation">,</span> <span class="token comment">// 多选</span><span class="token literal-property property">selectedOffset</span><span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span><span class="token comment">// 偏移距离</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669273212512-60db9df6-61be-44b2-aa60-2ae108ae4ef1.png#averageHue=%23fdfaf7&amp;clientId=u260189bb-ab1c-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=527&amp;id=u5c14018f&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=580&amp;originWidth=722&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=31222&amp;status=done&amp;style=none&amp;taskId=u636b5538-d856-475a-8f5d-56322d2f4da&amp;title=&amp;width=656.363622137338" alt="image.png"></p><h3 id="圆环"><a href="#圆环" class="headerlink" title="圆环"></a>圆环</h3><p>饼图的半径<code>radius</code>。可以为如下类型：<br><code>number</code> ：直接指定外半径值。<br><code>string</code> ：例如， ‘20%’ ，表示外半径为可视区尺寸（容器高宽中 较小一项）的 <code>20%</code> 长度。<br><code>Array</code> ：数组的第一项是内半径，第二项是外半径, 通过 Array , 可以<br>将饼图设置为圆环图</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">,</span><span class="token literal-property property">selectedMode</span><span class="token operator">:</span> <span class="token string">'multiple'</span><span class="token punctuation">,</span> <span class="token comment">// 多选</span><span class="token literal-property property">selectedOffset</span><span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span><span class="token comment">// 偏移距离</span><span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'50%'</span><span class="token punctuation">,</span> <span class="token string">'70%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token comment">//圆环半径</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669273579809-73633494-5939-4b08-8aba-a73beef0509d.png#averageHue=%23fdfaf8&amp;clientId=u260189bb-ab1c-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=488&amp;id=u12dd5031&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=537&amp;originWidth=679&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=29096&amp;status=done&amp;style=none&amp;taskId=u1169f713-4ce8-48e0-b650-38a427dfe58&amp;title=&amp;width=617.2727138937015" alt="image.png"></p><h2 id="地图"><a href="#地图" class="headerlink" title="地图"></a>地图</h2><p>地图的实现，需要矢量地图数据，地图的数据在<code>[https://datav.aliyun.com/portal/school/atlas/area_selector](https://datav.aliyun.com/portal/school/atlas/area_selector)</code>这个地址里面可以下载出来相关的数据。</p><h3 id="基本实现-1"><a href="#基本实现-1" class="headerlink" title="基本实现"></a>基本实现</h3><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>地图<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span><span class="token comment">&lt;!-- 1.引入Echarts和jquery --&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./echarts.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./jquery-3.6.1.min.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span><span class="token comment">&lt;!-- 2.ECharts最基本的代码结构 --&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 1200px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"><span class="token comment">//3.初始化echarts实例</span><span class="token keyword">var</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//4．使用Ajax获取矢量地图数据</span>$<span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token string">'./china.json'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token comment">//5．在Ajax的回调函数中注册地图矢量数据echarts.registerMap( ' chinaMap'，矢量地图数据)</span>echarts<span class="token punctuation">.</span><span class="token function">registerMap</span><span class="token punctuation">(</span><span class="token string">'chinaMap'</span><span class="token punctuation">,</span> res<span class="token punctuation">)</span><span class="token comment">//6．配置geo的type为'map ' , map为'chinaMap'</span><span class="token keyword">let</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">geo</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'map'</span><span class="token punctuation">,</span><span class="token literal-property property">map</span><span class="token operator">:</span> <span class="token string">"chinaMap"</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token comment">//7.使用制定的配置项和数据显示图表</span>myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">)</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="缩放拖动"><a href="#缩放拖动" class="headerlink" title="缩放拖动"></a>缩放拖动</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">geo</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'map'</span><span class="token punctuation">,</span><span class="token comment">// map是一个固定的值</span><span class="token literal-property property">map</span><span class="token operator">:</span> <span class="token string">'chinaMap'</span><span class="token punctuation">,</span><span class="token comment">//chinaMap需要和registerMap中的第一个参数保持一致,</span><span class="token literal-property property">roam</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 运行使用鼠标进行拖动和缩放</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="名称显示"><a href="#名称显示" class="headerlink" title="名称显示"></a>名称显示</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">geo</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'map'</span><span class="token punctuation">,</span><span class="token comment">// map是一个固定的值</span><span class="token literal-property property">map</span><span class="token operator">:</span> <span class="token string">'chinaMap'</span><span class="token punctuation">,</span><span class="token comment">//chinaMap需要和registerMap中的第一个参数保持一致,</span><span class="token literal-property property">roam</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669274285244-3a2252d5-0890-489a-9ea8-807712684b02.png#averageHue=%23f5f5f5&amp;clientId=u260189bb-ab1c-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=551&amp;id=ub1f38b7d&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=606&amp;originWidth=626&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=85706&amp;status=done&amp;style=none&amp;taskId=ua846d504-9ce1-49e0-8ddc-5ec7a006a75&amp;title=&amp;width=569.0908967561961" alt="image.png"></p><h4 id="初始缩放比例"><a href="#初始缩放比例" class="headerlink" title="初始缩放比例"></a>初始缩放比例</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">geo</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'map'</span><span class="token punctuation">,</span><span class="token comment">// map是一个固定的值</span><span class="token literal-property property">map</span><span class="token operator">:</span> <span class="token string">'chinaMap'</span><span class="token punctuation">,</span><span class="token comment">//chinaMap需要和registerMap中的第一个参数保持一致,</span><span class="token literal-property property">roam</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">zoom</span><span class="token operator">:</span> <span class="token number">0.8</span><span class="token punctuation">,</span> <span class="token comment">// 地图的缩放比例, 大于1代表放大, 小于1代表缩小</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="地图的中心"><a href="#地图的中心" class="headerlink" title="地图的中心"></a>地图的中心</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">geo</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'map'</span><span class="token punctuation">,</span><span class="token comment">// map是一个固定的值</span><span class="token literal-property property">map</span><span class="token operator">:</span> <span class="token string">'chinaMap'</span><span class="token punctuation">,</span><span class="token comment">//chinaMap需要和registerMap中的第一个参数保持一致,</span><span class="token literal-property property">roam</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><span class="token comment">// 运行使用鼠标进行拖动和缩放</span><span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 显示文字</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">zoom</span><span class="token operator">:</span> <span class="token number">0.8</span><span class="token punctuation">,</span> <span class="token comment">// 地图的缩放比例, 大于1代表放大, 小于1代表缩小</span><span class="token literal-property property">center</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">87.617733</span><span class="token punctuation">,</span> <span class="token number">43.792818</span><span class="token punctuation">]</span> <span class="token comment">// 当前视角的中心点，用经纬度表示，当前设置为新疆是地图的中心点。</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="常见效果-1"><a href="#常见效果-1" class="headerlink" title="常见效果"></a>常见效果</h3><h4 id="显示某个区域的地图"><a href="#显示某个区域的地图" class="headerlink" title="显示某个区域的地图"></a>显示某个区域的地图</h4><p>跟显示中国地图是相同的，只是地图数据不同而已。</p><h4 id="不同城市显示不同颜色"><a href="#不同城市显示不同颜色" class="headerlink" title="不同城市显示不同颜色"></a>不同城市显示不同颜色</h4><p>1、显示基本的中国地图</p><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>地图<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span><span class="token comment">&lt;!-- 1.引入Echarts和jquery --&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./echarts.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./jquery-3.6.1.min.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span><span class="token comment">&lt;!-- 2.ECharts最基本的代码结构 --&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 1200px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"><span class="token comment">//3.初始化echarts实例</span><span class="token keyword">var</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//4．使用Ajax获取矢量地图数据</span>$<span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token string">'./china.json'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token comment">//5．在Ajax的回调函数中注册地图矢量数据echarts.registerMap( ' chinaMap'，矢量地图数据)</span>echarts<span class="token punctuation">.</span><span class="token function">registerMap</span><span class="token punctuation">(</span><span class="token string">'chinaMap'</span><span class="token punctuation">,</span> res<span class="token punctuation">)</span><span class="token comment">//6．配置geo的type为'map ' , map为'chinaMap'</span><span class="token keyword">let</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">geo</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'map'</span><span class="token punctuation">,</span><span class="token literal-property property">map</span><span class="token operator">:</span> <span class="token string">"chinaMap"</span><span class="token punctuation">,</span><span class="token literal-property property">roam</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><span class="token comment">//缩放</span><span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><span class="token comment">//显示文字</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token comment">//7.使用制定的配置项和数据显示图表</span>myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">)</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>2、准备数据，我准备的是疫情数据</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> confirmedCount <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"安徽省"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"AH"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">1572</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"澳门特别行政区"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"AM"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">796</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"北京市"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"BJ"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">7922</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"重庆市"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"CQ"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">4551</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"福建省"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"FJ"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">5736</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"广东省"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"GD"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">28216</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"甘肃省"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"GS"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">1523</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"广西壮族自治区"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"GX"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">2364</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"贵州省"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"GZ"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">1136</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"湖北省"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"HB"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">68511</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"河北省"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"HB-1"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">2182</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"黑龙江省"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"HLJ"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">3904</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"湖南省"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"HN"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">1932</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"河南省"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"HN-1"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">6328</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"海南省"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"HN-2"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">9030</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"吉林省"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"JL"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">40356</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"江苏省"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"JS"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">3226</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"江西省"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"JX"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">1513</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"辽宁省"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"LN"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">2219</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"内蒙古自治区"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"NMG"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">6956</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"宁夏回族自治区"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"NX"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">227</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"青海省"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"QH"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">383</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"四川省"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"SC"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">8363</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"山东省"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"SD"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">3502</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"上海市"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"SH"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">64435</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"陕西省"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"SX"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">4749</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"山西省"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"SX-1"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">2873</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"天津市"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"TJ"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">2578</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"台湾省"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"TW"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">8210955</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"香港特别行政区"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"XG"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">452483</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"新疆维吾尔自治区"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"XJ"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">2414</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"西藏自治区"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"XZ"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">1498</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"云南省"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"YN"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">3430</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"浙江省"</span><span class="token punctuation">,</span><span class="token string-property property">"provinceCode"</span><span class="token operator">:</span> <span class="token string">"ZJ"</span><span class="token punctuation">,</span><span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token number">3889</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>3、将 <code>series</code> 下的数据和 <code>geo</code> 关联起来</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'map'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> confirmedCount<span class="token punctuation">,</span><span class="token literal-property property">geoIndex</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669275701107-abdd0a75-34db-4998-ba06-7a34700ea3b7.png#averageHue=%23f5f5f5&amp;clientId=u260189bb-ab1c-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=493&amp;id=u1d094f3d&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=542&amp;originWidth=663&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=79012&amp;status=done&amp;style=none&amp;taskId=ub59c2b94-239b-4c19-9b72-567ed5eeda5&amp;title=&amp;width=602.7272596635112" alt="image.png"><br>4、结合 visualMap 配合使用<br>visualMap 是视觉映射组件, 和之前区域缩放 dataZoom 很类似, 可以做数据的过滤. 只不过 dataZoom 主要使用在直角坐标系的图表, 而 visualMap 主要使用在地图或者饼图中</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">visualMap</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">min</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 最小值</span><span class="token literal-property property">max</span><span class="token operator">:</span> <span class="token number">8000</span><span class="token punctuation">,</span> <span class="token comment">// 最大值</span><span class="token literal-property property">inRange</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'white'</span><span class="token punctuation">,</span> <span class="token string">'red'</span><span class="token punctuation">]</span> <span class="token comment">// 颜色的范围</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">calculable</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669276083034-c7a34159-6c7b-4936-a722-d52793db7367.png#averageHue=%23fbe7e7&amp;clientId=u260189bb-ab1c-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=651&amp;id=u07601208&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=716&amp;originWidth=892&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=101915&amp;status=done&amp;style=none&amp;taskId=u23f62a6c-a483-4f20-8a99-326368e1406&amp;title=&amp;width=810.9090733331101" alt="image.png"></p><h4 id="地图和散点图结合"><a href="#地图和散点图结合" class="headerlink" title="地图和散点图结合"></a>地图和散点图结合</h4><p>1、准备一个新的数据，该数据为散点数据</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> scatterData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">117.283042</span><span class="token punctuation">,</span> <span class="token number">31.86119</span><span class="token punctuation">]</span> <span class="token comment">// 散点的坐标, 使用的是经纬度</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>2、在<code>series</code>这个数组下增加新的对象<br>3、将 <code>type</code>设置为<code>effectScatter</code><br>4、将散点图使用地图的坐标系统<br>5、增强涟漪效果</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token comment">// 地图数据</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'map'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> confirmedCount<span class="token punctuation">,</span><span class="token literal-property property">geoIndex</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token comment">// 散点数据</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'effectScatter'</span><span class="token punctuation">,</span> <span class="token comment">// 3</span><span class="token literal-property property">data</span><span class="token operator">:</span> scatterData<span class="token punctuation">,</span><span class="token literal-property property">coordinateSystem</span><span class="token operator">:</span> <span class="token string">'geo'</span><span class="token punctuation">,</span> <span class="token comment">//4、 这里设置为地图，跟地图绑定</span><span class="token literal-property property">geoIndex</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span><span class="token literal-property property">rippleEffect</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">scale</span><span class="token operator">:</span> <span class="token number">10</span>  <span class="token comment">// 5、增强涟漪的状态</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">itemStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'green'</span>  <span class="token comment">// 控制散点的颜色</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669278736493-3433683f-6a1d-4559-bc93-117b35e1b94a.png#averageHue=%23fbf0f0&amp;clientId=ub2c6c087-8a4a-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=576&amp;id=u92660ef5&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=634&amp;originWidth=950&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=82304&amp;status=done&amp;style=none&amp;taskId=ua07026d6-1e04-48e0-9fd8-a6480a4b3e3&amp;title=&amp;width=863.63634491755" alt="image.png"></p><h2 id="雷达图"><a href="#雷达图" class="headerlink" title="雷达图"></a>雷达图</h2><h3 id="基本实现-2"><a href="#基本实现-2" class="headerlink" title="基本实现"></a>基本实现</h3><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>雷达图<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span><span class="token comment">&lt;!--1.引入Echarts和jquery  --&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./echarts.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./jquery-3.6.1.min.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span><span class="token comment">&lt;!--2.准备容器盒子--&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"><span class="token comment">// 3.初始化实例</span><span class="token keyword">const</span> chartDom <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#main'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">const</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>chartDom<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">var</span> option<span class="token punctuation">;</span><span class="token comment">// 4.准备数据</span><span class="token keyword">const</span> <span class="token operator">=</span> indicatorData  <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token comment">// name 就是每个点的名称 max 是每个点的最大值 color 设置name 的颜色</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'衣服'</span><span class="token punctuation">,</span> <span class="token literal-property property">max</span><span class="token operator">:</span> <span class="token number">6500</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'裤子'</span><span class="token punctuation">,</span> <span class="token literal-property property">max</span><span class="token operator">:</span> <span class="token number">16000</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'鞋子'</span><span class="token punctuation">,</span> <span class="token literal-property property">max</span><span class="token operator">:</span> <span class="token number">30000</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'帽子'</span><span class="token punctuation">,</span> <span class="token literal-property property">max</span><span class="token operator">:</span> <span class="token number">38000</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'手套'</span><span class="token punctuation">,</span> <span class="token literal-property property">max</span><span class="token operator">:</span> <span class="token number">52000</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'耳罩'</span><span class="token punctuation">,</span> <span class="token literal-property property">max</span><span class="token operator">:</span> <span class="token number">25000</span> <span class="token punctuation">}</span><span class="token punctuation">]</span>option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token comment">//5.雷达图坐标系组 也就是背景的圈</span><span class="token literal-property property">radar</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token comment">// 雷达图的指示器，用来指定雷达图中的多个变量（维度</span><span class="token literal-property property">indicator</span><span class="token operator">:</span> indicatorData<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token comment">// 6.图中的两圈线</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'radar'</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">4200</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">,</span> <span class="token number">20000</span><span class="token punctuation">,</span> <span class="token number">35000</span><span class="token punctuation">,</span> <span class="token number">50000</span><span class="token punctuation">,</span> <span class="token number">18000</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'阿迪达斯'</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5000</span><span class="token punctuation">,</span> <span class="token number">14000</span><span class="token punctuation">,</span> <span class="token number">28000</span><span class="token punctuation">,</span> <span class="token number">26000</span><span class="token punctuation">,</span> <span class="token number">42000</span><span class="token punctuation">,</span> <span class="token number">21000</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'鸿星尔克'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">;</span>option <span class="token operator">&amp;&amp;</span> myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669279633738-b3a95840-09c5-4954-ae21-a65efef239d3.png#averageHue=%23fefefe&amp;clientId=ub2c6c087-8a4a-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=530&amp;id=u5abbe1ef&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=583&amp;originWidth=635&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=56622&amp;status=done&amp;style=none&amp;taskId=ud548fe8a-1308-43b1-9e38-1a6321134e5&amp;title=&amp;width=577.2727147606781" alt="image.png"></p><h3 id="雷达图效果"><a href="#雷达图效果" class="headerlink" title="雷达图效果"></a>雷达图效果</h3><h4 id="显示数值"><a href="#显示数值" class="headerlink" title="显示数值"></a>显示数值</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'radar'</span><span class="token punctuation">,</span><span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">4200</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">,</span> <span class="token number">20000</span><span class="token punctuation">,</span> <span class="token number">35000</span><span class="token punctuation">,</span> <span class="token number">50000</span><span class="token punctuation">,</span> <span class="token number">18000</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'阿迪达斯'</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5000</span><span class="token punctuation">,</span> <span class="token number">14000</span><span class="token punctuation">,</span> <span class="token number">28000</span><span class="token punctuation">,</span> <span class="token number">26000</span><span class="token punctuation">,</span> <span class="token number">42000</span><span class="token punctuation">,</span> <span class="token number">21000</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'鸿星尔克'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669279735621-1ee7702e-3c14-45d7-a96f-db93ca712d1e.png#averageHue=%23fdfdfd&amp;clientId=ub2c6c087-8a4a-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=494&amp;id=u3afd3985&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=543&amp;originWidth=558&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=64026&amp;status=done&amp;style=none&amp;taskId=u8baf837e-dc87-49d0-92ee-9b20abe60c9&amp;title=&amp;width=507.27271627788724" alt="image.png"></p><h4 id="区域面积-areaStyle"><a href="#区域面积-areaStyle" class="headerlink" title="区域面积 areaStyle"></a>区域面积 areaStyle</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'radar'</span><span class="token punctuation">,</span><span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 显示数值</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">areaStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 区域填充的样式</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">4200</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">,</span> <span class="token number">20000</span><span class="token punctuation">,</span> <span class="token number">35000</span><span class="token punctuation">,</span> <span class="token number">50000</span><span class="token punctuation">,</span> <span class="token number">18000</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'阿迪达斯'</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5000</span><span class="token punctuation">,</span> <span class="token number">14000</span><span class="token punctuation">,</span> <span class="token number">28000</span><span class="token punctuation">,</span> <span class="token number">26000</span><span class="token punctuation">,</span> <span class="token number">42000</span><span class="token punctuation">,</span> <span class="token number">21000</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'鸿星尔克'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669279809265-0bfb16ab-4213-482f-bab6-33bf7873a4dc.png#averageHue=%23fdfdfd&amp;clientId=ub2c6c087-8a4a-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=506&amp;id=uf0da14c0&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=557&amp;originWidth=640&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=57167&amp;status=done&amp;style=none&amp;taskId=uf81d6c4e-82ee-4783-97ad-8808cbf2d41&amp;title=&amp;width=581.8181692076126" alt="image.png"></p><h4 id="绘制背景图形"><a href="#绘制背景图形" class="headerlink" title="绘制背景图形"></a>绘制背景图形</h4><p>雷达背景图有两种形状，一种是<code>polygon</code>多边形，一种是<code>circle</code>圆形。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">radar</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">shape</span><span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">,</span> <span class="token comment">// 背景图为圆形</span><span class="token literal-property property">indicator</span><span class="token operator">:</span> indicatorData<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'radar'</span><span class="token punctuation">,</span><span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 显示数值</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">areaStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 区域填充的样式</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">4200</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">,</span> <span class="token number">20000</span><span class="token punctuation">,</span> <span class="token number">35000</span><span class="token punctuation">,</span> <span class="token number">50000</span><span class="token punctuation">,</span> <span class="token number">18000</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'阿迪达斯'</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5000</span><span class="token punctuation">,</span> <span class="token number">14000</span><span class="token punctuation">,</span> <span class="token number">28000</span><span class="token punctuation">,</span> <span class="token number">26000</span><span class="token punctuation">,</span> <span class="token number">42000</span><span class="token punctuation">,</span> <span class="token number">21000</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'鸿星尔克'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="仪表盘图"><a href="#仪表盘图" class="headerlink" title="仪表盘图"></a>仪表盘图</h2><h3 id="基本实现-3"><a href="#基本实现-3" class="headerlink" title="基本实现"></a>基本实现</h3><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>仪表盘<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span><span class="token comment">&lt;!-- 1.准备盒子     --&gt;</span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 1200px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token comment">&lt;!-- 2.引入echarts     --&gt;</span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>echarts.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">    <span class="token comment">//3.初始化实例</span>      <span class="token keyword">var</span> chartDom <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>      <span class="token keyword">var</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>chartDom<span class="token punctuation">)</span><span class="token punctuation">;</span>      <span class="token keyword">var</span> option<span class="token punctuation">;</span>    <span class="token comment">// 4.准备配置</span>      option <span class="token operator">=</span> <span class="token punctuation">{</span>        <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span>          <span class="token punctuation">{</span>            <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'gauge'</span><span class="token punctuation">,</span><span class="token comment">// 类型为 gauge</span>            <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span>        <span class="token punctuation">]</span>      <span class="token punctuation">}</span><span class="token punctuation">;</span>    <span class="token comment">// 5.将配置设置给实例</span>      option <span class="token operator">&amp;&amp;</span> myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span>    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="常见效果-2"><a href="#常见效果-2" class="headerlink" title="常见效果"></a>常见效果</h3><h4 id="数值范围"><a href="#数值范围" class="headerlink" title="数值范围"></a>数值范围</h4><p>仪表盘的刻度范围，最大值和最小值</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">option <span class="token operator">=</span> <span class="token punctuation">{</span>  <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span>    <span class="token punctuation">{</span>      <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'gauge'</span><span class="token punctuation">,</span><span class="token comment">// 类型为 gauge</span>      <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span>        <span class="token punctuation">{</span>          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>        <span class="token punctuation">}</span>      <span class="token punctuation">]</span><span class="token punctuation">,</span>      <span class="token literal-property property">min</span><span class="token operator">:</span><span class="token number">20</span><span class="token punctuation">,</span>      <span class="token literal-property property">max</span><span class="token operator">:</span><span class="token number">90</span>    <span class="token punctuation">}</span>  <span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669771051760-1d0f0182-31d4-4dab-a897-d16299f80abb.png#averageHue=%23fefefe&amp;clientId=uc2c87947-49f3-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=559&amp;id=u51afb8f3&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=615&amp;originWidth=1029&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=26466&amp;status=done&amp;style=none&amp;taskId=u1b782f54-9e82-4c6b-a547-49c46a81ff7&amp;title=&amp;width=935.4545251791146" alt="image.png"></p><h4 id="多个指针和不同颜色"><a href="#多个指针和不同颜色" class="headerlink" title="多个指针和不同颜色"></a>多个指针和不同颜色</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">option <span class="token operator">=</span> <span class="token punctuation">{</span>  <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span>    <span class="token punctuation">{</span>      <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'gauge'</span><span class="token punctuation">,</span>      <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">// 在data中设置多个值</span>        <span class="token punctuation">{</span>          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>          <span class="token literal-property property">itemStyle</span><span class="token operator">:</span><span class="token punctuation">{</span> <span class="token comment">// 每个指针设置不同的颜色</span>            <span class="token literal-property property">color</span><span class="token operator">:</span><span class="token string">'pink'</span>          <span class="token punctuation">}</span>        <span class="token punctuation">}</span><span class="token punctuation">,</span>        <span class="token punctuation">{</span>          <span class="token literal-property property">value</span><span class="token operator">:</span><span class="token number">85</span><span class="token punctuation">,</span>          <span class="token literal-property property">itemStyle</span><span class="token operator">:</span><span class="token punctuation">{</span>            <span class="token literal-property property">color</span><span class="token operator">:</span><span class="token string">'purple'</span>          <span class="token punctuation">}</span>        <span class="token punctuation">}</span>      <span class="token punctuation">]</span><span class="token punctuation">,</span>      <span class="token literal-property property">min</span><span class="token operator">:</span><span class="token number">20</span><span class="token punctuation">,</span>      <span class="token literal-property property">max</span><span class="token operator">:</span><span class="token number">90</span>    <span class="token punctuation">}</span>  <span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="K线图"><a href="#K线图" class="headerlink" title="K线图"></a>K线图</h2><h2 id="关系图"><a href="#关系图" class="headerlink" title="关系图"></a>关系图</h2><p>在目前所处的项目中使用到了关系图，来描述两者之间的关系。</p><h3 id="基本实现-4"><a href="#基本实现-4" class="headerlink" title="基本实现"></a>基本实现</h3><p>设置<code>type</code>为 <code>graph</code>，同时还要设置图的布局</p><ul><li><code>none</code>不采用任何布局，使用<code>x</code>,<code>y</code>作为节点的位置</li><li>‘circular’ 采用环形布局</li><li>‘force’ 采用力引导布局<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>关系图<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span><span class="token comment">&lt;!--1.引入echarts --&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./echarts.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span><span class="token comment">&lt;!--2.准备盒子 --&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"><span class="token comment">// 3.准备数据</span><span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">nodes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"老大"</span><span class="token punctuation">,</span><span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span><span class="token literal-property property">category</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"老二"</span><span class="token punctuation">,</span><span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span><span class="token literal-property property">category</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"老三"</span><span class="token punctuation">,</span><span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span><span class="token literal-property property">category</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token literal-property property">links</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span><span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span><span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token comment">// 4.初始化实例</span><span class="token keyword">var</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'graph'</span><span class="token punctuation">,</span> <span class="token literal-property property">layout</span><span class="token operator">:</span> <span class="token string">'force'</span><span class="token punctuation">,</span> <span class="token comment">// 设置图的布局</span><span class="token literal-property property">data</span><span class="token operator">:</span> data<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>nodes<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">node<span class="token punctuation">,</span> idx</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>node<span class="token punctuation">.</span>id <span class="token operator">=</span> idx<span class="token punctuation">;</span><span class="token keyword">return</span> node<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token literal-property property">edges</span><span class="token operator">:</span> data<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>links <span class="token comment">// 节点间的关系数据</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">;</span>myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669289336185-e724431f-3aca-4315-a89e-00aa559960d5.png#averageHue=%23fefefe&amp;clientId=ub2c6c087-8a4a-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=414&amp;id=u26874529&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=455&amp;originWidth=537&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=3189&amp;status=done&amp;style=none&amp;taskId=ub68dd75b-988f-437e-9ec7-8e112976b31&amp;title=&amp;width=488.18180760076245" alt="image.png"><br>好的，我们将关系图弄出来了。<h3 id="常用的配置"><a href="#常用的配置" class="headerlink" title="常用的配置"></a>常用的配置</h3><h4 id="显示名称"><a href="#显示名称" class="headerlink" title="显示名称"></a>显示名称</h4></li></ul><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">,</span><span class="token literal-property property">label</span><span class="token operator">:</span><span class="token punctuation">{</span><span class="token literal-property property">show</span><span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 显示名称</span><span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span><span class="token comment">// 字体大小</span><span class="token literal-property property">position</span><span class="token operator">:</span> <span class="token string">'right'</span><span class="token punctuation">,</span><span class="token literal-property property">formatter</span><span class="token operator">:</span> <span class="token string">'{b}'</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669289568037-be37fafa-89f3-43f1-940f-3244e89c7fee.png#averageHue=%23fefefe&amp;clientId=ub2c6c087-8a4a-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=360&amp;id=ufe6b4fd2&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=396&amp;originWidth=429&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=6127&amp;status=done&amp;style=none&amp;taskId=u1d4f79f4-0c01-4f6c-b20b-b275d4dbdde&amp;title=&amp;width=389.9999915469778" alt="image.png"></p><h4 id="改变节点的大小"><a href="#改变节点的大小" class="headerlink" title="改变节点的大小"></a>改变节点的大小</h4><p>然后我们发现，字体有了，但是节点是不是太小了，所以我们需要<code>symbolSize</code>设置节点大小。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">,</span><span class="token literal-property property">symbolSize</span><span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span><span class="token comment">// 改变节点的大小</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669289667293-89896e50-e89f-484d-a5ee-600ea1e29de9.png#averageHue=%23fefefe&amp;clientId=ub2c6c087-8a4a-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=399&amp;id=u4adef77b&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=439&amp;originWidth=643&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=6415&amp;status=done&amp;style=none&amp;taskId=ub7d04b01-3300-4efe-9ac9-d8183c0b24c&amp;title=&amp;width=584.5454418757733" alt="image.png"></p><h4 id="改变节点间距"><a href="#改变节点间距" class="headerlink" title="改变节点间距"></a>改变节点间距</h4><p>然后我们发现节点之间太挤了，我们需要设置一些参数，让其相互之间有排斥。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">,</span><span class="token literal-property property">force</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">edgeLength</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token comment">// 相同边的两个节点之间的距离</span><span class="token literal-property property">repulsion</span><span class="token operator">:</span> <span class="token number">2000</span><span class="token punctuation">,</span> <span class="token comment">//节点之间的斥力因子。</span><span class="token literal-property property">gravity</span><span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span><span class="token comment">//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669289955398-9f722d4c-c4ca-46de-bf66-5c12f9b9bb71.png#averageHue=%23fefefe&amp;clientId=ub2c6c087-8a4a-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=424&amp;id=u0e423cff&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=466&amp;originWidth=600&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=8844&amp;status=done&amp;style=none&amp;taskId=u6c5ca012-916c-4ffb-8792-7c546fee7ea&amp;title=&amp;width=545.4545336321369" alt="image.png"></p><h4 id="拖拽"><a href="#拖拽" class="headerlink" title="拖拽"></a>拖拽</h4><p>我们想要拖拽节点乱动的话，整点花里胡哨的活儿。我们可以设置<code>draggable</code></p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">,</span><span class="token literal-property property">draggable</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//节点是否可拖拽，只在使用力引导布局的时候有用。</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="显示箭头"><a href="#显示箭头" class="headerlink" title="显示箭头"></a>显示箭头</h4><p>我们需要给<code>edges</code></p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">,</span><span class="token literal-property property">edges</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span><span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span><span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span><span class="token literal-property property">symbol</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'none'</span><span class="token punctuation">,</span> <span class="token string">'arrow'</span><span class="token punctuation">]</span><span class="token comment">//箭头</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669290291811-4254e1f3-edd2-4484-ad0d-a2852d172d35.png#averageHue=%23fefefe&amp;clientId=ub2c6c087-8a4a-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=405&amp;id=ua1a41ed0&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=446&amp;originWidth=709&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=9011&amp;status=done&amp;style=none&amp;taskId=u9ed30e6d-93a0-4625-9b97-ac52f0e2e7e&amp;title=&amp;width=644.5454405753084" alt="image.png"></p><h4 id="线段上显示值"><a href="#线段上显示值" class="headerlink" title="线段上显示值"></a>线段上显示值</h4><p>线段上显示值，这个值是跟<code>nodes</code>中每个对象的<code>value</code>是有关的。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> option <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">series</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">,</span><span class="token literal-property property">edgeLabel</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><span class="token comment">// 是否显示线条上的文字</span><span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token comment">//文字大小</span><span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span> <span class="token comment">// 文字颜色</span><span class="token function-variable function">formatter</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 自定义显示文字</span><span class="token comment">// console.log(x);</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="-1"><a href="#-1" class="headerlink" title></a></h3><h4 id="-2"><a href="#-2" class="headerlink" title></a></h4><h4 id="-3"><a href="#-3" class="headerlink" title></a></h4><h4 id="-4"><a href="#-4" class="headerlink" title></a></h4><h3 id="-5"><a href="#-5" class="headerlink" title></a></h3><h2 id="K线图-1"><a href="#K线图-1" class="headerlink" title="K线图"></a>K线图</h2><p>K线图我目前没有真正的在业务开发场景中使用过，按照文档的配置学习和修改。</p><h3 id="标题title-1"><a href="#标题title-1" class="headerlink" title="标题title"></a>标题title</h3><h4 id="text"><a href="#text" class="headerlink" title="text"></a>text</h4><p>标题的文字，主标题。</p><h4 id="left"><a href="#left" class="headerlink" title="left"></a>left</h4><p>距离左边容器的距离。可以设置具体的<code>px</code>、百分比、英文（<code>center、left、bottom、top</code>）</p><h3 id="提示框tooltip"><a href="#提示框tooltip" class="headerlink" title="提示框tooltip"></a>提示框tooltip</h3><h4 id="触发类型-trigger"><a href="#触发类型-trigger" class="headerlink" title="触发类型 trigger"></a>触发类型 trigger</h4><p>在什么样的图形中触发</p><h4 id="axisPointer"><a href="#axisPointer" class="headerlink" title="axisPointer"></a>axisPointer</h4><p>坐标轴指示器配置项。也就是你鼠标进入图形的的时候，鼠标头出现的样式。</p><h5 id="type"><a href="#type" class="headerlink" title="type"></a>type</h5><p>指示器类型。</p><ul><li>‘line’ 直线指示器</li><li>‘shadow’ 阴影指示器</li><li>‘none’ 无指示器</li><li>‘cross’ 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。</li></ul><h3 id="legend"><a href="#legend" class="headerlink" title="legend"></a>legend</h3><p>图例组件，图例组件展现了不同系列的标记，颜色和名字，我们可以通过点击图例来控制那些系列不显示。<br><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669011358616-bfe57010-f580-4c5b-8b7e-6adddbff921d.png#averageHue=%23f5da9c&amp;clientId=u4e1e3752-7f82-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=637&amp;id=u8e52bd18&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=637&amp;originWidth=1030&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=116051&amp;status=done&amp;style=none&amp;taskId=u01209312-0c33-40e9-8808-6c14c869686&amp;title=&amp;width=1030" alt="image.png"><br>也就是图中的上面圈中的部分。</p><h4 id="数据data"><a href="#数据data" class="headerlink" title="数据data"></a>数据data</h4><p>图列的数据数组，这里的话我是用的是字符串</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">legend</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'日K'</span><span class="token punctuation">,</span> <span class="token string">'MA5'</span><span class="token punctuation">,</span> <span class="token string">'MA10'</span><span class="token punctuation">,</span> <span class="token string">'MA20'</span><span class="token punctuation">,</span> <span class="token string">'MA30'</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p>但是有时候，我们可以使用对象的形式设置，这样的话，我们可以给每个单独项设置单一的样式。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'系列1'</span><span class="token punctuation">,</span><span class="token comment">// 强制设置图形为圆。</span><span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">,</span><span class="token comment">// 设置文本为红色</span><span class="token literal-property property">textStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="辅助工具toolbox"><a href="#辅助工具toolbox" class="headerlink" title="辅助工具toolbox"></a>辅助工具toolbox</h3><p>我们可以在右上角看到一些辅助的工具栏目<br><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669011860412-d276d475-acdf-4990-a585-e2e608fe207e.png#averageHue=%23f4d59a&amp;clientId=u4e1e3752-7f82-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=694&amp;id=udab7ec6a&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=694&amp;originWidth=1206&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=87558&amp;status=done&amp;style=none&amp;taskId=u0727be19-5be7-49e3-b8fc-66e3e2ad8b8&amp;title=&amp;width=1206" alt="image.png"></p><h4 id="工具配置项feature"><a href="#工具配置项feature" class="headerlink" title="工具配置项feature"></a>工具配置项feature</h4><h5 id="区域缩放dataZoom"><a href="#区域缩放dataZoom" class="headerlink" title="区域缩放dataZoom"></a>区域缩放dataZoom</h5><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">feature</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token comment">//数据区域缩放。</span><span class="token literal-property property">dataZoom</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">yAxisIndex</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token comment">//不控制任何y轴</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h5 id="选项框的控制按钮-brush"><a href="#选项框的控制按钮-brush" class="headerlink" title="选项框的控制按钮 brush"></a>选项框的控制按钮 brush</h5><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">feature</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token comment">//数据区域缩放。</span><span class="token literal-property property">dataZoom</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">yAxisIndex</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token comment">//不控制任何y轴</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token literal-property property">brush</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'lineX'</span><span class="token punctuation">,</span><span class="token comment">// 开启横向选择功能</span><span class="token string">'clear'</span><span class="token punctuation">,</span><span class="token comment">// 清空所有选框</span><span class="token string">'keep'</span><span class="token punctuation">,</span><span class="token comment">//切换成单选或者是多选。多选可以选择多个选择框，单选点击未选中区域可以清除所有选择框。</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="区域选择性工具brush"><a href="#区域选择性工具brush" class="headerlink" title="区域选择性工具brush"></a>区域选择性工具brush</h3><p>可以使用该工具选择一个四边形或者多边形选择区域。从而让我们可以选择一部分的数据，便于向用户进行展示被选中的数据。</p><h4 id="xAxisIndex"><a href="#xAxisIndex" class="headerlink" title="xAxisIndex"></a>xAxisIndex</h4><p>表示那些 xAxisIndex &nbsp;可以被刷选</p><h4 id="brushLink"><a href="#brushLink" class="headerlink" title="brushLink"></a>brushLink</h4><p>不同的系列之间，选中的部分可以联动</p><h4 id="outOfBrush"><a href="#outOfBrush" class="headerlink" title="outOfBrush"></a>outOfBrush</h4><p>选中范围外的视觉元素</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">outOfBrush</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token comment">//选中范围外的视觉元素</span><span class="token literal-property property">colorAlpha</span><span class="token operator">:</span> <span class="token number">0.1</span> <span class="token comment">//  图元的颜色的透明度。</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><p>配置部分</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">brush</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">xAxisIndex</span><span class="token operator">:</span> <span class="token string">'all'</span><span class="token punctuation">,</span><span class="token comment">// 表示那些 xAxisIndex  可以被刷选</span><span class="token literal-property property">brushLink</span><span class="token operator">:</span> <span class="token string">'all'</span><span class="token punctuation">,</span> <span class="token comment">// 不同的系列之间，选中的部分可以联动</span><span class="token literal-property property">outOfBrush</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token comment">//选中范围外的视觉元素</span><span class="token literal-property property">colorAlpha</span><span class="token operator">:</span> <span class="token number">0.1</span> <span class="token comment">//  图元的颜色的透明度。</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="直角坐标系内绘制网格grid"><a href="#直角坐标系内绘制网格grid" class="headerlink" title="直角坐标系内绘制网格grid"></a>直角坐标系内绘制网格grid</h3><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">grid</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token string">'10%'</span><span class="token punctuation">,</span><span class="token literal-property property">right</span><span class="token operator">:</span> <span class="token string">'10%'</span><span class="token punctuation">,</span><span class="token literal-property property">bottom</span><span class="token operator">:</span> <span class="token string">'15%'</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="直角坐标系的X轴-xAxis"><a href="#直角坐标系的X轴-xAxis" class="headerlink" title="直角坐标系的X轴 xAxis"></a>直角坐标系的X轴 xAxis</h3><h4 id="坐标轴两边留白策略-boundaryGap"><a href="#坐标轴两边留白策略-boundaryGap" class="headerlink" title="坐标轴两边留白策略 boundaryGap"></a>坐标轴两边留白策略 boundaryGap</h4><p>坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。<br>类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。<br>简单来说就是值会不会对准刻度，当为<code>true</code>的时候，不会对准刻度线，当为<code>false</code>的时候，会对准刻度线。</p><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup">/*** 1.boundaryGap：* * * 2.axisLine* 2.1 onZero X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。 * * 3.splitLine * 3.1 show  是否显示分隔线。默认数值轴显示，类目轴不显示。 也就是背景的的网格是否显示* * 4.max 坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。* * 5.min 坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。*/<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="坐标轴轴线相关设置-axisLine"><a href="#坐标轴轴线相关设置-axisLine" class="headerlink" title="坐标轴轴线相关设置 axisLine"></a>坐标轴轴线相关设置 axisLine</h4><h5 id="onZero"><a href="#onZero" class="headerlink" title="onZero"></a>onZero</h5><p> X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。<br>也就是说是否从0开始显示，但是X轴和Y轴，至少有一个轴是包含0刻度线的。</p><h4 id="坐标轴在-grid-区域中的分隔线-splitLine"><a href="#坐标轴在-grid-区域中的分隔线-splitLine" class="headerlink" title="坐标轴在 grid 区域中的分隔线 splitLine"></a>坐标轴在 <a href="https://echarts.apache.org/zh/option.html#grid">grid</a> 区域中的分隔线 splitLine</h4><h5 id="show"><a href="#show" class="headerlink" title="show"></a>show</h5><p>是否显示分隔线。默认数值轴显示，类目轴不显示。 也就是背景的的网格是否显示</p><h4 id="max-坐标轴刻度最大值"><a href="#max-坐标轴刻度最大值" class="headerlink" title="max 坐标轴刻度最大值"></a>max 坐标轴刻度最大值</h4><p>可以设置成特殊值 ‘dataMax’，此时取数据在该轴上的最大值作为最大刻度。</p><h4 id="min-坐标轴刻度最小值"><a href="#min-坐标轴刻度最小值" class="headerlink" title="min 坐标轴刻度最小值"></a>min 坐标轴刻度最小值</h4><p>坐标轴刻度最小值。可以设置成特殊值 ‘dataMin’，此时取数据在该轴上的最小值作为最小刻度。<br>部分配置：</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span>  <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>  <span class="token literal-property property">data</span><span class="token operator">:</span> data0<span class="token punctuation">.</span>categoryData<span class="token punctuation">,</span>  <span class="token literal-property property">boundaryGap</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>  <span class="token literal-property property">axisLine</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">onZero</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token literal-property property">splitLine</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token literal-property property">min</span><span class="token operator">:</span> <span class="token string">'dataMin'</span><span class="token punctuation">,</span>  <span class="token literal-property property">max</span><span class="token operator">:</span> <span class="token string">'dataMax'</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="直角坐标系的Y轴-yAxis"><a href="#直角坐标系的Y轴-yAxis" class="headerlink" title="直角坐标系的Y轴 yAxis"></a>直角坐标系的Y轴 yAxis</h3><h4 id="scale-是否包含0刻度线"><a href="#scale-是否包含0刻度线" class="headerlink" title="scale 是否包含0刻度线"></a>scale 是否包含0刻度线</h4><p>只在数值轴中（type: ‘value’）有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。<br>如果为<code>false</code>会强制包含0刻度线，如果为<code>true</code>不会强制包含0刻度线。</p><h4 id="splitArea-显示分隔区域"><a href="#splitArea-显示分隔区域" class="headerlink" title="splitArea 显示分隔区域"></a>splitArea 显示分隔区域</h4><p>是否显示分隔区域。 也就是说是否显示成斑马线的格式<br>部分配置：</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span>  <span class="token literal-property property">scale</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>    <span class="token literal-property property">splitArea</span><span class="token operator">:</span> <span class="token punctuation">{</span>    <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span>  <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="图形缩放-dataZoom"><a href="#图形缩放-dataZoom" class="headerlink" title="图形缩放 dataZoom"></a>图形缩放 dataZoom</h3><p>图形的缩放有两种方式，一种就是鼠标滚轮的缩放，另一种就是图形下部有个滑块，可以控制缩放。<br><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669016330833-a88759a0-72a5-4a84-a8fe-ec2234609c92.png#averageHue=%23dbd791&amp;clientId=u3083a5d4-86bf-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=696&amp;id=uaed784bd&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=696&amp;originWidth=1163&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=110514&amp;status=done&amp;style=none&amp;taskId=uc648ebef-de7e-4453-b71b-d10a746ecda&amp;title=&amp;width=1163" alt="image.png"><br>配置:</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">dataZoom</span><span class="token operator">:</span> <span class="token punctuation">[</span>  <span class="token punctuation">{</span>    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'inside'</span><span class="token punctuation">,</span>    <span class="token literal-property property">start</span><span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span> <span class="token comment">// 数据窗口范围的起始百分比。</span>    <span class="token literal-property property">end</span><span class="token operator">:</span> <span class="token number">100</span> <span class="token comment">// 数据窗口范围的结束百分比。</span>  <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token punctuation">{</span>    <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否显示 组件。</span>    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'slider'</span><span class="token punctuation">,</span> <span class="token comment">//滑动条型数据区域缩放组件提供了数据缩略图显示，缩放，刷选，拖拽，点击快速定位等数据筛选的功能。 </span>    <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token string">'90%'</span><span class="token punctuation">,</span> <span class="token comment">// 距离顶部的距离</span>    <span class="token literal-property property">start</span><span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>    <span class="token literal-property property">end</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>    <span class="token literal-property property">brushSelect</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><span class="token comment">// 是否开启刷选功能。在下图的 brush 区域你可以按住鼠标左键后框选出选中部分。</span>  <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="series-系列列表"><a href="#series-系列列表" class="headerlink" title="series 系列列表"></a>series 系列列表</h3><p>系列列表，每个系列可以通过type决定自己的图标类型</p><h4 id="名称-name"><a href="#名称-name" class="headerlink" title="名称 name"></a>名称 name</h4><h4 id="图表的类型-type"><a href="#图表的类型-type" class="headerlink" title="图表的类型 type"></a>图表的类型 type</h4><h4 id="图表的数据-data"><a href="#图表的数据-data" class="headerlink" title="图表的数据 data"></a>图表的数据 data</h4><h4 id="图表中数据的样式-itemStyle"><a href="#图表中数据的样式-itemStyle" class="headerlink" title="图表中数据的样式 itemStyle"></a>图表中数据的样式 itemStyle</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">itemStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>  <span class="token literal-property property">color</span><span class="token operator">:</span> upColor<span class="token punctuation">,</span> <span class="token comment">// 阳线（上涨）</span>    <span class="token literal-property property">color0</span><span class="token operator">:</span> downColor<span class="token punctuation">,</span> <span class="token comment">// 阴线 （下降）</span>    <span class="token literal-property property">borderColor</span><span class="token operator">:</span> upBorderColor<span class="token punctuation">,</span> <span class="token comment">// 阳线图形的描边颜色</span>    <span class="token literal-property property">borderColor0</span><span class="token operator">:</span> downBorderColor <span class="token comment">// 阴线图形的描边颜色</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="图表标注-markPoint（最大值、最小值）"><a href="#图表标注-markPoint（最大值、最小值）" class="headerlink" title="图表标注 markPoint（最大值、最小值）"></a>图表标注 markPoint（最大值、最小值）</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">markPoint</span><span class="token operator">:</span> <span class="token punctuation">{</span>  <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span>    <span class="token function-variable function">formatter</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">param</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>      <span class="token comment">// console.log(param);</span>      <span class="token keyword">return</span> param <span class="token operator">!=</span> <span class="token keyword">null</span> <span class="token operator">?</span> Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>param<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">''</span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">;</span>    <span class="token punctuation">}</span>  <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span>    <span class="token punctuation">{</span>      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Mark'</span><span class="token punctuation">,</span>      <span class="token literal-property property">coord</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'2013/5/31'</span><span class="token punctuation">,</span> <span class="token number">2300</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// [x值，y值]</span>      <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2300</span><span class="token punctuation">,</span>      <span class="token literal-property property">itemStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>        <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'rgb(41,60,85)'</span>      <span class="token punctuation">}</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span>    <span class="token punctuation">{</span>      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'highest value'</span><span class="token punctuation">,</span>      <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'max'</span><span class="token punctuation">,</span>      <span class="token literal-property property">valueDim</span><span class="token operator">:</span> <span class="token string">'highest'</span> <span class="token comment">// [open, close, lowest, highest] （即：[开盘值, 收盘值, 最低值, 最高值]）</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span>    <span class="token punctuation">{</span>      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'lowest value'</span><span class="token punctuation">,</span>      <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'min'</span><span class="token punctuation">,</span>      <span class="token literal-property property">valueDim</span><span class="token operator">:</span> <span class="token string">'lowest'</span> <span class="token comment">// [open, close, lowest, highest] （即：[开盘值, 收盘值, 最低值, 最高值]）</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span>    <span class="token punctuation">{</span>      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'average value on close'</span><span class="token punctuation">,</span>      <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'average'</span><span class="token punctuation">,</span>      <span class="token literal-property property">valueDim</span><span class="token operator">:</span> <span class="token string">'close'</span> <span class="token comment">// [open, close, lowest, highest] （即：[开盘值, 收盘值, 最低值, 最高值]）</span>    <span class="token punctuation">}</span>  <span class="token punctuation">]</span><span class="token punctuation">,</span>  <span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{</span>    <span class="token function-variable function">formatter</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">param</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>param<span class="token punctuation">)</span><span class="token punctuation">;</span>      <span class="token keyword">return</span> param<span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">'&lt;br&gt;'</span> <span class="token operator">+</span> <span class="token punctuation">(</span>param<span class="token punctuation">.</span>data<span class="token punctuation">.</span>coord <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token punctuation">}</span>  <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669017732905-db32d4c8-3d06-4bab-a817-eac388e19a0c.png#averageHue=%239a7226&amp;clientId=u3083a5d4-86bf-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=662&amp;id=u3bbe8c88&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=662&amp;originWidth=1165&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=44004&amp;status=done&amp;style=none&amp;taskId=u5a937392-de71-4ffc-9263-0cb73cb1e47&amp;title=&amp;width=1165" alt="image.png"></p><h4 id="两点之间的连线-markLine"><a href="#两点之间的连线-markLine" class="headerlink" title="两点之间的连线 markLine"></a>两点之间的连线 markLine</h4><h5 id="标记的样式-symbol"><a href="#标记的样式-symbol" class="headerlink" title="标记的样式 symbol"></a>标记的样式 symbol</h5><h5 id="数据-data"><a href="#数据-data" class="headerlink" title="数据 data"></a>数据 data</h5><p>1、当为数组的时候，代表数据中任意两个点之间的距离。<br>2、当为对象的时候，一般设置平均线，最大值线，最小值线，才会设置。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">markLine</span><span class="token operator">:</span> <span class="token punctuation">{</span>  <span class="token literal-property property">symbol</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'none'</span><span class="token punctuation">,</span> <span class="token string">'none'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 起点标记的图形。</span>    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span>    <span class="token punctuation">[</span>      <span class="token punctuation">{</span>        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'from lowest to highest'</span><span class="token punctuation">,</span>        <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'min'</span><span class="token punctuation">,</span>        <span class="token literal-property property">valueDim</span><span class="token operator">:</span> <span class="token string">'lowest'</span><span class="token punctuation">,</span> <span class="token comment">// 标注点的值</span>        <span class="token literal-property property">symbol</span><span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">,</span> <span class="token comment">// 标注点样式</span>        <span class="token literal-property property">symbolSize</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token comment">// 标注点的大小</span>        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">//显示最小值具体的值</span>          <span class="token comment">// show: true</span>          <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">false</span>        <span class="token punctuation">}</span><span class="token punctuation">,</span>        <span class="token literal-property property">emphasis</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 高亮状态的扇区和标签样式。</span>          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span>            <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span>          <span class="token punctuation">}</span>        <span class="token punctuation">}</span>      <span class="token punctuation">}</span><span class="token punctuation">,</span>      <span class="token punctuation">{</span>        <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'max'</span><span class="token punctuation">,</span>        <span class="token literal-property property">valueDim</span><span class="token operator">:</span> <span class="token string">'highest'</span><span class="token punctuation">,</span>        <span class="token literal-property property">symbol</span><span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">,</span>        <span class="token literal-property property">symbolSize</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span>          <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">false</span>          <span class="token comment">// show: true</span>        <span class="token punctuation">}</span><span class="token punctuation">,</span>        <span class="token literal-property property">emphasis</span><span class="token operator">:</span> <span class="token punctuation">{</span>          <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span>            <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span>          <span class="token punctuation">}</span>        <span class="token punctuation">}</span>      <span class="token punctuation">}</span>    <span class="token punctuation">]</span><span class="token punctuation">,</span>    <span class="token punctuation">{</span>      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'min line on close'</span><span class="token punctuation">,</span>      <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'min'</span><span class="token punctuation">,</span>      <span class="token literal-property property">valueDim</span><span class="token operator">:</span> <span class="token string">'close'</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span>    <span class="token punctuation">{</span>      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'max line on close'</span><span class="token punctuation">,</span>      <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'max'</span><span class="token punctuation">,</span>      <span class="token literal-property property">valueDim</span><span class="token operator">:</span> <span class="token string">'close'</span>    <span class="token punctuation">}</span>  <span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="盒须图"><a href="#盒须图" class="headerlink" title="盒须图"></a>盒须图</h2><p>盒须图，箱线图、箱形图。<br>主要作用有两个：<br>1、显示数据分布特征；<br>2、识别数据异常值。<br>最大特点是，不受异常值影响，能准确、稳定地描述数据的离散分布情况，同时也利于对数据进行清洗（异常值识别）。<br>一个典型的盒须图，需包含以下几部分内容：<br><img src="https://cdn.nlark.com/yuque/0/2022/webp/27889186/1669021128642-4cb1a324-b530-4dde-ad37-52252db238a3.webp#averageHue=%23f5f5f5&amp;clientId=u3083a5d4-86bf-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;id=uc0912b5d&amp;margin=%5Bobject%20Object%5D&amp;originHeight=360&amp;originWidth=600&amp;originalType=url&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;status=done&amp;style=none&amp;taskId=u7f557a22-c189-4e1c-8a67-a84556838a8&amp;title="><br>要理解盒须图，必须理解什么是四分位数。比较标准的解释是：<br>一组数据按照从小到大顺序排列后，把该组数据四等分的数，称为四分位数。第一四分位数 (Q1)、第二四分位数 (Q2，也叫“中位数”)和第三四分位数 (Q3)分别等于该样本中所有数值由小到大排列后第25%、第50%和第75%的数字。第三四分位数与第一四分位数的差距又称四分位距（interquartile range, IQR）。<br>举个例子，以学生成绩为例，上四分位数表示成绩排名前1/4的学生，中位数表示排名中间的学生，下四分位数表示成绩排名后1/4的学生。我构造了三个班级的学生成绩，用于分析不同班级学生的成绩分布，过程如下：<br><img src="https://cdn.nlark.com/yuque/0/2022/webp/27889186/1669021165484-b796933d-de0b-42f7-b6df-baa3cebe3d6c.webp#averageHue=%23e3e2dd&amp;clientId=u3083a5d4-86bf-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;id=u6f67468a&amp;margin=%5Bobject%20Object%5D&amp;originHeight=546&amp;originWidth=1078&amp;originalType=url&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;status=done&amp;style=none&amp;taskId=u8a550f8b-821f-4ff1-b950-7560ada0bee&amp;title="></p><p>最终结果：<br><img src="https://cdn.nlark.com/yuque/0/2022/webp/27889186/1669021182177-035cb24b-fc8b-408a-990a-97f89392f561.webp#averageHue=%23fdfdfd&amp;clientId=u3083a5d4-86bf-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;id=u8c9bf6bc&amp;margin=%5Bobject%20Object%5D&amp;originHeight=370&amp;originWidth=709&amp;originalType=url&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;status=done&amp;style=none&amp;taskId=u3fb20764-7541-4f62-9979-987ff362200&amp;title="><br>从盒须图明显可以看出：1、一班成绩整体好于二班、三班，75%的学生成绩高于80分，最高成绩满分，但出现了异常值，成绩没过60分，不符合一班的实际情况；<br>2、二班成绩整体最差，75%的学生成绩低于80分；<br>3、三班成绩良莠不齐，跨度最大，有将近50%的学生可以跟一班看齐，也有50%的成绩较差。</p><h3 id="实现简答的盒须图"><a href="#实现简答的盒须图" class="headerlink" title="实现简答的盒须图"></a>实现简答的盒须图</h3><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">option <span class="token operator">=</span> <span class="token punctuation">{</span>  <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token punctuation">[</span>    <span class="token punctuation">{</span>      <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'盒须图'</span><span class="token punctuation">,</span>      <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token string">'center'</span>    <span class="token punctuation">}</span>  <span class="token punctuation">]</span><span class="token punctuation">,</span>  <span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span>    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"category"</span>  <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span>    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"value"</span>  <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">[</span>    <span class="token punctuation">{</span>      <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token punctuation">[</span>        <span class="token punctuation">[</span><span class="token number">850</span><span class="token punctuation">,</span> <span class="token number">740</span><span class="token punctuation">,</span> <span class="token number">900</span><span class="token punctuation">,</span> <span class="token number">1070</span><span class="token punctuation">,</span> <span class="token number">930</span><span class="token punctuation">,</span> <span class="token number">850</span><span class="token punctuation">,</span> <span class="token number">950</span><span class="token punctuation">,</span> <span class="token number">980</span><span class="token punctuation">,</span> <span class="token number">980</span><span class="token punctuation">,</span> <span class="token number">880</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">,</span> <span class="token number">980</span><span class="token punctuation">,</span> <span class="token number">930</span><span class="token punctuation">,</span> <span class="token number">650</span><span class="token punctuation">,</span> <span class="token number">760</span><span class="token punctuation">,</span> <span class="token number">810</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">,</span> <span class="token number">960</span><span class="token punctuation">,</span> <span class="token number">960</span><span class="token punctuation">]</span><span class="token punctuation">,</span>        <span class="token punctuation">[</span><span class="token number">960</span><span class="token punctuation">,</span> <span class="token number">940</span><span class="token punctuation">,</span> <span class="token number">960</span><span class="token punctuation">,</span> <span class="token number">940</span><span class="token punctuation">,</span> <span class="token number">880</span><span class="token punctuation">,</span> <span class="token number">800</span><span class="token punctuation">,</span> <span class="token number">850</span><span class="token punctuation">,</span> <span class="token number">880</span><span class="token punctuation">,</span> <span class="token number">900</span><span class="token punctuation">,</span> <span class="token number">840</span><span class="token punctuation">,</span> <span class="token number">830</span><span class="token punctuation">,</span> <span class="token number">790</span><span class="token punctuation">,</span> <span class="token number">810</span><span class="token punctuation">,</span> <span class="token number">880</span><span class="token punctuation">,</span> <span class="token number">880</span><span class="token punctuation">,</span> <span class="token number">830</span><span class="token punctuation">,</span> <span class="token number">800</span><span class="token punctuation">,</span> <span class="token number">790</span><span class="token punctuation">,</span> <span class="token number">760</span><span class="token punctuation">,</span> <span class="token number">800</span><span class="token punctuation">]</span><span class="token punctuation">,</span>        <span class="token punctuation">[</span><span class="token number">880</span><span class="token punctuation">,</span> <span class="token number">880</span><span class="token punctuation">,</span> <span class="token number">880</span><span class="token punctuation">,</span> <span class="token number">860</span><span class="token punctuation">,</span> <span class="token number">720</span><span class="token punctuation">,</span> <span class="token number">720</span><span class="token punctuation">,</span> <span class="token number">620</span><span class="token punctuation">,</span> <span class="token number">860</span><span class="token punctuation">,</span> <span class="token number">970</span><span class="token punctuation">,</span> <span class="token number">950</span><span class="token punctuation">,</span> <span class="token number">880</span><span class="token punctuation">,</span> <span class="token number">910</span><span class="token punctuation">,</span> <span class="token number">850</span><span class="token punctuation">,</span> <span class="token number">870</span><span class="token punctuation">,</span> <span class="token number">840</span><span class="token punctuation">,</span> <span class="token number">840</span><span class="token punctuation">,</span> <span class="token number">850</span><span class="token punctuation">,</span> <span class="token number">840</span><span class="token punctuation">,</span> <span class="token number">840</span><span class="token punctuation">,</span> <span class="token number">840</span><span class="token punctuation">]</span><span class="token punctuation">,</span>        <span class="token punctuation">[</span><span class="token number">890</span><span class="token punctuation">,</span> <span class="token number">810</span><span class="token punctuation">,</span> <span class="token number">810</span><span class="token punctuation">,</span> <span class="token number">820</span><span class="token punctuation">,</span> <span class="token number">800</span><span class="token punctuation">,</span> <span class="token number">770</span><span class="token punctuation">,</span> <span class="token number">760</span><span class="token punctuation">,</span> <span class="token number">740</span><span class="token punctuation">,</span> <span class="token number">750</span><span class="token punctuation">,</span> <span class="token number">760</span><span class="token punctuation">,</span> <span class="token number">910</span><span class="token punctuation">,</span> <span class="token number">920</span><span class="token punctuation">,</span> <span class="token number">890</span><span class="token punctuation">,</span> <span class="token number">860</span><span class="token punctuation">,</span> <span class="token number">880</span><span class="token punctuation">,</span> <span class="token number">720</span><span class="token punctuation">,</span> <span class="token number">840</span><span class="token punctuation">,</span> <span class="token number">850</span><span class="token punctuation">,</span> <span class="token number">850</span><span class="token punctuation">,</span> <span class="token number">780</span><span class="token punctuation">]</span><span class="token punctuation">,</span>        <span class="token punctuation">[</span><span class="token number">890</span><span class="token punctuation">,</span> <span class="token number">840</span><span class="token punctuation">,</span> <span class="token number">780</span><span class="token punctuation">,</span> <span class="token number">810</span><span class="token punctuation">,</span> <span class="token number">760</span><span class="token punctuation">,</span> <span class="token number">810</span><span class="token punctuation">,</span> <span class="token number">790</span><span class="token punctuation">,</span> <span class="token number">810</span><span class="token punctuation">,</span> <span class="token number">820</span><span class="token punctuation">,</span> <span class="token number">850</span><span class="token punctuation">,</span> <span class="token number">870</span><span class="token punctuation">,</span> <span class="token number">870</span><span class="token punctuation">,</span> <span class="token number">810</span><span class="token punctuation">,</span> <span class="token number">740</span><span class="token punctuation">,</span> <span class="token number">810</span><span class="token punctuation">,</span> <span class="token number">940</span><span class="token punctuation">,</span> <span class="token number">950</span><span class="token punctuation">,</span> <span class="token number">800</span><span class="token punctuation">,</span> <span class="token number">810</span><span class="token punctuation">,</span> <span class="token number">870</span><span class="token punctuation">]</span>      <span class="token punctuation">]</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span>    <span class="token punctuation">{</span>      <span class="token literal-property property">transform</span><span class="token operator">:</span> <span class="token punctuation">{</span>        <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'boxplot'</span><span class="token punctuation">,</span>        <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">itemNameFormatter</span><span class="token operator">:</span> <span class="token string">'expr {value}'</span> <span class="token punctuation">}</span>      <span class="token punctuation">}</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token punctuation">]</span><span class="token punctuation">,</span>  <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span>    <span class="token punctuation">{</span>      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'boxplot'</span><span class="token punctuation">,</span>      <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'boxplot'</span><span class="token punctuation">,</span>      <span class="token literal-property property">datasetIndex</span><span class="token operator">:</span> <span class="token number">1</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span>    <span class="token punctuation">{</span>      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'outlier'</span><span class="token punctuation">,</span>      <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span>      <span class="token literal-property property">datasetIndex</span><span class="token operator">:</span> <span class="token number">2</span>    <span class="token punctuation">}</span>  <span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://cdn.nlark.com/yuque/0/2022/png/27889186/1669022346873-9c7fc5e7-bfea-4af7-bb67-5c269f71f89c.png#averageHue=%23fefefe&amp;clientId=u3083a5d4-86bf-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=611&amp;id=ufaf1604d&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=611&amp;originWidth=1105&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=12041&amp;status=done&amp;style=none&amp;taskId=ua4c1efd7-0d06-4eff-98cd-4476636ee89&amp;title=&amp;width=1105" alt="image.png"></p><h3 id="标题-title"><a href="#标题-title" class="headerlink" title="标题 title"></a>标题 title</h3><h4 id="标题文字-text"><a href="#标题文字-text" class="headerlink" title="标题文字 text"></a>标题文字 text</h4><h4 id="距离左侧位置-left"><a href="#距离左侧位置-left" class="headerlink" title="距离左侧位置 left"></a>距离左侧位置 left</h4><h4 id="距离顶部的位置-top"><a href="#距离顶部的位置-top" class="headerlink" title="距离顶部的位置 top"></a>距离顶部的位置 top</h4><h4 id="边框颜色-borderColor"><a href="#边框颜色-borderColor" class="headerlink" title="边框颜色 borderColor"></a>边框颜色 borderColor</h4><h4 id="边框宽度-borderWidth"><a href="#边框宽度-borderWidth" class="headerlink" title="边框宽度 borderWidth"></a>边框宽度 borderWidth</h4><h4 id="边框样式-textStyle"><a href="#边框样式-textStyle" class="headerlink" title="边框样式 textStyle"></a>边框样式 textStyle</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token punctuation">[</span>  <span class="token punctuation">{</span>    <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Michelson-Morley Experiment'</span><span class="token punctuation">,</span>    <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token string">'center'</span>  <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token punctuation">{</span>    <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'upper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR'</span><span class="token punctuation">,</span>    <span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token string">'#999'</span><span class="token punctuation">,</span> <span class="token comment">// </span>    <span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>    <span class="token literal-property property">textStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>      <span class="token literal-property property">fontWeight</span><span class="token operator">:</span> <span class="token string">'normal'</span><span class="token punctuation">,</span>      <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">14</span><span class="token punctuation">,</span>      <span class="token literal-property property">lineHeight</span><span class="token operator">:</span> <span class="token number">20</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span>    <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token string">'10%'</span><span class="token punctuation">,</span>    <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token string">'90%'</span>  <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="数据集-dataset"><a href="#数据集-dataset" class="headerlink" title="数据集 dataset"></a>数据集 dataset</h3><p>数据集（dataset）是专门用来管理数据的组件。从 ECharts4 支持数据集开始，更推荐使用数据集来管理数据。这样的话，数据可以被多个组件复用，方便进行数据和其他配置分离的配置风格。</p><h4 id="数据转换-transform"><a href="#数据转换-transform" class="headerlink" title="数据转换 transform"></a>数据转换 transform</h4><h4 id="提示框-tooltip-1"><a href="#提示框-tooltip-1" class="headerlink" title="提示框 tooltip"></a>提示框 tooltip</h4><h4 id="触发类型-trigger-1"><a href="#触发类型-trigger-1" class="headerlink" title="触发类型 trigger"></a>触发类型 trigger</h4><p>在什么样的图形中触发</p><h4 id="axisPointer-1"><a href="#axisPointer-1" class="headerlink" title="axisPointer"></a>axisPointer</h4><p>坐标轴指示器配置项。也就是你鼠标进入图形的的时候，鼠标头出现的样式。</p><h5 id="type-1"><a href="#type-1" class="headerlink" title="type"></a>type</h5><p>指示器类型。</p><ul><li>‘line’ 直线指示器</li><li>‘shadow’ 阴影指示器</li><li>‘none’ 无指示器</li><li>‘cross’ 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。</li></ul><h4 id="网格-grid"><a href="#网格-grid" class="headerlink" title="网格 grid"></a>网格 grid</h4><h4 id="X轴-xAxis"><a href="#X轴-xAxis" class="headerlink" title="X轴 xAxis"></a>X轴 xAxis</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span>  <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"盒须图"</span><span class="token punctuation">,</span>    <span class="token literal-property property">boundaryGap</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>    <span class="token comment">// boundaryGap: false,</span>    <span class="token literal-property property">nameGap</span><span class="token operator">:</span> <span class="token number">30000</span><span class="token punctuation">,</span>    <span class="token literal-property property">splitArea</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 竖着的分隔线</span>    <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">false</span>  <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token literal-property property">splitLine</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 横着的分隔线</span>    <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">false</span>  <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="Y轴-yAxis"><a href="#Y轴-yAxis" class="headerlink" title="Y轴 yAxis"></a>Y轴 yAxis</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span>  <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'km/s minus 299,000'</span><span class="token punctuation">,</span>    <span class="token literal-property property">splitArea</span><span class="token operator">:</span> <span class="token punctuation">{</span>    <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span>  <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="系列列表-series"><a href="#系列列表-series" class="headerlink" title="系列列表 series"></a>系列列表 series</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span>  <span class="token punctuation">{</span>    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'boxplot'</span><span class="token punctuation">,</span>    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'boxplot'</span><span class="token punctuation">,</span>    <span class="token literal-property property">datasetIndex</span><span class="token operator">:</span> <span class="token number">1</span>  <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token punctuation">{</span>    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'outlier'</span><span class="token punctuation">,</span>    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span>    <span class="token literal-property property">datasetIndex</span><span class="token operator">:</span> <span class="token number">2</span>  <span class="token punctuation">}</span><span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="备注"><a href="#备注" class="headerlink" title="备注"></a>备注</h2><p>1、文章的最后还有一些没有整理，后续会继续整理，同时这个仅作为个人笔记，后面有新内容会继续填充进来。<br>2、后面的话，可能会找综合项目来做做，等找到了我会一并挂上链接上来。</p>]]></content>
      
      
      
    </entry>
    
    
    
    <entry>
      <title></title>
      <link href="/2023/11/05/css/"/>
      <url>/2023/11/05/css/</url>
      
        <content type="html"><![CDATA[<h1 id="前端实现网页变灰"><a href="#前端实现网页变灰" class="headerlink" title="前端实现网页变灰"></a>前端实现网页变灰</h1><p>今天介绍filter属性</p><h2 id="filter"><a href="#filter" class="headerlink" title="filter"></a>filter</h2><h3 id="grayscale"><a href="#grayscale" class="headerlink" title="grayscale"></a>grayscale</h3><p>该属性是一个函数，有个参数。参数的取值是从0到100%。当值为 100% 时，完全转为灰度图像；当值为 0% 时图像无变化。值在 0% 到 100% 之间，则是效果的线性乘数。若未设置值，默认是 0。</p><h3 id="blur"><a href="#blur" class="headerlink" title="blur"></a>blur</h3><p>用于设置元素的模糊效果，函数将高斯模糊应用于输入图像。若没有设置值，默认为 <code>0</code>。该参数可以指定为 CSS 长度，但不接受百分比值。</p><h3 id="brightness"><a href="#brightness" class="headerlink" title="brightness"></a>brightness</h3><p>用来改变图像的亮度，让其看起来更加暗或者是更加亮。值为 <code>0%</code> 将创建全黑图像。值为 <code>100%</code> 会使输入保持不变。其他值是效果的线性乘数。如果值大于 <code>100%</code> 提供更明亮的结果。若没有设置值，默认为 <code>1</code>。</p><h3 id="contrast"><a href="#contrast" class="headerlink" title="contrast"></a>contrast</h3><p>改变图像的对比度，就是调整图像最暗和最亮部分之间的亮度差异。值是 <code>0%</code> 的话，图像会全黑。值是 <code>100%</code>，图像不变。值可以超过 <code>100%</code>，意味着会运用更低的对比。若没有设置值，默认是 <code>1</code>。</p><h3 id="opacity"><a href="#opacity" class="headerlink" title="opacity"></a>opacity</h3><p>改变图像的透明度。值为 <code>0%</code> 则是完全透明，值为 <code>100%</code> 则图像无变化。值在 <code>0%</code> 和 <code>100%</code> 之间，则是效果的线性乘数。该函数与已有的 <code>opacity</code> 属性很相似，不同之处在于通过 <code>filter</code>，一些浏览器为了提升性能会提供GPU硬件加速。</p><h3 id="sepia"><a href="#sepia" class="headerlink" title="sepia"></a>sepia</h3><p>将图像转换成深褐色。值为 <code>100%</code> 则完全是深褐色的，值为 <code>0%</code> 图像无变化。值在 <code>0%</code> 到 <code>100%</code> 之间，值是效果的线性乘数。若未设置值，则默认为 <code>0</code>。</p><h3 id="drop-shadow"><a href="#drop-shadow" class="headerlink" title="drop-shadow"></a>drop-shadow</h3><p>用于给图像添加阴影，能够让图像看起来更加立体。</p><h3 id="saturate"><a href="#saturate" class="headerlink" title="saturate"></a>saturate</h3><p>改变元素的颜色饱和度。值为 <code>0%</code> 则是完全不饱和，值为 <code>100%</code> 则图像无变化。</p><h3 id="initial"><a href="#initial" class="headerlink" title="initial"></a>initial</h3><p>filter 的默认值，会被解析为none</p><h3 id="inherit"><a href="#inherit" class="headerlink" title="inherit"></a>inherit</h3><p>继承父级计算的filter属性的值</p><h2 id="backdrop-filter"><a href="#backdrop-filter" class="headerlink" title="backdrop-filter"></a>backdrop-filter</h2><p>作用于元素背后的所有元素</p>]]></content>
      
      
      
    </entry>
    
    
    
    <entry>
      <title></title>
      <link href="/2023/05/15/git/"/>
      <url>/2023/05/15/git/</url>
      
        <content type="html"><![CDATA[<h3 id="git-常用命令速查表"><a href="#git-常用命令速查表" class="headerlink" title="git 常用命令速查表"></a>git 常用命令速查表</h3><p><img src="/2023/05/15/git/1.webp" alt="git.jpg"></p><h3 id="以一个正常的-git-使用（拉代码、提交、推代码）为引导线说起"><a href="#以一个正常的-git-使用（拉代码、提交、推代码）为引导线说起" class="headerlink" title="以一个正常的 git 使用（拉代码、提交、推代码）为引导线说起"></a><strong>以一个正常的 git 使用（拉代码、提交、推代码）为引导线说起</strong></h3><h3 id="配置别名"><a href="#配置别名" class="headerlink" title="配置别名"></a>配置别名</h3><p>别名配置就是一条命令<code>git config --global alias.a b</code>，这里 <code>--global</code> 表示修改对全局生效，如果不加，只对当前仓库起作用，<code>a</code>和<code>b</code>指对应的别名和 git 命令</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># 配置别名 将commit简写为ci 提交git commit可简写为git ci</span><span class="token function">git</span> config <span class="token parameter variable">--global</span> alias.ci commit<span class="token function">git</span> config <span class="token parameter variable">--global</span> alias.br branch<span class="token comment"># 很强大的历史记录 建议试试</span><span class="token function">git</span> config <span class="token parameter variable">--global</span> alias.lg <span class="token string">"log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)&lt;%an&gt;%Creset' --abbrev-commit"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>这些配置都会写入全局 Git 配置文件（存储在用户主目录下的一个隐藏文件.gitconfig）中，我们也可以直接修改这个文件，更加直接。</p><p>控制台直接一条命令<code>git config --global --edit</code>显示全局配置，如果我们换电脑了，直接把对应的部分复制过去就好了</p><p><strong>如果用 Mac 的话，也可以使用 on-my-zsh</strong></p><blockquote><p>安装 oh-my-zsh 后默认会打开 git 插件，它会在命令行下光标前显示当前分支名称，还可以实现自动补全，输入 git re 按 tab 会自提示可以选择命令，再按 tab 就可以选择命令，方便命令输入。</p></blockquote><h3 id="拉取代码"><a href="#拉取代码" class="headerlink" title="拉取代码"></a>拉取代码</h3><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">git</span> clone https://xxx.com/fe/xxx.git<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>安装依赖，运行项目。</p><h3 id="修改Bug"><a href="#修改Bug" class="headerlink" title="修改Bug"></a>修改Bug</h3><p>使用的<code>feat-table</code>这个分支</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># 新建分支</span><span class="token comment"># git checkout -b feat-table</span><span class="token function">git</span> checkout <span class="token parameter variable">-b</span> feat-table<span class="token comment"># 拉取代码</span><span class="token function">git</span> pull origin feat-table<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>可以合并使用一个命令</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># 创建分支并从远程分支拉取代码</span><span class="token comment"># git checkout -b feat-table origin/table</span><span class="token function">git</span> checkout <span class="token parameter variable">-b</span> feat-table origin/table<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h3 id="任务暂停"><a href="#任务暂停" class="headerlink" title="任务暂停"></a>任务暂停</h3><p>假如线上出现一个紧急bug，必须要求立刻改，但是手上的bug还没有改完</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># 先把代码储存在本地缓存</span><span class="token comment"># git stash save "未改完的bug，等下再改"</span><span class="token function">git</span> stash save <span class="token string">"未改完的bug，等下再改"</span><span class="token comment"># 切换master 重新拉一个新分支</span><span class="token function">git</span> checkout master<span class="token comment"># git checkout -b fix-xxx</span><span class="token function">git</span> checkout <span class="token parameter variable">-b</span> fix-xxx<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="stash-更多操作"><a href="#stash-更多操作" class="headerlink" title="stash 更多操作"></a>stash 更多操作</h3><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">git</span> stash <span class="token comment"># 暂存当前正在进行的工作，比如想 pull 最新代码，又不想加新 commit，或者为了 fix 一个紧急的 bug，先 stash，使返回到自己上一个 commit，改完 bug 之后再 stash pop, 继续原来的工作</span><span class="token function">git</span> stash save <span class="token string">"message"</span> <span class="token comment"># 暂存时加备注 方便查找</span><span class="token function">git</span> stash show <span class="token comment"># 默认显示第一个改动 如果显示其他 git stash show "stash@{1}"</span><span class="token function">git</span> stash show <span class="token parameter variable">-p</span> <span class="token comment"># 改动的具体内容</span><span class="token function">git</span> stash apply <span class="token comment"># 恢复第一个存储 恢复其他使用 git stash apply "stash@{1}"</span><span class="token function">git</span> stash drop <span class="token string">"stash@{2}"</span> <span class="token comment"># 删除stash@{2}存储</span><span class="token function">git</span> pop <span class="token comment"># stash apply 和 stash drop 结合体</span><span class="token function">git</span> stash <span class="token function">clear</span> <span class="token comment"># 清空stash</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>当你改完这个 bug 之后，提交代码：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># 提交当前所有修改文件</span><span class="token comment"># git commit -am "fix: 修复线上紧急buh"</span><span class="token function">git</span> commit <span class="token parameter variable">-am</span> <span class="token string">"fix: 修复线上紧急buh"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h3 id="修改提交的信息-amend"><a href="#修改提交的信息-amend" class="headerlink" title="修改提交的信息-amend"></a>修改提交的信息-amend</h3><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># 将上次提交的提交信息改为 -m 后的信息</span><span class="token comment"># git commit --amend -m "fix: 修复线上紧急bug" </span><span class="token function">git</span> commit <span class="token parameter variable">--amend</span> <span class="token parameter variable">-m</span> <span class="token string">"fix: 修复线上紧急bug"</span><span class="token comment"># 推代码</span><span class="token function">git</span> push<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>如果你提交后发现少改了一个文件,可以补救一下</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># 将未提交的代码 添加到暂存区</span><span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span><span class="token comment"># git ci --amend --no-edit</span><span class="token function">git</span> amend <span class="token parameter variable">-f</span><span class="token function">git</span> push<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="amend-更多操作"><a href="#amend-更多操作" class="headerlink" title="amend 更多操作"></a>amend 更多操作</h3><p>只修正文件，不修正提交信息，如提交的时候发现有文件忘记提交，先添加到暂存区，再使用下面的命令进行修正，之后就可以看到提交中已经有了忘记提交的文件</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment">#   git commit --amend --no-edit</span><span class="token function">git</span> commit <span class="token parameter variable">--amend</span> --no-edit<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><p>如果多提交了文件，也可以先通过<code>git rm --cached &lt;文件名&gt;</code>，再通过以上命令修正。</p><p>只修正提交信息，如提交时发现写的提交信息不太正确时</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># git commit --amend -m "feat: xxx"</span><span class="token function">git</span> commit <span class="token parameter variable">--amend</span> <span class="token parameter variable">-m</span> <span class="token string">"feat: xxx"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><p>修改提交信息和文件</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># git commit --amend</span><span class="token function">git</span> commit <span class="token parameter variable">--amend</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><h3 id="版本回退"><a href="#版本回退" class="headerlink" title="版本回退"></a>版本回退</h3><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># 将 HEAD 指向前一次提交 即回退上一次提交到工作区</span><span class="token function">git</span> reset HEAD~1<span class="token comment"># 然后修改代码 重新添加到工作区提交</span><span class="token comment"># git commit -am "fix: 修复线上紧急bug"</span><span class="token function">git</span> commit <span class="token parameter variable">-am</span> <span class="token string">"fix: 修复线上紧急bug"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>此时，再往远程推送代码时，因为你本地的提交记录和远程提交记录已经不同了，需要使用<code>git push -f</code>操作将远程的提交覆盖掉，直接 push 的话因为与远程提交不一致，没法推到远程，所以使用<code>git push -f</code>强制将本地提交同步到远程分支。</p><h3 id="reset-更多操作"><a href="#reset-更多操作" class="headerlink" title="reset 更多操作"></a>reset 更多操作</h3><p>git reset 通过控制 HEAD 应该指向的位置，来达到重置的目的。</p><h4 id="软重置-soft"><a href="#软重置-soft" class="headerlink" title="软重置 soft"></a>软重置 soft</h4><p>假如已经提交的文件有问题，想撤销提交，但又想保留文件，这时候就可以使用软重置将 HEAD 指向前一次提交，然后可以重新修复并提交； 也可以使用 commitId 退回到某次指定的提交。</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># 撤销上一次提交 HEAD～2/3 撤销前两次/三次提交</span><span class="token function">git</span> reset <span class="token parameter variable">--soft</span> HEAD~1`<span class="token comment"># 退回到某次提交</span><span class="token function">git</span> reset commitId<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="硬重置-hard"><a href="#硬重置-hard" class="headerlink" title="硬重置 hard"></a>硬重置 hard</h4><p>有时候并不想保留特定提交引入的修改，Git 应该直接将整体状态重置到特定提交之前的状态，使用<code>git reset --hard HEAD~1</code>。</p><p>这时候代码已经推到远程分支，需要你提一个 mr 给项目负责人，然后他去合并代码，如果他直接 merge 的话，master 分支会产生一条额外的合并记录<code>Merge branch 'xxx' into 'master'</code>。</p><p>如果不想有这么一条记录，可以使用</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># 将指定提交拣选到master分支</span><span class="token comment"># git cherry-pick commitId</span><span class="token function">git</span> <span class="token function">cp</span> commitId<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><blockquote><p>cherry-pick 可以帮助我们实现代码迁移，但是需要提交功能明确，不要参杂太多的东西。</p></blockquote><h3 id="切换分支"><a href="#切换分支" class="headerlink" title="切换分支"></a>切换分支</h3><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># git checkout feat-table</span><span class="token function">git</span> checkout feat-table<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><p>假设你的分支名称很长：<code>feat-table-wx-230503</code>，你要切回来的话还得复制分支名称，然后再切</p><p>可以使用</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># git checkout -</span><span class="token function">git</span> checkout -<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><h3 id="删除分支"><a href="#删除分支" class="headerlink" title="删除分支"></a>删除分支</h3><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># -d 只有分支合并并推送后才可以删除</span><span class="token comment"># -D 是 --delete --force 的别名，无论任何情况下都可以删除</span><span class="token comment"># git branch -D fix-xxx</span><span class="token function">git</span> br <span class="token parameter variable">-D</span> fix-xxx<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><h3 id="删除远程分支"><a href="#删除远程分支" class="headerlink" title="删除远程分支"></a>删除远程分支</h3><p>如果想要删除远程分支，则可以直接从 gitlab 的分支中删除，或者使用命令</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># 删除刚刚的修改bug分支</span><span class="token function">git</span> push origin <span class="token parameter variable">--delete</span> fix-xxx<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><h3 id="更多分支删除操作"><a href="#更多分支删除操作" class="headerlink" title="更多分支删除操作"></a>更多分支删除操作</h3><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># 删除分支名包含fix的分支</span><span class="token comment"># git branch | grep 'fix' | xargs git branch -d</span><span class="token function">git</span> br <span class="token operator">|</span> <span class="token function">grep</span> <span class="token string">'fix'</span> <span class="token operator">|</span> <span class="token function">xargs</span> <span class="token function">git</span> br <span class="token parameter variable">-d</span><span class="token comment"># 删除除feat-table外所有的分支</span><span class="token comment"># git branch | xargs git branch -d feat-table</span><span class="token function">git</span> br <span class="token operator">|</span> <span class="token function">xargs</span> <span class="token function">git</span> br <span class="token parameter variable">-d</span> feat-table<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="任务继续"><a href="#任务继续" class="headerlink" title="任务继续"></a>任务继续</h3><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">git</span> stash pop<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><h3 id="拉取合并"><a href="#拉取合并" class="headerlink" title="拉取合并"></a>拉取合并</h3><p>用<code>git stash pop</code>把<code>feat-table</code>分支上储藏的代码先弹出来，接着一顿操作，完了推送代码到远程，当你执行 git push 的时候，发现远程仓库有修改，git 会提示你先执行 git pull 拉代码时，只要有冲突提示你修改，然后改完之后，git 会帮你自动合并生成一次提交，类似这样<code>Merge branch "fix-table' of https://git.qmpoa.com/fe/qtable_docs into fix-table</code>，提交很丑，如何规避。</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">git</span> pull <span class="token parameter variable">--rebase</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>这样拉取远程代码时，如果有冲突时，你可以这样做：</p><ul><li>解决完冲突后，<code>git add .</code>将代码添加到暂存区；</li><li>通过 <code>git rebase --continue</code> 继续执行 rebase 操作；</li><li>如果没有冲突后，就可以 push 到远程了。</li></ul><p><img src="/2023/05/15/git/2.webp"></p><h3 id="rebase-更多操作"><a href="#rebase-更多操作" class="headerlink" title="rebase 更多操作"></a>rebase 更多操作</h3><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">git</span> rebase <span class="token parameter variable">--continue</span> <span class="token comment"># 继续rebase操作</span><span class="token function">git</span> rebase <span class="token parameter variable">--skip</span> <span class="token comment"># 跳过此补丁操作</span><span class="token function">git</span> rebase <span class="token parameter variable">--abort</span> <span class="token comment"># 直接退出rebase</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>]]></content>
      
      
      
    </entry>
    
    
    
    <entry>
      <title></title>
      <link href="/2023/04/30/vue3-zhong-jsx-huo-tsx-de-shi-yong-fang-fa/"/>
      <url>/2023/04/30/vue3-zhong-jsx-huo-tsx-de-shi-yong-fang-fa/</url>
      
        <content type="html"><![CDATA[<h1 id="vue3中JSX-TSX的使用方法"><a href="#vue3中JSX-TSX的使用方法" class="headerlink" title="vue3中JSX/TSX的使用方法"></a>vue3中JSX/TSX的使用方法</h1><h2 id="文本插值"><a href="#文本插值" class="headerlink" title="文本插值"></a>文本插值</h2><p>在模版语法中，采用的是双大括号语法<code>{{}}</code>来讲变量进行包裹，在<code>JSX/TSX</code>中，我们采用单括号<code>{}</code>将其包裹</p><pre class="line-numbers language-tsx" data-language="tsx"><code class="language-tsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"vue"</span><span class="token punctuation">;</span><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  <span class="token function">setup</span><span class="token punctuation">(</span>props<span class="token punctuation">,</span> ctx<span class="token punctuation">)</span> <span class="token punctuation">{</span>    <span class="token keyword">const</span> text <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">"Hello World"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">{</span>text<span class="token punctuation">.</span>value<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="条件渲染"><a href="#条件渲染" class="headerlink" title="条件渲染"></a>条件渲染</h2><h3 id="v-if"><a href="#v-if" class="headerlink" title="v-if"></a>v-if</h3><p>在模版语法中，我们使用<code>v-if</code>来进行条件判断，进而显示某个内容，比如：</p><pre class="line-numbers language-vue" data-language="vue"><code class="language-vue">&lt;h1 v-if="awesome"&gt;Vue is awesome!&lt;/h1&gt;<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>但是在<code>tsx/jsx</code>中是没有<code>v-if</code>这么一个指令的，而是使用的<code>JS</code>中的三元表达式。</p><pre class="line-numbers language-tsx" data-language="tsx"><code class="language-tsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"vue"</span><span class="token punctuation">;</span><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>    <span class="token function">setup</span><span class="token punctuation">(</span>props<span class="token punctuation">,</span> ctx<span class="token punctuation">)</span> <span class="token punctuation">{</span>        <span class="token keyword">const</span> isShow <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">{</span>isShow<span class="token punctuation">.</span>value <span class="token operator">?</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Hello World</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span> <span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">No Hello World</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span><span class="token punctuation">)</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="v-show"><a href="#v-show" class="headerlink" title="v-show"></a>v-show</h3><p>在<code>jsx/tsx</code>中，仍然存在v-show的指令，使用的方法有点类似</p><pre class="line-numbers language-tsx" data-language="tsx"><code class="language-tsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"vue"</span><span class="token punctuation">;</span><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>    <span class="token function">setup</span><span class="token punctuation">(</span>props<span class="token punctuation">,</span> ctx<span class="token punctuation">)</span> <span class="token punctuation">{</span>        <span class="token keyword">const</span> isShow <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-show</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>isShow<span class="token punctuation">.</span>value<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Hello World</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-show</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token operator">!</span>isShow<span class="token punctuation">.</span>value<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">No Hello World</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>        <span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="循环渲染-v-for"><a href="#循环渲染-v-for" class="headerlink" title="循环渲染(v-for)"></a>循环渲染(v-for)</h2><p>在模版语法中，我们使用<code>v-for</code>来进行列表渲染。</p><pre class="line-numbers language-tsx" data-language="tsx"><code class="language-tsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{ index, item } in list<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">{</span><span class="token punctuation">{</span> item <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p>但是在<code>jsx/tsx</code>中，我们采用的是使用<code>map</code>方法。</p><pre class="line-numbers language-tsx" data-language="tsx"><code class="language-tsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"vue"</span><span class="token punctuation">;</span><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  <span class="token function">setup</span><span class="token punctuation">(</span>props<span class="token punctuation">,</span> ctx<span class="token punctuation">)</span> <span class="token punctuation">{</span>    <span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"1"</span><span class="token punctuation">,</span> <span class="token string">"2"</span><span class="token punctuation">,</span> <span class="token string">"3"</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">        </span><span class="token punctuation">{</span>list<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>        <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>    <span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>记得返回值，另外也要绑定<code>key</code>值</p><h3 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h3><p>在<code>jsx</code>中，我们将<code>@click</code>替换成<code>onClick</code></p><h3 id="内联事件"><a href="#内联事件" class="headerlink" title="内联事件"></a>内联事件</h3><pre class="line-numbers language-tsx" data-language="tsx"><code class="language-tsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"vue"</span><span class="token punctuation">;</span><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  <span class="token function">setup</span><span class="token punctuation">(</span>props<span class="token punctuation">,</span> ctx<span class="token punctuation">)</span> <span class="token punctuation">{</span>    <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span>        <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>          <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"我被点击了"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token punctuation">}</span><span class="token punctuation">}</span></span>      <span class="token punctuation">&gt;</span></span><span class="token plain-text">        点击      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>    <span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="方法事件"><a href="#方法事件" class="headerlink" title="方法事件"></a>方法事件</h3><pre class="line-numbers language-tsx" data-language="tsx"><code class="language-tsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"vue"</span><span class="token punctuation">;</span><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>    <span class="token function">setup</span><span class="token punctuation">(</span>props<span class="token punctuation">,</span> ctx<span class="token punctuation">)</span> <span class="token punctuation">{</span>        <span class="token keyword">const</span> <span class="token function-variable function">handleClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>            <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"我被点击了"</span><span class="token punctuation">)</span>        <span class="token punctuation">}</span>        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>handleClick<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">                点击            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>        <span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="自定义事件"><a href="#自定义事件" class="headerlink" title="自定义事件"></a>自定义事件</h3><p>在模版语法中，我们自定义事件，跟定义内置事件是一样的，使用<code>@</code>或者<code>v-on</code>来进行绑定。</p><pre class="line-numbers language-tsx" data-language="tsx"><code class="language-tsx"><span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>  <span class="token keyword">return</span> <span class="token punctuation">{</span>    count<span class="token operator">:</span> <span class="token number">0</span>  <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span>button <span class="token decorator"><span class="token at operator">@</span><span class="token function">click</span></span><span class="token operator">=</span><span class="token string">"count++"</span><span class="token operator">&gt;</span>Add <span class="token number">1</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><code>tsx/jsx</code>中，我们仍然使用<code>on</code>开头</p><pre class="line-numbers language-tsx" data-language="tsx"><code class="language-tsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"vue"</span><span class="token punctuation">;</span><span class="token keyword">const</span> App <span class="token operator">=</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>    emits<span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">'handleClick'</span><span class="token punctuation">]</span>    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token punctuation">&gt;</span></span><span class="token plain-text">hello world</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">        );    },});</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="事件修饰符"><a href="#事件修饰符" class="headerlink" title="事件修饰符"></a>事件修饰符</h2><p>事件修饰符可以使用<code>vue </code> 提供的<code>withModifiers</code>进行设置,如<code>.self</code></p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> withModifiers <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"vue"</span><span class="token punctuation">;</span><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"app"</span><span class="token punctuation">,</span>  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> ctx</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>    <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>      <span class="token operator">&lt;</span>div        onClick<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">withModifiers</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>          console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"我被点击"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">"self"</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">}</span>      <span class="token operator">&gt;</span>        点击      <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>    <span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>复制代码<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>但是对于 .passive、.capture 和 .once 事件修饰符，使用<code>withModifiers</code>并不生效,这里可以采用链式驼峰的形式进行设置,不如<code>.once</code></p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"vue"</span><span class="token punctuation">;</span><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"app"</span><span class="token punctuation">,</span>  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> ctx</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>    <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>      <span class="token operator">&lt;</span>div        onClickOnce<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>          console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"我被点击"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token punctuation">}</span><span class="token punctuation">}</span>      <span class="token operator">&gt;</span>        点击      <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>    <span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="双向绑定-v-model"><a href="#双向绑定-v-model" class="headerlink" title="双向绑定(v-model)"></a>双向绑定(v-model)</h2><pre class="line-numbers language-tsx" data-language="tsx"><code class="language-tsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>myInput</span> <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>val<span class="token punctuation">}</span></span> <span class="token attr-name"><span class="token namespace">v-model:</span>myList</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>list<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><h2 id="插槽"><a href="#插槽" class="headerlink" title="插槽"></a>插槽</h2>]]></content>
      
      
      
    </entry>
    
    
    
    <entry>
      <title></title>
      <link href="/2023/04/05/antv-x6/"/>
      <url>/2023/04/05/antv-x6/</url>
      
        <content type="html"><![CDATA[<h1 id="Antv-X6"><a href="#Antv-X6" class="headerlink" title="Antv/X6"></a>Antv/X6</h1><p>这里的背景是以<code>vue3.2+antv/x6 2.8</code> 为背景的学习，官网的文档是使用<code>react</code>书写的案例，需要摸索的地方还是有很多，下面开始</p><h2 id="前提"><a href="#前提" class="headerlink" title="前提"></a>前提</h2><p>假设你已经创建了<code>vue</code> ，如果不清楚怎么创建<code>vue</code>项目，建议前往官网学习<a href="https://cn.vuejs.org/">Vue</a>。使用组合式<code>API</code>开发，为了简便，没有使用路由等东西，就是使用<code>TS + Less</code>，但是 TS 使用的很烂，有问题拜托指出，谢谢。</p><h2 id="快速上手"><a href="#快速上手" class="headerlink" title="快速上手"></a>快速上手</h2><p>接下来我们就开始使用</p><h3 id="安装-X6"><a href="#安装-X6" class="headerlink" title="安装 X6"></a>安装 X6</h3><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># npm</span>$ <span class="token function">npm</span> <span class="token function">install</span> @antv/x6 <span class="token parameter variable">--save</span><span class="token comment"># yarn</span>$ <span class="token function">yarn</span> <span class="token function">add</span> @antv/x6<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="初始化画布"><a href="#初始化画布" class="headerlink" title="初始化画布"></a>初始化画布</h3><h4 id="创建容器"><a href="#创建容器" class="headerlink" title="创建容器"></a>创建容器</h4><p>首先我们要创建我们的画布容器，我们使用了<code>id</code>为<code>container</code>的<code>div</code>来当我们的容器</p><pre class="line-numbers language-vue" data-language="vue"><code class="language-vue">&lt;template&gt;  &lt;div class="graph"&gt;    &lt;!-- 1.创建容器 --&gt;    &lt;div id="container" class="container"&gt;&lt;/div&gt;  &lt;/div&gt;&lt;/template&gt;<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="引入-antv-x6"><a href="#引入-antv-x6" class="headerlink" title="引入 antv/x6"></a>引入 antv/x6</h4><pre class="line-numbers language-vue" data-language="vue"><code class="language-vue">&lt;script setup lang="ts"&gt;// 1.引入vue和antv/x6import { ref, onMounted } from "vue";import { Graph } from "@antv/x6";// 2.定义一个变量来接受这个const graph = ref();// 3. 在 onMounted 生命周期中才能访问到DOM节点，需要注意一下。onMounted(() =&gt; {  // 4.定义画布  graph.value = new Graph({    container: document.getElementById("container") as HTMLElement,    width: 800,    height: 600,    background: {      color: "#F2F7FA", // 设置画布的背景颜色。    },  });});&lt;/script&gt;<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>在上面的代码块中，我们定义了一个画布，以下对一些参数做一些解释。</p><ul><li><code>container</code>，目标容器</li><li><code>width</code>，画布的宽度</li><li><code>height</code>，画布的高度</li><li><code>background</code>，画布的背景,比如这里我们设置了背景的颜色</li></ul><p>到这里我们应该在浏览器中就有一个画布了。</p><p><img src="/2023/04/05/antv-x6/image-20230405223008142.png" alt="image-20230405223008142"></p><h3 id="渲染节点和边"><a href="#渲染节点和边" class="headerlink" title="渲染节点和边"></a>渲染节点和边</h3><p>X6 支持 JSON 格式数据，该对象中 <code>nodes</code> 代表节点数据，<code>edges</code> 代表边数据，可以使用 <code>attrs</code> 属性来定制节点和边的样式（可以类比 CSS）。</p><h4 id="定义节点和边的信息"><a href="#定义节点和边的信息" class="headerlink" title="定义节点和边的信息"></a>定义节点和边的信息</h4><pre class="line-numbers language-vue" data-language="vue"><code class="language-vue">&lt;script setup lang="ts"&gt;// 定义节点和边的信息const data = {  nodes: [    {      id: "node1",      shape: "rect",      x: 40,      y: 40,      width: 100,      height: 40,      label: "hello",      attrs: {        // body 是选择器名称，选中的是 rect 元素        body: {          stroke: "#8f8f8f",          strokeWidth: 1,          fill: "#fff",          rx: 6,          ry: 6,        },      },    },    {      id: "node2",      shape: "rect",      x: 160,      y: 180,      width: 100,      height: 40,      label: "world",      attrs: {        body: {          stroke: "#8f8f8f",          strokeWidth: 1,          fill: "#fff",          rx: 6,          ry: 6,        },      },    },  ],  edges: [    {      shape: "edge",      source: "node1",      target: "node2",      label: "x6",      attrs: {        // line 是选择器名称，选中的边的 path 元素        line: {          stroke: "#8f8f8f",          strokeWidth: 1,        },      },    },  ],};&lt;/script&gt;<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>下面我们来解释一下上面一坨代码的含义，其实大部分内容是重复的。我们从节点（nodes）开始.</p><h5 id="nodes-解释"><a href="#nodes-解释" class="headerlink" title="nodes 解释"></a>nodes 解释</h5><ul><li><code>id</code>，节点的唯一标识，如果不指定节点，那么 x6 会自动给我们生成 ID。</li><li><code>shape</code>，指定节点的图形，x6 给我们提供了很多的<a href="https://x6.antv.antgroup.com/tutorial/basic/node">内置节点</a>，比如我们这里使用的就是矩形。</li><li><code>x</code>，x 轴，在画布中水平向右为 x 轴正方向，垂直 x 轴向下为 y 轴正方向。此处指的就是节点在画布中 x 轴的位置。</li><li><code>y</code>，在画布中 y 轴的位置。</li><li><code>width</code>，节点的宽度</li><li><code>height</code>，节点的高度</li><li><code>label</code>，节点中间的描述性文字</li><li><code>attrs</code>，可以理解为<code>css</code>,是一个对象。比如我们这里<code>body</code>是选择器的名称，选中的是 <code>rect</code> 元素<ul><li><code>stroke</code>，节点的矩形框描边颜色</li><li><code>strokeWidth</code>，节点的矩形框描边宽度</li><li><code>fill</code>，节点的矩形框填充颜色</li><li><code>rx</code>，节点的矩形直角的边框圆角水平半径</li><li><code>ry</code>，节点的矩形直角的边框圆角垂直半径</li></ul></li></ul><h5 id="edges-解释"><a href="#edges-解释" class="headerlink" title="edges 解释"></a>edges 解释</h5><ul><li><p><code>shape</code>，指定边的类型</p></li><li><p><code>source</code>，源节点或者起始节点</p></li><li><p><code>target</code>，目标节点</p></li><li><p><code>label</code>，标签，或者简单说就是边上的文字</p></li><li><p><code>attrs</code>，<code>line </code>是选择器名称，选中的边的 <code>path</code> 元素</p></li></ul><h4 id="渲染"><a href="#渲染" class="headerlink" title="渲染"></a>渲染</h4><p>当我们定义好节点之后，我们就要开始渲染了。因为在<code>Vue3</code>之中，在<code>onMounted</code>之中才能拿到 Dom 节点，所以我们也需要再<code>onMounted</code>之中，才能拿到 Dom 赋值。</p><pre class="line-numbers language-vue" data-language="vue"><code class="language-vue">&lt;script setup lang="ts"&gt;// 1.引入vue和antv/x6import { ref, onMounted } from "vue";import { Graph } from "@antv/x6";// 2.定义一个变量来接受这个const graph = ref();// 3. 在 onMounted 生命周期中才能访问到DOM节点，需要注意一下。onMounted(() =&gt; {  // 4.定义画布  graph.value = new Graph({    container: document.getElementById("container") as HTMLElement,    width: 800,    height: 600,    background: {      color: "#F2F7FA", // 设置画布的背景颜色。    },  });  // 5.加载数据  graph.value.fromJSON(data);});&lt;/script&gt;<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>然后去看浏览器，应该会有如下的画面：</p><p><img src="/2023/04/05/antv-x6/image-20230409141559243.png" alt="image-20230409141559243"></p><p>我们在上面使用的时候，看到<code>graph.value.fromJSON(data);</code>这种用法，总是先<code>.value</code>之后再使用对应的方法，其实这个是因为我们创建变量的时候，使用的是<code>ref</code>创建的变量，使用<code>ref</code>创建的变量，只要不是在模版中使用，都是需要<code>.value</code>的。</p><p>到这里，快速上手就完毕了，就是这么简单。</p><h2 id="画布"><a href="#画布" class="headerlink" title="画布"></a>画布</h2><p>画布布是在 X6 中用于展示和编辑图形的区域，类似于绘图板的概念。通过画布，可以创建、移动、编辑和删除图形，包括节点、连接线、文本等。</p><h3 id="画布自适应"><a href="#画布自适应" class="headerlink" title="画布自适应"></a>画布自适应</h3><p>我们在实例化<code>Graph</code>对象的时候，可以通过设置 <code>width</code> 和 <code>height</code> 固定画布大小，如果不设置，就会以画布容器大小初始化画布。但是我们有可能会遇到页面的 <code>resize</code> 事件，导致画布容器大小改变，导致画布元素显示异常。</p><p><code>resize</code> 事件是 JavaScript 中一个针对浏览器窗口大小改变的事件。当用户调整浏览器窗口大小时，浏览器会触发 <code>resize</code> 事件，允许开发者在窗口大小改变时执行相关的代码。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"resize"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>  <span class="token comment">// 处理窗口大小改变事件</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p>这时候，我们就需要设置<code>autoResize</code>来解决。</p><pre class="line-numbers language-vue" data-language="vue"><code class="language-vue">&lt;script setup lang="ts"&gt;// 1.引入vue和antv/x6import { ref, onMounted } from "vue";import { Graph } from "@antv/x6";// 2.定义一个变量来接受这个const graph = ref();// 3. 在 onMounted 生命周期中才能访问到DOM节点，需要注意一下。onMounted(() =&gt; {  // 4.定义画布  const graph = new Graph({    container: document.getElementById("container"),    autoResize: true,  });  // 5.加载数据  graph.value.fromJSON(data);});&lt;/script&gt;<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>设置好之后，查看效果</p><p><img src="/2023/04/05/antv-x6/image-20230410203658420.png" alt="image-20230410203658420"></p><p>当我们拉动浏览器的宽度的时候，我们发现，画布左右侧始终有一定的空间，画布会自适应变化宽度。</p><h3 id="设置背景和网格"><a href="#设置背景和网格" class="headerlink" title="设置背景和网格"></a>设置背景和网格</h3><p>在<code>antv/x6</code>之中，可以通过 <code>background</code> 和 <code>grid</code> 两个配置来设置画布的背景以及网格。</p><h4 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h4><p>首先我们来看背景，他有多种情况。</p><h5 id="color"><a href="#color" class="headerlink" title="color"></a>color</h5><p>背景颜色，支持所有 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">CSS background-color</a> 属性的取值，如：</p><ul><li><code>'red'</code>，颜色关键字</li><li><code>'#f5f5f5'</code>，十六进制符号</li><li><code>'rgba(255, 255, 128, 0.5)'</code><a href="https://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation">函数符</a>，红绿蓝透明度</li><li><code>'hsla(50, 33%, 25%, 0.75)'</code></li></ul><p>​ <code>HSL</code>圆柱坐标系统是指一种颜色空间表示方式，其中 HSL 代表色相、饱和度和亮度，圆柱坐标则表示这些参数的变化。</p><p>​ 在<code>HSL</code>圆柱坐标系统中，<strong>色相</strong>是指颜色的种类或类别，如红色、黄色等，它沿着一个 360 度的色轮上变化。<strong>饱和度</strong>表示颜色的强度或纯度，取值范围为 0 到 1，0 表示灰度，1 表示完全饱和。<strong>亮度</strong>则表示颜色的亮暗程度，取值范围同样为 0 到 1，0 表示黑色，1 表示白色。最后一个值也是透明度，取值范围 0 到 1。</p><ul><li><code>'radial-gradient(shape size at position, red, green)'</code></li></ul><p>​ <code>radial-gradient</code>是<code>CSS3</code>中用来创建径向渐变效果的函数，使用 radial-gradient 函数可以创建从一个中心点向周围扩散的渐变效果。</p><p>​ <strong>shape</strong>可以是<strong>circle</strong>（圆形）或<strong>ellipse</strong>（椭圆形），<strong>size</strong>可以是<strong>closest-side</strong>（最近的边）、<strong>closest-corner</strong>（最近的角）、<strong>farthest-side</strong>（最远的边）或<strong>farthest-corner</strong>（最远的角），<strong>position</strong>表示渐变的中心点位置（可以是一个像素值或一个百分比），<strong>start-color</strong>表示起始颜色，<strong>last-color</strong>表示终止颜色。</p><p>比如：</p><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">radial-gradient</span><span class="token punctuation">(</span>circle<span class="token punctuation">,</span> #ff9d9d<span class="token punctuation">,</span> #fe2d2d<span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>这将创建一个从中心向外扩散的圆形渐变效果，起始颜色为<code>#ff9d9d</code>，终止颜色为<code>#fe2d2d</code>。</p><h5 id="image"><a href="#image" class="headerlink" title="image"></a>image</h5><p>背景图片的 URL 地址，这里需要值得注意的我们需要先导入,然后再使用</p><pre class="line-numbers language-vue" data-language="vue"><code class="language-vue">&lt;script setup lang="ts"&gt;import bgcImage from "@/antv-x6/bg2.b4f49dec.png";onMounted(() =&gt; {  graph.value = new Graph({    container: document.getElementById("container") as HTMLElement,    width: 800,    height: 600,    background: {      image: bgcImage,    },    autoResize: true,  });  graph.value.fromJSON(data);});&lt;/script&gt;<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h5 id="position"><a href="#position" class="headerlink" title="position"></a>position</h5><p>背景图片位置，支持所有 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-position">CSS background-position</a> 属性的取值，默认为 <code>'center'</code>。</p><h5 id="size"><a href="#size" class="headerlink" title="size"></a>size</h5><p>背景图片大小，支持所有 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-size">CSS background-size</a> 属性的取值，默认为 <code>'auto auto'</code>。</p><h6 id="repeat"><a href="#repeat" class="headerlink" title="repeat"></a>repeat</h6><p>背景图片重复方式，支持所有 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat">CSS background-repeat</a> 属性的取值，默认为 <code>'no-repeat' 不平铺</code>。</p><p>另外，还支持以下几个预定义值：</p><ul><li><p><a href="https://x6.antv.antgroup.com/api/registry/background#watermark"><code>'watermark'</code></a> 水印效果。</p></li><li><p><a href="https://x6.antv.antgroup.com/api/registry/background#flip-x"><code>'flip-x'</code></a> 水平翻转背景图片。</p></li><li><p><a href="https://x6.antv.antgroup.com/api/registry/background#flip-y"><code>'flip-y'</code></a> 垂直翻转背景图片。</p></li><li><p><a href="https://x6.antv.antgroup.com/api/registry/background#flip-xy"><code>'flip-xy'</code></a> 水平和垂直翻转背景图片。</p></li></ul><h3 id="画布拖拽（平移）和缩放"><a href="#画布拖拽（平移）和缩放" class="headerlink" title="画布拖拽（平移）和缩放"></a>画布拖拽（平移）和缩放</h3><p>画布的拖拽和缩放通过 <code>panning</code> 和 <code>mousewheel</code> 配置来实现这两个功能</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> graph <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Graph</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  <span class="token operator">...</span><span class="token punctuation">,</span>  <span class="token literal-property property">panning</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>  <span class="token literal-property property">mousewheel</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="节点"><a href="#节点" class="headerlink" title="节点"></a>节点</h2><p><code>X6</code> 是基于 <code>SVG</code> 的渲染引擎，可以使用不同的 <code>SVG </code>元素渲染节点和边，非常适合节点内容比较简单的场景。如果我们需要复杂的场景，那么我们可以通过<code>vue</code>节点来实现。</p><h3 id="添加节点"><a href="#添加节点" class="headerlink" title="添加节点"></a>添加节点</h3><p>我们在最初的时候在<code>setup</code>中定义了一个<code>graph</code>属性，这个<code>graph</code>我们通过<code>new</code>创建了画布的对象。新增节点可以通过<code>addNode</code>方法，传入一个对象。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">graph<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">addNode</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  <span class="token literal-property property">shape</span><span class="token operator">:</span> <span class="token string">"rect"</span><span class="token punctuation">,</span>  <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">"矩形"</span><span class="token punctuation">,</span>  <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>  <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">40</span><span class="token punctuation">,</span>  <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>  <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">40</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><ul><li><code>shape</code>，节点的图形</li><li><code>x</code>，在画布中 x 轴的的位置</li><li><code>y</code>，在画布中的 y 轴的位置</li><li><code>width</code>，元素的宽度</li><li><code>height</code>，元素的高度</li><li><code>label</code>，矩形中间的文字</li></ul><h3 id="内置节点"><a href="#内置节点" class="headerlink" title="内置节点"></a>内置节点</h3><p>在<code>Antv/X6</code>之中，也内置了很多节点，比如圆形，椭圆，矩形等等。</p><table><thead><tr><th>shape 名称</th><th>描述</th></tr></thead><tbody><tr><td>rect</td><td>矩形</td></tr><tr><td>circle</td><td>圆形</td></tr><tr><td>ellipse</td><td>椭圆</td></tr><tr><td>polygon</td><td>多边形</td></tr><tr><td>polyline</td><td>折线</td></tr><tr><td>path</td><td>路径</td></tr><tr><td>image</td><td>图片</td></tr><tr><td>html</td><td>HTML 节点，使用 <code>foreignObject</code> 渲染 HTML 片段。</td></tr></tbody></table><h4 id="矩形"><a href="#矩形" class="headerlink" title="矩形"></a>矩形</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">graph<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">addNode</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  <span class="token literal-property property">shape</span><span class="token operator">:</span> <span class="token string">"rect"</span><span class="token punctuation">,</span>  <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">"矩形"</span><span class="token punctuation">,</span>  <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>  <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">40</span><span class="token punctuation">,</span>  <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>  <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">40</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="/2023/04/05/antv-x6/image-20230412202630050.png" alt="image-20230412202630050"></p><h4 id="圆形"><a href="#圆形" class="headerlink" title="圆形"></a>圆形</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">graph<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">addNode</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  <span class="token literal-property property">shape</span><span class="token operator">:</span> <span class="token string">"circle"</span><span class="token punctuation">,</span>  <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">"矩形"</span><span class="token punctuation">,</span>  <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>  <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">40</span><span class="token punctuation">,</span>  <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>  <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">40</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="/2023/04/05/antv-x6/image-20230412202717215.png" alt="image-20230412202717215"></p><h3 id="定制节点"><a href="#定制节点" class="headerlink" title="定制节点"></a>定制节点</h3><p>可以通过 <code>markup</code> 和 <code>attrs</code> 来定制节点的形状和样式，<code>markup</code> 可以类比 <code>HTML</code>，<code>attrs</code> 类比 <code>CSS</code>。强烈建议仔细阅读 <a href="https://x6.antv.antgroup.com/zh/docs/api/model/cell#markup">markup</a> 和 <a href="https://x6.antv.antgroup.com/zh/docs/api/model/cell#attrs">attrs</a> 文档。</p><p>但是个人认为这个适合做一些简单的节点，如果复杂的节点，推荐使用<code>vue</code>节点，后面会介绍到。</p><h3 id="修改节点"><a href="#修改节点" class="headerlink" title="修改节点"></a>修改节点</h3><p>在我们创建完成之后，还能够对节点进行一定的修改,我们还可以通过 API 修改节点的所有属性。我们会常用到下面两个方法：</p><ul><li>node.prop(path, value)，详细使用见 <a href="https://x6.antv.antgroup.com/zh/docs/api/model/cell#%E8%8A%82%E7%82%B9%E5%92%8C%E8%BE%B9%E7%9A%84%E5%B1%9E%E6%80%A7-properties">prop</a>。</li><li>node.attr(path, value)，详细使用见 <a href="https://x6.antv.antgroup.com/zh/docs/api/model/cell#%E5%85%83%E7%B4%A0%E5%B1%9E%E6%80%A7-attrs">attr</a>。</li></ul><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> node <span class="token operator">=</span> graph<span class="token punctuation">.</span><span class="token function">addNode</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  <span class="token literal-property property">shape</span><span class="token operator">:</span> <span class="token string">"rect"</span><span class="token punctuation">,</span>  <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>  <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">40</span><span class="token punctuation">,</span>  <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>  <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>  <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">"edge"</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span><span class="token function">prop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>比如：</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">source<span class="token punctuation">.</span><span class="token function">prop</span><span class="token punctuation">(</span><span class="token string">"size"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">120</span><span class="token punctuation">,</span> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">50</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 修改元素的宽高</span>source<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">"rect/fill"</span><span class="token punctuation">,</span> <span class="token string">"#ccc"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 修改填充色，等价于 source.prop('attrs/rect/fill', '#ccc')</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><p>通常情况下，真实场景并不会像上面的示例，还给节点一个单独的名称，在实际过程中，我们一般是配合事件一起来进行使用，比如我们选中某个节点想要设置其边框颜色，他会自动监听画布中的点击事件，然后去进行对应的操作。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">graph<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"cell:click"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> e<span class="token punctuation">,</span> x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> cell<span class="token punctuation">,</span> view <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>  <span class="token comment">// cell 就是我们所需要的节点对象</span>  cell<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">"body/stroke"</span><span class="token punctuation">,</span> <span class="token string">"red"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><p>或者说还有情况就是给画布中的所有对象都设置</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> nodes <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>graph<span class="token punctuation">.</span><span class="token function">getNodes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 获取画布中的所有节点</span>nodes<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">node</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>  <span class="token keyword">const</span> color <span class="token operator">=</span> Color<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  node<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">"body/fill"</span><span class="token punctuation">,</span> color<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="边"><a href="#边" class="headerlink" title="边"></a>边</h2><h3 id="如何添加边"><a href="#如何添加边" class="headerlink" title="如何添加边"></a>如何添加边</h3><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript">graph<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">addEdge</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  shape<span class="token operator">:</span> <span class="token string">"edge"</span><span class="token punctuation">,</span>  source<span class="token operator">:</span> <span class="token string">"node1"</span><span class="token punctuation">,</span>  target<span class="token operator">:</span> <span class="token string">"node2"</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><table><thead><tr><th align="left">属性名</th><th align="left">类型</th><th align="left">默认值</th><th align="left">描述</th></tr></thead><tbody><tr><td align="left">source</td><td align="left">TerminalData</td><td align="left">-</td><td align="left">源节点或起始点。其与节点的 ID 相同</td></tr><tr><td align="left">target</td><td align="left">TerminalData</td><td align="left">-</td><td align="left">目标节点或目标点。其与节点的 ID 相同</td></tr><tr><td align="left">vertices</td><td align="left">Point.PointLike[]</td><td align="left">-</td><td align="left">路径点。</td></tr><tr><td align="left">router</td><td align="left">RouterData</td><td align="left">-</td><td align="left">路由。</td></tr><tr><td align="left">connector</td><td align="left">ConnectorData</td><td align="left">-</td><td align="left">连接器。</td></tr><tr><td align="left">labels</td><td align="left">Label[]</td><td align="left">-</td><td align="left">标签。</td></tr><tr><td align="left">defaultLabel</td><td align="left">Label</td><td align="left"><a href="https://x6.antv.antgroup.com/zh/docs/api/model/labels#%E9%BB%98%E8%AE%A4%E6%A0%87%E7%AD%BE">默认标签</a></td><td align="left">默认标签。</td></tr></tbody></table><p>上面代码就是添加边的方法，<code>source</code>和<code>target</code>的值需要与节点的<code>ID</code>一致就可以将两个节点进行连接，如果你只是看看能不能创建边，其实还有种写法</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">graph<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">addEdge</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  <span class="token literal-property property">shape</span><span class="token operator">:</span> <span class="token string">"edge"</span><span class="token punctuation">,</span>  <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">,</span>  <span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">400</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>数组代表的是<code>x</code>轴和<code>y</code>轴。</p><p><img src="/2023/04/05/antv-x6/image-20230417162450440.png" alt="image-20230417162450440"></p><h4 id="vertices"><a href="#vertices" class="headerlink" title="vertices"></a>vertices</h4><p>路径点。边从起始点开始，按顺序经过路径点，最后到达终止点。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">graph<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">addEdge</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">"rect1"</span><span class="token punctuation">,</span>  <span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token string">"rect2"</span><span class="token punctuation">,</span>  <span class="token literal-property property">vertices</span><span class="token operator">:</span> <span class="token punctuation">[</span>    <span class="token punctuation">{</span> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">200</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>    <span class="token punctuation">{</span> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">120</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="/2023/04/05/antv-x6/image-20230417162610575.png" alt="image-20230417162610575"></p><h4 id="router"><a href="#router" class="headerlink" title="router"></a>router</h4><p>路由 <code>router</code> 将对 <code>vertices</code> 进一步处理，并在必要时添加额外的点，然后返回处理后的点。</p><h5 id="orth"><a href="#orth" class="headerlink" title="orth"></a>orth</h5><p>正交路由，该路由在路径上添加额外的一些点，使边的每一条线段都水平或垂直正交。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">graph<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">addEdge</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  source<span class="token punctuation">,</span>  target<span class="token punctuation">,</span>  <span class="token literal-property property">vertices</span><span class="token operator">:</span> <span class="token punctuation">[</span>    <span class="token punctuation">{</span> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">200</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>    <span class="token punctuation">{</span> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">120</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token punctuation">]</span><span class="token punctuation">,</span>  <span class="token literal-property property">router</span><span class="token operator">:</span> <span class="token punctuation">{</span>    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"orth"</span><span class="token punctuation">,</span>    <span class="token literal-property property">args</span><span class="token operator">:</span> <span class="token punctuation">{</span>      <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token punctuation">{</span>        <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>      <span class="token punctuation">}</span><span class="token punctuation">,</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="/2023/04/05/antv-x6/image-20230417163941802.png" alt="image-20230417163941802"></p><p>那两个圆圈的地方就是我们自己设置的<code>vertices</code>，其他的都是定义<code>orth</code>路由,自动生成的。</p><p>其他的版本可以看<a href="https://x6.antv.antgroup.com/api/registry/router#normal">官网</a></p><h4 id="manhattan"><a href="#manhattan" class="headerlink" title="manhattan"></a>manhattan</h4><p>曼哈顿路由 <code>'manhattan'</code> 路由是正交路由 <code>'orth'</code> 的智能版本，该路由由水平或垂直的正交线段组成，并自动避开路径上的其他节点（障碍）。</p><p>同时需要注意的是，<code>manhattan </code>路由的特性是自动避开路径中的障碍物，如果出现无法避开的情况，就会自动降级到 <code>orth </code>路由，此时为了让开发者能够发现问题，在控制台增加了 <code>warn：Unable to execute manhattan algorithm, use orth instead</code>。</p><p>这个在最新的官网已经注明了。</p><p>如果你看着警告不爽，解决办法就是忽略参与计算的节点，但是这样就相当于没有<code>manhattan</code>就白用了一样。看自己选择吧。</p><h5 id="labels-和-defaultLabel"><a href="#labels-和-defaultLabel" class="headerlink" title="labels 和 defaultLabel"></a>labels 和 defaultLabel</h5><pre class="line-numbers language-tsx" data-language="tsx"><code class="language-tsx">graph<span class="token punctuation">.</span><span class="token function">addEdge</span><span class="token punctuation">(</span><span class="token punctuation">{</span>      source<span class="token punctuation">,</span>      target<span class="token punctuation">,</span>      attrs<span class="token operator">:</span> <span class="token punctuation">{</span>        line<span class="token operator">:</span> <span class="token punctuation">{</span>          stroke<span class="token operator">:</span> <span class="token string">'#8f8f8f'</span><span class="token punctuation">,</span>          strokeWidth<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>        <span class="token punctuation">}</span><span class="token punctuation">,</span>      <span class="token punctuation">}</span><span class="token punctuation">,</span>      labels<span class="token operator">:</span> <span class="token punctuation">[</span>        <span class="token punctuation">{</span>          attrs<span class="token operator">:</span> <span class="token punctuation">{</span>            label<span class="token operator">:</span> <span class="token punctuation">{</span>              text<span class="token operator">:</span> <span class="token string">'40%'</span><span class="token punctuation">,</span> <span class="token comment">// 字体</span>              stroke<span class="token operator">:</span> <span class="token string">'#aaa'</span><span class="token punctuation">,</span> <span class="token comment">// 颜色</span>            <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          position<span class="token operator">:</span> <span class="token number">0.4</span><span class="token punctuation">,</span> <span class="token comment">// 在线上的位置</span>        <span class="token punctuation">}</span><span class="token punctuation">,</span>        <span class="token punctuation">{</span>          attrs<span class="token operator">:</span> <span class="token punctuation">{</span>            label<span class="token operator">:</span> <span class="token punctuation">{</span>              text<span class="token operator">:</span> <span class="token string">'60%'</span><span class="token punctuation">,</span>              stroke<span class="token operator">:</span> <span class="token string">'#aaa'</span><span class="token punctuation">,</span>            <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          position<span class="token operator">:</span> <span class="token number">0.6</span><span class="token punctuation">,</span>        <span class="token punctuation">}</span><span class="token punctuation">,</span>      <span class="token punctuation">]</span><span class="token punctuation">,</span>    <span class="token punctuation">}</span><span class="token punctuation">)</span>  <span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><img src="/2023/04/05/antv-x6/image-20230417164818737.png" alt="image-20230417164818737"></p><h3 id="定制边"><a href="#定制边" class="headerlink" title="定制边"></a>定制边</h3><h4 id="基类派生"><a href="#基类派生" class="headerlink" title="基类派生"></a>基类派生</h4><p>定制箭头有两种方式，一种是使用从基类派生出我们的边，并重写某些样式和方法。详细可以看<a href="https://antv-x6.gitee.io/en/docs/tutorial/intermediate/custom-edge"><code>antv/x6 1.0</code></a> 版本，在 2.0 版本中没有明确说明这种方式。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">import</span> <span class="token punctuation">{</span> Shape <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@antv/x6"</span><span class="token punctuation">;</span><span class="token comment">//1. 派生出自己的边样式</span><span class="token keyword">const</span> MyEdge <span class="token operator">=</span> Shape<span class="token punctuation">.</span><span class="token function">Edge</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  markup<span class="token operator">:</span> <span class="token punctuation">[</span>    <span class="token punctuation">{</span>      tagName<span class="token operator">:</span> <span class="token string">"path"</span><span class="token punctuation">,</span>      selector<span class="token operator">:</span> <span class="token string">"wrap"</span><span class="token punctuation">,</span>      attrs<span class="token operator">:</span> <span class="token punctuation">{</span>        fill<span class="token operator">:</span> <span class="token string">"none"</span><span class="token punctuation">,</span>        cursor<span class="token operator">:</span> <span class="token string">"pointer"</span><span class="token punctuation">,</span>        stroke<span class="token operator">:</span> <span class="token string">"transparent"</span><span class="token punctuation">,</span>        strokeLinecap<span class="token operator">:</span> <span class="token string">"round"</span><span class="token punctuation">,</span>      <span class="token punctuation">}</span><span class="token punctuation">,</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span>    <span class="token punctuation">{</span>      tagName<span class="token operator">:</span> <span class="token string">"path"</span><span class="token punctuation">,</span>      selector<span class="token operator">:</span> <span class="token string">"line"</span><span class="token punctuation">,</span>      attrs<span class="token operator">:</span> <span class="token punctuation">{</span>        fill<span class="token operator">:</span> <span class="token string">"none"</span><span class="token punctuation">,</span>        pointerEvents<span class="token operator">:</span> <span class="token string">"none"</span><span class="token punctuation">,</span>      <span class="token punctuation">}</span><span class="token punctuation">,</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token punctuation">]</span><span class="token punctuation">,</span>  attrs<span class="token operator">:</span> <span class="token punctuation">{</span>    wrap<span class="token operator">:</span> <span class="token punctuation">{</span>      connection<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>      strokeWidth<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>      strokeLinejoin<span class="token operator">:</span> <span class="token string">"round"</span><span class="token punctuation">,</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span>    line<span class="token operator">:</span> <span class="token punctuation">{</span>      connection<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>      stroke<span class="token operator">:</span> <span class="token string">"#333333"</span><span class="token punctuation">,</span>      strokeWidth<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>      strokeLinejoin<span class="token operator">:</span> <span class="token string">"round"</span><span class="token punctuation">,</span>      targetMarker<span class="token operator">:</span> <span class="token punctuation">{</span>        tagName<span class="token operator">:</span> <span class="token string">"path"</span><span class="token punctuation">,</span>        d<span class="token operator">:</span> <span class="token string">"M 10 -5 0 0 10 5 z"</span><span class="token punctuation">,</span>      <span class="token punctuation">}</span><span class="token punctuation">,</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//2. 将边注册,这里用的就是Graph，不是实例后的画布对象 第一个参数是自定义的,只要在创建边的时候对应就行</span>Graph<span class="token punctuation">.</span><span class="token function">registerEdge</span><span class="token punctuation">(</span><span class="token string">"edge1"</span><span class="token punctuation">,</span> MyEdge<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//3. 使用</span>graph<span class="token punctuation">.</span><span class="token function">addEdge</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  shape<span class="token operator">:</span> <span class="token string">"edge1"</span><span class="token punctuation">,</span>  source<span class="token punctuation">,</span>  target<span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="箭头"><a href="#箭头" class="headerlink" title="箭头"></a>箭头</h3><p>对于边两端的箭头，<code>antv/x6</code>提供了内置箭头和自定义箭头两种方式</p><h4 id="内置箭头"><a href="#内置箭头" class="headerlink" title="内置箭头"></a>内置箭头</h4><p><code>antv/x6</code>提供了以下的几种箭头。</p><p>实心箭头（block）、经典箭头（classic）、菱形箭头（diamond）、交叉箭头（cross）、async、path、圆形箭头（circle）、圆形和加号箭头（circlePlus）、椭圆箭头（elipse）</p><h4 id="定制箭头"><a href="#定制箭头" class="headerlink" title="定制箭头"></a>定制箭头</h4><h5 id="工厂方法"><a href="#工厂方法" class="headerlink" title="工厂方法"></a>工厂方法</h5><p>在<code>Graph</code>原型上有个<code>registerMarker</code>方法，可以帮助我们自定义箭头</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token comment">// 1.注册</span>Graph<span class="token punctuation">.</span><span class="token function">registerMarker</span><span class="token punctuation">(</span><span class="token string">"image"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>args<span class="token operator">:</span> ImageMarkerArgs<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>  <span class="token keyword">const</span> <span class="token punctuation">{</span> imageUrl<span class="token punctuation">,</span> imageWidth<span class="token punctuation">,</span> imageHeight<span class="token punctuation">,</span> <span class="token operator">...</span>attrs <span class="token punctuation">}</span> <span class="token operator">=</span> args<span class="token punctuation">;</span>  <span class="token keyword">return</span> <span class="token punctuation">{</span>    <span class="token operator">...</span>attrs<span class="token punctuation">,</span> <span class="token comment">// 原样返回非特殊涵义的参数</span>    tagName<span class="token operator">:</span> <span class="token string">"image"</span><span class="token punctuation">,</span> <span class="token comment">// 使用 &lt;image&gt; 标签渲染箭头，其余键值对都将作为该元素的属性。</span>    width<span class="token operator">:</span> imageWidth<span class="token punctuation">,</span>    height<span class="token operator">:</span> imageHeight<span class="token punctuation">,</span>    <span class="token string-property property">"xlink:href"</span><span class="token operator">:</span> imageUrl<span class="token punctuation">,</span>  <span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//2. 使用</span>edge<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  line<span class="token operator">:</span> <span class="token punctuation">{</span>    sourceMarker<span class="token operator">:</span> <span class="token punctuation">{</span>      name<span class="token operator">:</span> <span class="token string">"image"</span><span class="token punctuation">,</span>      imageUrl<span class="token operator">:</span>        <span class="token string">"http://cdn3.iconfinder.com/data/icons/49handdrawing/24x24/left.png"</span><span class="token punctuation">,</span>      imageWidth<span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span>      imageHeight<span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span>      y<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">12</span><span class="token punctuation">,</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span>    targetMarker<span class="token operator">:</span> <span class="token punctuation">{</span>      name<span class="token operator">:</span> <span class="token string">"image"</span><span class="token punctuation">,</span>      imageUrl<span class="token operator">:</span>        <span class="token string">"http://cdn3.iconfinder.com/data/icons/49handdrawing/24x24/left.png"</span><span class="token punctuation">,</span>      imageWidth<span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span>      imageHeight<span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span>      y<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">12</span><span class="token punctuation">,</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h5 id="直接生成"><a href="#直接生成" class="headerlink" title="直接生成"></a>直接生成</h5><p>我们可以通过实例对象上的暴露的方法直接生成边的同时，指定对应的样式，起始箭头和终止箭头使用了相同的 <code>d</code> 属性，这是因为<code>x6</code>会自动计算箭头方向，简单来说，在定义箭头时，只需要定义一个<strong>向左指向坐标原点</strong>的箭头即可。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript">graph<span class="token punctuation">.</span><span class="token function">addEdge</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  shape<span class="token operator">:</span> <span class="token string">"edge"</span><span class="token punctuation">,</span>  sourece<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">,</span>  target<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">500</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">]</span><span class="token punctuation">,</span>  attrs<span class="token operator">:</span> <span class="token punctuation">{</span>    line<span class="token operator">:</span> <span class="token punctuation">{</span>      sourceMarker<span class="token operator">:</span> <span class="token punctuation">{</span>        tagName<span class="token operator">:</span> <span class="token string">"path"</span><span class="token punctuation">,</span>        d<span class="token operator">:</span> <span class="token string">"M 20 -10 0 0 20 10 Z"</span><span class="token punctuation">,</span>      <span class="token punctuation">}</span><span class="token punctuation">,</span>      targetMarker<span class="token operator">:</span> <span class="token punctuation">{</span>        tagName<span class="token operator">:</span> <span class="token string">"path"</span><span class="token punctuation">,</span>        fill<span class="token operator">:</span> <span class="token string">"yellow"</span><span class="token punctuation">,</span> <span class="token comment">// 使用自定义填充色</span>        stroke<span class="token operator">:</span> <span class="token string">"green"</span><span class="token punctuation">,</span> <span class="token comment">// 使用自定义边框色</span>        strokeWidth<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>        d<span class="token operator">:</span> <span class="token string">"M 20 -10 0 0 20 10 Z"</span><span class="token punctuation">,</span>      <span class="token punctuation">}</span><span class="token punctuation">,</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="连接桩"><a href="#连接桩" class="headerlink" title="连接桩"></a>连接桩</h2>]]></content>
      
      
      
    </entry>
    
    
    
    <entry>
      <title>WebGL</title>
      <link href="/2023/02/28/webgl/"/>
      <url>/2023/02/28/webgl/</url>
      
        <content type="html"><![CDATA[<h1 id="WebGL"><a href="#WebGL" class="headerlink" title="WebGL"></a>WebGL</h1><h2 id="WebGL-前生今世"><a href="#WebGL-前生今世" class="headerlink" title="WebGL 前生今世"></a>WebGL 前生今世</h2><p><code>WebGL</code>是一项用来在网页上面绘制和渲染复杂三维图形，并允许用户与之进行交互的技术。<code>WebGL</code>起源于<code>OpenGL</code>，但是实际上是从<code>OpenGL ES</code>中派生出来，<code>OpenGL ES</code>是<code>OpenGL</code>的一个特殊的版本，于 2003 年首次提出，并在 2007 年（ES 2.0）和 2012 年(ES 3.0)进行了两次的升级，我们的<code>WebGL</code>就是基于<code>OpenGL ES2</code>。</p><p>下面的图显示了<code>OpenGL</code>、<code>OpenGL ES 1.1/2.0/3.0</code>和 <code>WeGL</code>的关系。由于<code>OpenGL</code>本身已经从 1.5 发展到了 2.0，再到 4.3，所以<code>OpenGL ES</code> 被标准化为特定版本 <code>OpenGIOpenGL1.5</code>和<code>OpenGL2.0</code>的子集。</p><p><img src="/2023/02/28/webgl/image-20230210170924019.png" alt="image-20230210170924019"></p><p><code>OpenGL 2.0</code> 开始支持了一项非常重要的特性，即可编程着色器方法(programmable shader functions)。该特性被<code>OpenGL ES 2.0</code>继承，并成为了<code>WebGL1.0</code>标准的核心部分。</p><p>着色器方法，或称着色器，是使用一种类似于 C 的编程语言实现了精美的视觉效果。编写着色器的语言又称为着色器语言(shading language)，<code>OpenGLES 2.0</code>基于<code>OpenGL着色器语言(GLSL)</code>，因此后者又被称为<code>OpenGL ES 着色器语言(GLSLES)</code>。<code>WebGL</code>基于<code>OpenGL ES 2.0</code>也使用<code>GLSLES</code>编写着色器。</p><p><code>OpenGL</code>规范的更新和标准化由<code>Khronos组织</code>(一个非盈利的行业协会专注于制定发布、推广多种开放标准)负责。2009 年，<code>Khronos</code> 建立了 <code>WebGL</code> 工作小组，开始基于<code>OpenGL ES</code> 着手建立<code> WebGL</code>规范，并于 2011 年发布了 <code>WebGL</code>规范的第 1 个版本。</p><h2 id="认识-Canvas"><a href="#认识-Canvas" class="headerlink" title="认识 Canvas"></a>认识 Canvas</h2><p>在学习<code>WebGL</code>之前，我们需要了解一下<code>canvas</code>标签，<code>canvas</code>是<code>HTML5 </code>提出的用于图形的绘制，我们可以通过脚本 (通常是 JavaScript)来完成我们想要的图案，比如二维的圆、正方形等，<canvas> 标签只是图形容器，必须使用脚本来绘制图形。</canvas></p><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>了解Canvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">      <span class="token keyword">function</span> <span class="token function">draw</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>        <span class="token comment">// 获取canvas元素</span>        <span class="token keyword">var</span> canvas <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"tutorial"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token keyword">if</span> <span class="token punctuation">(</span>canvas<span class="token punctuation">.</span>getContext<span class="token punctuation">)</span> <span class="token punctuation">{</span>          <span class="token comment">// 拿到canvas上下文</span>          <span class="token keyword">var</span> ctx <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">"2d"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>          <span class="token comment">//填充颜色</span>          ctx<span class="token punctuation">.</span>fillStyle <span class="token operator">=</span> <span class="token string">"rgb(200,0,0)"</span><span class="token punctuation">;</span>          <span class="token comment">// 绘制矩形</span>          ctx<span class="token punctuation">.</span><span class="token function">fillRect</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">55</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token punctuation">}</span>      <span class="token punctuation">}</span>    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">      <span class="token selector">canvas</span> <span class="token punctuation">{</span>        <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span>      <span class="token punctuation">}</span>    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span> <span class="token special-attr"><span class="token attr-name">onload</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">draw</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>canvas</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tutorial<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>150<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>150<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>      您的浏览器版本过老，请升级浏览器版本！    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>canvas</span><span class="token punctuation">&gt;</span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>我们需要值得注意的是，因为<code>Canvas</code>标签是<code>html5</code>新出的标签，所以可能有些老的浏览器会不支持，不支持的浏览器会直接忽略这一行，也就不会显示<code>canvas</code>，所以我们可以给一条错误信息，提示用户。</p><h2 id="了解-WebGL"><a href="#了解-WebGL" class="headerlink" title="了解 WebGL"></a>了解 WebGL</h2><p>就跟学习其他语言的<code>hello world</code>一样，我们也来写一个<code>WebGL</code>版本的<code>hello world</code>。首先我们先看下面这一部分的代码。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// HelloCanvas.js</span><span class="token keyword">function</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment">// 通过id获取&lt;canvas&gt;元素</span><span class="token keyword">var</span> canvasDom <span class="token operator">=</span> <span class="token function">documentgetElementById</span><span class="token punctuation">(</span><span class="token string">'webgl'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// 获取WebGL绘图上下文</span><span class="token keyword">var</span> gl <span class="token operator">=</span> <span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">'webgl'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>gl<span class="token punctuation">)</span><span class="token punctuation">{</span>        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Failed to get the rendering context for WebGL'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token keyword">return</span><span class="token punctuation">;</span>    <span class="token punctuation">}</span><span class="token comment">// 指定清空&lt;canvas&gt;的颜色</span>gl<span class="token punctuation">.</span><span class="token function">clearColor</span><span class="token punctuation">(</span><span class="token number">0.0</span>，<span class="token number">0.0</span>，<span class="token number">0.0</span>，<span class="token number">1.0</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// 清空&lt;canvas&gt;</span>gl<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span>gl<span class="token punctuation">.</span><span class="token constant">COLOR_BUFFER_BIT</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>我们可以看到<code>main()</code>函数中执行了以下的流程，那么我们就来逐步的解答一下每个步骤。</p><p><img src="/2023/02/28/webgl/image-20230213085943773.png" alt="image-20230213085943773"></p><h3 id="获取-canvas-元素"><a href="#获取-canvas-元素" class="headerlink" title="获取 canvas 元素"></a>获取 canvas 元素</h3><p>跟二维绘图一样，我们需要一个画布来承接我们想要话的内容，在<code>WebGL</code>我们使用的是<code>canvns</code>标签来承接。通过<code>id</code>获取到对应的元素，存储到<code>canvasDom</code>变量中。</p><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>canvas</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>webgl<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1024<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>648<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>canvas</span><span class="token punctuation">&gt;</span></span>var canvasDom = documentgetElementById('webgl');<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h3 id="获取-WebGL-绘图上下文"><a href="#获取-WebGL-绘图上下文" class="headerlink" title="获取 WebGL 绘图上下文"></a>获取 WebGL 绘图上下文</h3><p>通常来说，我们需要绘制三维的图形，我们需要通过<code>DOM</code>变量获取到<code>WebGL</code>绘图上下文。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> gl <span class="token operator">=</span> <span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">"webgl"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>同时我们需要值得注意的是<code>getContext()</code>在不同的浏览器可能会导致获取到的值不同。这样我们就拿到了<code>WebGL</code>的绘图上下文，我们就可以绘制三维图形了。一般来说，我们会将获取到的上下文命名为<code>gl</code>。</p><h3 id="设置-canvas-的背景色"><a href="#设置-canvas-的背景色" class="headerlink" title="设置 canvas 的背景色"></a>设置 canvas 的背景色</h3><p>在前面我记得提到过，canvas 清空绘画区，不是像橡皮擦一样擦除掉，而是使用颜色覆盖绘画区，然后重新画。所以在清空绘画区之前，我们得指定背景颜色。</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">gl<span class="token punctuation">.</span><span class="token function">clearColor</span><span class="token punctuation">(</span><span class="token number">0.0</span>，<span class="token number">0.0</span>，<span class="token number">0.0</span>，<span class="token number">1.0</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>这里采用的也是<code>RGBA</code>的格式，但是又与我们常规的<code>RGBA</code>格式不同，普通的颜色分量值是<code>0-255</code>之间，这里的每个参数的范围是<code>0-1.0</code>，比如红色<code>(1.0,0.0,0.0,1.0)</code>，绿色<code>(0.0,1.0,0.0,1.0)</code>，蓝色<code>(0.0,0.0,1.0,1.0)</code></p><p>一旦指定背景颜色之后，那么这个颜色就会暂存到 WebGL 系统中，在调用下一次的<code>gl.clearColor()</code>方法之前是不会改变的。</p><h3 id="清空-canvas"><a href="#清空-canvas" class="headerlink" title="清空 canvas"></a>清空 canvas</h3><p>在之前设置</p>]]></content>
      
      
      <categories>
          
          <category> Markdown </category>
          
      </categories>
      
      
        <tags>
            
            <tag> WebGL </tag>
            
        </tags>
      
    </entry>
    
    
  
  
</search>