1 line
104 KiB
HTML
1 line
104 KiB
HTML
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2"><meta name="theme-color" content="#FFF"><link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png"><link rel="icon" type="image/ico" sizes="32x32" href="/images/favicon.ico"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link rel="alternate" type="application/rss+xml" title="涛声依旧" href="https://hitoli.com/rss.xml"><link rel="alternate" type="application/atom+xml" title="涛声依旧" href="https://hitoli.com/atom.xml"><link rel="alternate" type="application/json" title="涛声依旧" href="https://hitoli.com/feed.json"><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Mulish:300,300italic,400,400italic,700,700italic%7CFredericka%20the%20Great:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20JP:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20SC:300,300italic,400,400italic,700,700italic%7CInconsolata:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext"><link rel="stylesheet" href="/css/app.css?v=0.0.0"><meta name="keywords" content="Highcharts"><link rel="canonical" href="https://hitoli.com/2023/01/10/Highcharts%E7%94%BB%E6%94%B6%E7%9B%8A%E6%A6%82%E8%A7%88/"><title>Highcharts 画收益概览 - Highcharts - 工作 | ☆∵∴Hito∴∵★ = 涛声依旧 = 天下事有难易乎？为之，则难者亦易矣</title><meta name="generator" content="Hexo 6.3.0"></head><body itemscope itemtype="http://schema.org/WebPage"><div id="loading"><div class="cat"><div class="body"></div><div class="head"><div class="face"></div></div><div class="foot"><div class="tummy-end"></div><div class="bottom"></div><div class="legs left"></div><div class="legs right"></div></div><div class="paw"><div class="hands left"></div><div class="hands right"></div></div></div></div><div id="container"><header id="header" itemscope itemtype="http://schema.org/WPHeader"><div class="inner"><div id="brand"><div class="pjax"><h1 itemprop="name headline">Highcharts 画收益概览</h1><div class="meta"><span class="item" title="创建时间：2023-01-10 09:51:00"><span class="icon"><i class="ic i-calendar"></i> </span><span class="text">发表于</span> <time itemprop="dateCreated datePublished" datetime="2023-01-10T09:51:00+08:00">2023-01-10</time> </span><span class="item" title="本文字数"><span class="icon"><i class="ic i-pen"></i> </span><span class="text">本文字数</span> <span>6.5k</span> <span class="text">字</span> </span><span class="item" title="阅读时长"><span class="icon"><i class="ic i-clock"></i> </span><span class="text">阅读时长</span> <span>6 分钟</span></span></div></div></div><nav id="nav"><div class="inner"><div class="toggle"><div class="lines" aria-label="切换导航栏"><span class="line"></span> <span class="line"></span> <span class="line"></span></div></div><ul class="menu"><li class="item title"><a href="/" rel="start">☆∵∴Hito∴∵★</a></li></ul><ul class="right"><li class="item theme"><i class="ic i-sun"></i></li><li class="item search"><i class="ic i-search"></i></li></ul></div></nav></div><div id="imgs" class="pjax"><ul><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1giph4lm9i7j20zk0m84qp.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1gipexe4oykj20zk0m87ji.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1giclx29mstj20zk0m8hdt.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1giclhtuo6nj20zk0m8ttm.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1gicit4jrvuj20zk0m8785.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1gipevo9j1jj20zk0m8e81.jpg"></li></ul></div></header><div id="waves"><svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"><defs><path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/></defs><g class="parallax"><use xlink:href="#gentle-wave" x="48" y="0"/><use xlink:href="#gentle-wave" x="48" y="3"/><use xlink:href="#gentle-wave" x="48" y="5"/><use xlink:href="#gentle-wave" x="48" y="7"/></g></svg></div><main><div class="inner"><div id="main" class="pjax"><div class="article wrap"><div class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList"><i class="ic i-home"></i> <span><a href="/">首页</a></span><i class="ic i-angle-right"></i> <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/categories/%E5%B7%A5%E4%BD%9C/" itemprop="item" rel="index" title="分类于 工作"><span itemprop="name">工作</span></a><meta itemprop="position" content="1"></span><i class="ic i-angle-right"></i> <span class="current" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/categories/%E5%B7%A5%E4%BD%9C/Highcharts/" itemprop="item" rel="index" title="分类于 Highcharts"><span itemprop="name">Highcharts</span></a><meta itemprop="position" content="2"></span></div><article itemscope itemtype="http://schema.org/Article" class="post block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://hitoli.com/2023/01/10/Highcharts%E7%94%BB%E6%94%B6%E7%9B%8A%E6%A6%82%E8%A7%88/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="/images/avatar.jpg"><meta itemprop="name" content="Hito Li"><meta itemprop="description" content="天下事有难易乎？为之，则难者亦易矣, 天生我材必有用"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="涛声依旧"></span><div class="body md" itemprop="articleBody"><h4 id="引言"><a class="anchor" href="#引言">#</a> 引言</h4><p>项目中需要画一幅收益概览图，研究了一下 Highcharts 的用法。特此收录方便以后再次使用时查阅。<br><img data-src="https://nas.hitoli.com:18014/images/2023/01/10/1ef80bfe8b5ee82aec0e2549e8c68e2c.png" alt="1ef80bfe8b5ee82aec0e2549e8c68e2c.png"></p><h4 id="代码"><a class="anchor" href="#代码">#</a> 代码</h4><figure class="highlight js"><figcaption data-lang="JavaScript"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token comment">//x 轴时间集合</span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token keyword">var</span> chartXAxisDateTimes <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'2022-01-01 00:00:00'</span><span class="token punctuation">,</span> <span class="token string">'2022-02-01 00:00:00'</span><span class="token punctuation">,</span> <span class="token string">'2022-03-01 00:00:00'</span><span class="token punctuation">,</span> <span class="token string">'2022-04-01 00:00:00'</span><span class="token punctuation">,</span> <span class="token string">'2022-05-01 00:00:00'</span><span class="token punctuation">]</span></pre></td></tr><tr><td data-num="3"></td><td><pre></pre></td></tr><tr><td data-num="4"></td><td><pre><span class="token comment">//y 轴数据集合</span></pre></td></tr><tr><td data-num="5"></td><td><pre><span class="token keyword">var</span> chartYAxisDatas <span class="token operator">=</span> <span class="token punctuation">[</span></pre></td></tr><tr><td data-num="6"></td><td><pre> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="7"></td><td><pre> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'累计收益'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="8"></td><td><pre> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'我的策略累计收益'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="9"></td><td><pre> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'spline'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="10"></td><td><pre> <span class="token literal-property property">unit</span><span class="token operator">:</span> <span class="token string">'%'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="11"></td><td><pre> <span class="token literal-property property">valueDecimals</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="12"></td><td><pre> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token string">'28%'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="13"></td><td><pre> <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 comment">//y 轴分区 index（从上到下，默认从 0 开始）</span></pre></td></tr><tr><td data-num="14"></td><td><pre> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span></pre></td></tr><tr><td data-num="15"></td><td><pre> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'2022-01-01 00:00:00'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="16"></td><td><pre> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="17"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">''</span></pre></td></tr><tr><td data-num="18"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="19"></td><td><pre> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="20"></td><td><pre> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'2022-02-01 00:00:00'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="21"></td><td><pre> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="22"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">''</span></pre></td></tr><tr><td data-num="23"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="24"></td><td><pre> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="25"></td><td><pre> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'2022-03-01 00:00:00'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="26"></td><td><pre> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="27"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">''</span></pre></td></tr><tr><td data-num="28"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="29"></td><td><pre> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="30"></td><td><pre> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'2022-04-01 00:00:00'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="31"></td><td><pre> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="32"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">''</span></pre></td></tr><tr><td data-num="33"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="34"></td><td><pre> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="35"></td><td><pre> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'2022-05-01 00:00:00'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="36"></td><td><pre> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="37"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">''</span></pre></td></tr><tr><td data-num="38"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">]</span></pre></td></tr><tr><td data-num="39"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="40"></td><td><pre> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="41"></td><td><pre> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'每月盈亏'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="42"></td><td><pre> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'当月盈利'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="43"></td><td><pre> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'column'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="44"></td><td><pre> <span class="token literal-property property">unit</span><span class="token operator">:</span> <span class="token string">'k'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="45"></td><td><pre> <span class="token literal-property property">valueDecimals</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="46"></td><td><pre> <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token string">'34%'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="47"></td><td><pre> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token string">'28%'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="48"></td><td><pre> <span class="token literal-property property">yAxisIndex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">//y 轴分区 index（从上到下，默认从 0 开始）</span></pre></td></tr><tr><td data-num="49"></td><td><pre> <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 punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="50"></td><td><pre> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value <span class="token operator"><</span> <span class="token number">0</span> <span class="token operator">?</span> <span class="token punctuation">(</span><span class="token operator">-</span><span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'k'</span> <span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value <span class="token operator">+</span> <span class="token string">'k'</span></pre></td></tr><tr><td data-num="51"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="52"></td><td><pre> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span></pre></td></tr><tr><td data-num="53"></td><td><pre> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'2022-01-01 00:00:00'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="54"></td><td><pre> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="55"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">''</span></pre></td></tr><tr><td data-num="56"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="57"></td><td><pre> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="58"></td><td><pre> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'2022-02-01 00:00:00'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="59"></td><td><pre> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="60"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">''</span></pre></td></tr><tr><td data-num="61"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="62"></td><td><pre> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="63"></td><td><pre> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'2022-03-01 00:00:00'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="64"></td><td><pre> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="65"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">''</span></pre></td></tr><tr><td data-num="66"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="67"></td><td><pre> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="68"></td><td><pre> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'2022-04-01 00:00:00'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="69"></td><td><pre> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="70"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">''</span></pre></td></tr><tr><td data-num="71"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="72"></td><td><pre> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="73"></td><td><pre> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'2022-05-01 00:00:00'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="74"></td><td><pre> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="75"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">''</span></pre></td></tr><tr><td data-num="76"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">]</span></pre></td></tr><tr><td data-num="77"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="78"></td><td><pre> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="79"></td><td><pre> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'成交记录'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="80"></td><td><pre> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'当月买入'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="81"></td><td><pre> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'column'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="82"></td><td><pre> <span class="token literal-property property">unit</span><span class="token operator">:</span> <span class="token string">'k'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="83"></td><td><pre> <span class="token literal-property property">valueDecimals</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="84"></td><td><pre> <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token string">'68%'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="85"></td><td><pre> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token string">'28%'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="86"></td><td><pre> <span class="token literal-property property">yAxisIndex</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token comment">//y 轴分区 index（从上到下，默认从 0 开始）</span></pre></td></tr><tr><td data-num="87"></td><td><pre> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span></pre></td></tr><tr><td data-num="88"></td><td><pre> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'2022-01-01 00:00:00'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="89"></td><td><pre> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="90"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span></pre></td></tr><tr><td data-num="91"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="92"></td><td><pre> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="93"></td><td><pre> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'2022-02-01 00:00:00'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="94"></td><td><pre> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="95"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span></pre></td></tr><tr><td data-num="96"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="97"></td><td><pre> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="98"></td><td><pre> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'2022-03-01 00:00:00'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="99"></td><td><pre> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="100"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span></pre></td></tr><tr><td data-num="101"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="102"></td><td><pre> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="103"></td><td><pre> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'2022-04-01 00:00:00'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="104"></td><td><pre> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="105"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span></pre></td></tr><tr><td data-num="106"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="107"></td><td><pre> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="108"></td><td><pre> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'2022-05-01 00:00:00'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="109"></td><td><pre> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="110"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span></pre></td></tr><tr><td data-num="111"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">]</span></pre></td></tr><tr><td data-num="112"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="113"></td><td><pre> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="114"></td><td><pre> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'成交记录'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="115"></td><td><pre> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'当月卖出'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="116"></td><td><pre> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'column'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="117"></td><td><pre> <span class="token literal-property property">unit</span><span class="token operator">:</span> <span class="token string">'k'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="118"></td><td><pre> <span class="token literal-property property">valueDecimals</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="119"></td><td><pre> <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token string">'68%'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="120"></td><td><pre> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token string">'28%'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="121"></td><td><pre> <span class="token literal-property property">yAxisIndex</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token comment">//y 轴分区 index（从上到下，默认从 0 开始）</span></pre></td></tr><tr><td data-num="122"></td><td><pre> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span></pre></td></tr><tr><td data-num="123"></td><td><pre> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'2022-01-01 00:00:00'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="124"></td><td><pre> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="125"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'green'</span></pre></td></tr><tr><td data-num="126"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="127"></td><td><pre> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="128"></td><td><pre> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'2022-02-01 00:00:00'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="129"></td><td><pre> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="130"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'green'</span></pre></td></tr><tr><td data-num="131"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="132"></td><td><pre> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="133"></td><td><pre> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'2022-03-01 00:00:00'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="134"></td><td><pre> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="135"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'green'</span></pre></td></tr><tr><td data-num="136"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="137"></td><td><pre> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="138"></td><td><pre> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'2022-04-01 00:00:00'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="139"></td><td><pre> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="140"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'green'</span></pre></td></tr><tr><td data-num="141"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="142"></td><td><pre> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="143"></td><td><pre> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'2022-05-01 00:00:00'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="144"></td><td><pre> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="145"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'green'</span></pre></td></tr><tr><td data-num="146"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">]</span></pre></td></tr><tr><td data-num="147"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="148"></td><td><pre> <span class="token punctuation">]</span></pre></td></tr><tr><td data-num="149"></td><td><pre> </pre></td></tr><tr><td data-num="150"></td><td><pre><span class="token comment">// 最大回测范围</span></pre></td></tr><tr><td data-num="151"></td><td><pre><span class="token keyword">var</span> plotBandScope <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'2022-02-01 00:00:00'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'2022-04-01 00:00:00'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span></pre></td></tr><tr><td data-num="152"></td><td><pre></pre></td></tr><tr><td data-num="153"></td><td><pre><span class="token comment">// 图表配置</span></pre></td></tr><tr><td data-num="154"></td><td><pre><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="155"></td><td><pre> <span class="token literal-property property">chart</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="156"></td><td><pre> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">600</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="157"></td><td><pre> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'spline'</span> <span class="token comment">// 指定图表的类型，默认是折线图（line)</span></pre></td></tr><tr><td data-num="158"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="159"></td><td><pre> <span class="token literal-property property">plotOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="160"></td><td><pre> <span class="token literal-property property">spline</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="161"></td><td><pre> <span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="162"></td><td><pre> <span class="token literal-property property">lineWidth</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="163"></td><td><pre> <span class="token literal-property property">states</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="164"></td><td><pre> <span class="token literal-property property">hover</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="165"></td><td><pre> <span class="token literal-property property">lineWidth</span><span class="token operator">:</span> <span class="token number">2</span></pre></td></tr><tr><td data-num="166"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="167"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="168"></td><td><pre> <span class="token comment">//pointWidth: 4, // 柱子内宽度容</span></pre></td></tr><tr><td data-num="169"></td><td><pre> <span class="token literal-property property">dataLabels</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="170"></td><td><pre> <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="171"></td><td><pre> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">11</span></pre></td></tr><tr><td data-num="172"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="173"></td><td><pre> <span class="token literal-property property">enabled</span><span class="token operator">:</span> <span class="token boolean">false</span></pre></td></tr><tr><td data-num="174"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="175"></td><td><pre> <span class="token literal-property property">showInLegend</span><span class="token operator">:</span> <span class="token boolean">true</span></pre></td></tr><tr><td data-num="176"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="177"></td><td><pre> <span class="token literal-property property">column</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="178"></td><td><pre> <span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="179"></td><td><pre> <span class="token literal-property property">pointWidth</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token comment">// 柱子内宽度容</span></pre></td></tr><tr><td data-num="180"></td><td><pre> <span class="token literal-property property">dataLabels</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="181"></td><td><pre> <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="182"></td><td><pre> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">11</span></pre></td></tr><tr><td data-num="183"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="184"></td><td><pre> <span class="token literal-property property">enabled</span><span class="token operator">:</span> <span class="token boolean">false</span></pre></td></tr><tr><td data-num="185"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="186"></td><td><pre> <span class="token literal-property property">showInLegend</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="187"></td><td><pre> <span class="token literal-property property">grouping</span><span class="token operator">:</span> <span class="token boolean">true</span></pre></td></tr><tr><td data-num="188"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="189"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="190"></td><td><pre> <span class="token literal-property property">rangeSelector</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="191"></td><td><pre> <span class="token literal-property property">enabled</span><span class="token operator">:</span> <span class="token boolean">false</span></pre></td></tr><tr><td data-num="192"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="193"></td><td><pre> <span class="token literal-property property">credits</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="194"></td><td><pre> <span class="token literal-property property">enabled</span><span class="token operator">:</span> <span class="token boolean">false</span></pre></td></tr><tr><td data-num="195"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="196"></td><td><pre> <span class="token comment">// legend: {</span></pre></td></tr><tr><td data-num="197"></td><td><pre> <span class="token comment">// enabled: true,</span></pre></td></tr><tr><td data-num="198"></td><td><pre> <span class="token comment">// verticalAlign: 'top'</span></pre></td></tr><tr><td data-num="199"></td><td><pre> <span class="token comment">// },</span></pre></td></tr><tr><td data-num="200"></td><td><pre> <span class="token literal-property property">navigator</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 导航器样式</span></pre></td></tr><tr><td data-num="201"></td><td><pre> <span class="token literal-property property">enabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="202"></td><td><pre> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">20</span></pre></td></tr><tr><td data-num="203"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="204"></td><td><pre> <span class="token literal-property property">scrollbar</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 滚动条样式</span></pre></td></tr><tr><td data-num="205"></td><td><pre> <span class="token literal-property property">barBackgroundColor</span><span class="token operator">:</span> <span class="token string">'rgb(209, 218, 237)'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="206"></td><td><pre> <span class="token literal-property property">barBorderRadius</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="207"></td><td><pre> <span class="token literal-property property">barBorderWidth</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="208"></td><td><pre> <span class="token literal-property property">buttonBackgroundColor</span><span class="token operator">:</span> <span class="token string">'rgb(242, 242, 242)'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="209"></td><td><pre> <span class="token literal-property property">buttonBorderWidth</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="210"></td><td><pre> <span class="token literal-property property">buttonBorderRadius</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="211"></td><td><pre> <span class="token literal-property property">trackBackgroundColor</span><span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="212"></td><td><pre> <span class="token literal-property property">trackBorderWidth</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="213"></td><td><pre> <span class="token literal-property property">trackBorderRadius</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="214"></td><td><pre> <span class="token literal-property property">trackBorderColor</span><span class="token operator">:</span> <span class="token string">'#CCC'</span></pre></td></tr><tr><td data-num="215"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="216"></td><td><pre> <span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="217"></td><td><pre> <span class="token literal-property property">lineWidth</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="218"></td><td><pre> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'datetime'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="219"></td><td><pre> <span class="token literal-property property">categories</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="220"></td><td><pre> <span class="token literal-property property">dateTimeLabelFormats</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="221"></td><td><pre> <span class="token comment">// millisecond: '%H:%M:%S.%L',</span></pre></td></tr><tr><td data-num="222"></td><td><pre> <span class="token comment">// second: '%H:%M:%S',</span></pre></td></tr><tr><td data-num="223"></td><td><pre> <span class="token comment">// minute: '%H:%M',</span></pre></td></tr><tr><td data-num="224"></td><td><pre> <span class="token comment">// hour: '%m-%d %H:%M',</span></pre></td></tr><tr><td data-num="225"></td><td><pre> <span class="token literal-property property">day</span><span class="token operator">:</span> <span class="token string">'%m-%d'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="226"></td><td><pre> <span class="token literal-property property">week</span><span class="token operator">:</span> <span class="token string">'%m-%d'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="227"></td><td><pre> <span class="token literal-property property">month</span><span class="token operator">:</span> <span class="token string">'%Y-%m'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="228"></td><td><pre> <span class="token literal-property property">year</span><span class="token operator">:</span> <span class="token string">'%Y'</span></pre></td></tr><tr><td data-num="229"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="230"></td><td><pre> <span class="token literal-property property">gridLineWidth</span><span class="token operator">:</span> <span class="token number">1</span></pre></td></tr><tr><td data-num="231"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="232"></td><td><pre> <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></pre></td></tr><tr><td data-num="233"></td><td><pre> <span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="234"></td><td><pre> <span class="token literal-property property">xDateFormat</span><span class="token operator">:</span> <span class="token string">'%Y-%m-%d %H:%M:%S'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="235"></td><td><pre> <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="236"></td><td><pre> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="237"></td><td><pre> <span class="token literal-property property">fontFamily</span><span class="token operator">:</span> <span class="token string">'微软雅黑'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="238"></td><td><pre> <span class="token literal-property property">fontWeight</span><span class="token operator">:</span> <span class="token string">'normal'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="239"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#666'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="240"></td><td><pre> <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="241"></td><td><pre> <span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="242"></td><td><pre> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'#ddd'</span></pre></td></tr><tr><td data-num="243"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="244"></td><td><pre> <span class="token literal-property property">shared</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="245"></td><td><pre> <span class="token literal-property property">useHTML</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="246"></td><td><pre> <span class="token literal-property property">headerFormat</span><span class="token operator">:</span> <span class="token string">'<small style="font-size: 12px">{point.key}</small><table>'</span><span class="token punctuation">,</span> <span class="token comment">// 标题格式，</span></pre></td></tr><tr><td data-num="247"></td><td><pre> <span class="token literal-property property">pointFormat</span><span class="token operator">:</span> <span class="token string">'<tr><td><li style="color:{series.color};padding:0px">{series.name}: </li>'</span> <span class="token operator">+</span></pre></td></tr><tr><td data-num="248"></td><td><pre> <span class="token string">'<div style="float: right;">{point.y} {series.tooltip.valueDecimals}</div></td></tr>'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="249"></td><td><pre> <span class="token literal-property property">footerFormat</span><span class="token operator">:</span> <span class="token string">'</table>'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="250"></td><td><pre> <span class="token literal-property property">shadow</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="251"></td><td><pre> <span class="token literal-property property">followPointer</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 跟随鼠标</span></pre></td></tr><tr><td data-num="252"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="253"></td><td><pre> <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></pre></td></tr><tr><td data-num="254"></td><td><pre><span class="token punctuation">}</span></pre></td></tr><tr><td data-num="255"></td><td><pre></pre></td></tr><tr><td data-num="256"></td><td><pre><span class="token comment">// 根据最大回测范围修改图表配置</span></pre></td></tr><tr><td data-num="257"></td><td><pre><span class="token keyword">if</span> <span class="token punctuation">(</span>plotBandScope <span class="token operator">&&</span> plotBandScope<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="258"></td><td><pre> option<span class="token punctuation">.</span>xAxis<span class="token punctuation">.</span>plotBands <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span></pre></td></tr><tr><td data-num="259"></td><td><pre> <span class="token literal-property property">from</span><span class="token operator">:</span> plotBandScope<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="260"></td><td><pre> <span class="token literal-property property">to</span><span class="token operator">:</span> plotBandScope<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="261"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#FCFFC5'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="262"></td><td><pre> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="263"></td><td><pre> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'最大回测区间'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="264"></td><td><pre> <span class="token literal-property property">align</span><span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="265"></td><td><pre> <span class="token literal-property property">verticalAlign</span><span class="token operator">:</span> <span class="token string">'top'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="266"></td><td><pre> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">14</span></pre></td></tr><tr><td data-num="267"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="268"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">]</span></pre></td></tr><tr><td data-num="269"></td><td><pre><span class="token punctuation">}</span></pre></td></tr><tr><td data-num="270"></td><td><pre></pre></td></tr><tr><td data-num="271"></td><td><pre><span class="token comment">// 根据 x 轴时间集合修改图表配置</span></pre></td></tr><tr><td data-num="272"></td><td><pre><span class="token keyword">if</span> <span class="token punctuation">(</span>chartXAxisDateTimes <span class="token operator">&&</span> chartXAxisDateTimes<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="273"></td><td><pre> option<span class="token punctuation">.</span>categories <span class="token operator">=</span> chartXAxisDateTimes</pre></td></tr><tr><td data-num="274"></td><td><pre><span class="token punctuation">}</span></pre></td></tr><tr><td data-num="275"></td><td><pre></pre></td></tr><tr><td data-num="276"></td><td><pre><span class="token comment">// 根据 y 轴数据集合修改图表配置</span></pre></td></tr><tr><td data-num="277"></td><td><pre><span class="token keyword">if</span> <span class="token punctuation">(</span>chartYAxisDatas <span class="token operator">&&</span> chartYAxisDatas<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="278"></td><td><pre> chartYAxisDatas<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="279"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">'spline'</span> <span class="token operator">||</span> item<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">'line'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="280"></td><td><pre> option<span class="token punctuation">.</span>yAxis<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span></pre></td></tr><tr><td data-num="281"></td><td><pre> <span class="token literal-property property">plotLines</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span></pre></td></tr><tr><td data-num="282"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'black'</span><span class="token punctuation">,</span> <span class="token comment">// 线的颜色，定义为红色</span></pre></td></tr><tr><td data-num="283"></td><td><pre> <span class="token literal-property property">dashStyle</span><span class="token operator">:</span> <span class="token string">'solid'</span><span class="token punctuation">,</span> <span class="token comment">// 默认值，这里定义为实线</span></pre></td></tr><tr><td data-num="284"></td><td><pre> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 定义在那个值上显示标示线，这里是在 x 轴上刻度为 3 的值处垂直化一条线</span></pre></td></tr><tr><td data-num="285"></td><td><pre> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token comment">// 标示线的宽度，2px</span></pre></td></tr><tr><td data-num="286"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="287"></td><td><pre> <span class="token literal-property property">tickAmount</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token comment">// 规定坐标轴上的刻度总数</span></pre></td></tr><tr><td data-num="288"></td><td><pre> <span class="token literal-property property">gridLineColor</span><span class="token operator">:</span> <span class="token string">'#ddd'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="289"></td><td><pre> <span class="token literal-property property">gridLineDashStyle</span><span class="token operator">:</span> <span class="token string">'Solid'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="290"></td><td><pre> <span class="token literal-property property">labels</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 坐标轴上刻度的样式及单位</span></pre></td></tr><tr><td data-num="291"></td><td><pre> <span class="token literal-property property">align</span><span class="token operator">:</span> <span class="token string">'right'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="292"></td><td><pre> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="293"></td><td><pre> <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="294"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#999999'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="295"></td><td><pre> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">12</span></pre></td></tr><tr><td data-num="296"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="297"></td><td><pre> <span class="token literal-property property">format</span><span class="token operator">:</span> <span class="token string">'{value}'</span> <span class="token operator">+</span> item<span class="token punctuation">.</span>unit <span class="token comment">// 坐标轴上的单位</span></pre></td></tr><tr><td data-num="298"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="299"></td><td><pre> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="300"></td><td><pre> <span class="token literal-property property">text</span><span class="token operator">:</span> item<span class="token punctuation">.</span>title<span class="token punctuation">,</span></pre></td></tr><tr><td data-num="301"></td><td><pre> <span class="token literal-property property">margin</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="302"></td><td><pre> <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="303"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#999999'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="304"></td><td><pre> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="305"></td><td><pre> <span class="token literal-property property">align</span><span class="token operator">:</span> <span class="token string">'middle'</span> <span class="token comment">// 坐标轴对齐方式（相对于坐标轴的值） 默认是：middle 居中对齐</span></pre></td></tr><tr><td data-num="306"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="307"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="308"></td><td><pre> <span class="token literal-property property">height</span><span class="token operator">:</span> item<span class="token punctuation">.</span>height<span class="token punctuation">,</span></pre></td></tr><tr><td data-num="309"></td><td><pre> <span class="token literal-property property">lineWidth</span><span class="token operator">:</span> <span class="token number">0</span></pre></td></tr><tr><td data-num="310"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="311"></td><td><pre> option<span class="token punctuation">.</span>series<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span></pre></td></tr><tr><td data-num="312"></td><td><pre> <span class="token literal-property property">name</span><span class="token operator">:</span> item<span class="token punctuation">.</span>name<span class="token punctuation">,</span></pre></td></tr><tr><td data-num="313"></td><td><pre> <span class="token literal-property property">data</span><span class="token operator">:</span> item<span class="token punctuation">.</span>data<span class="token punctuation">,</span></pre></td></tr><tr><td data-num="314"></td><td><pre> <span class="token literal-property property">type</span><span class="token operator">:</span> item<span class="token punctuation">.</span>type<span class="token punctuation">,</span></pre></td></tr><tr><td data-num="315"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'rgb(170, 70, 67)'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="316"></td><td><pre> <span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="317"></td><td><pre> <span class="token literal-property property">valueSuffix</span><span class="token operator">:</span> item<span class="token punctuation">.</span>unit<span class="token punctuation">,</span> <span class="token comment">// 数值后缀</span></pre></td></tr><tr><td data-num="318"></td><td><pre> <span class="token literal-property property">valueDecimals</span><span class="token operator">:</span> item<span class="token punctuation">.</span>valueDecimals <span class="token comment">// 提示框数据精度 (保留小数点后 3 位)</span></pre></td></tr><tr><td data-num="319"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="320"></td><td><pre> <span class="token literal-property property">yAxis</span><span class="token operator">:</span> item<span class="token punctuation">.</span>yAxisIndex<span class="token punctuation">,</span></pre></td></tr><tr><td data-num="321"></td><td><pre> <span class="token literal-property property">showInNavigator</span><span class="token operator">:</span> <span class="token boolean">false</span></pre></td></tr><tr><td data-num="322"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="323"></td><td><pre> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">'column'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="324"></td><td><pre> option<span class="token punctuation">.</span>yAxis<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span></pre></td></tr><tr><td data-num="325"></td><td><pre> <span class="token literal-property property">type</span><span class="token operator">:</span> item<span class="token punctuation">.</span>type<span class="token punctuation">,</span></pre></td></tr><tr><td data-num="326"></td><td><pre> <span class="token literal-property property">tickAmount</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token comment">// 规定坐标轴上的刻度总数</span></pre></td></tr><tr><td data-num="327"></td><td><pre> <span class="token literal-property property">startOnTick</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="328"></td><td><pre> <span class="token literal-property property">reversed</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//y 轴刻度反转</span></pre></td></tr><tr><td data-num="329"></td><td><pre> <span class="token literal-property property">showFirstLabel</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="330"></td><td><pre> <span class="token literal-property property">showLastLabel</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="331"></td><td><pre> <span class="token literal-property property">gridLineColor</span><span class="token operator">:</span> <span class="token string">'#ddd'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="332"></td><td><pre> <span class="token literal-property property">gridLineDashStyle</span><span class="token operator">:</span> <span class="token string">'Solid'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="333"></td><td><pre> <span class="token literal-property property">labels</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="334"></td><td><pre> <span class="token literal-property property">align</span><span class="token operator">:</span> <span class="token string">'right'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="335"></td><td><pre> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="336"></td><td><pre> <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="337"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#999999'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="338"></td><td><pre> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">12</span></pre></td></tr><tr><td data-num="339"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="340"></td><td><pre> <span class="token literal-property property">formatter</span><span class="token operator">:</span> item<span class="token punctuation">.</span>formatter<span class="token punctuation">,</span></pre></td></tr><tr><td data-num="341"></td><td><pre> <span class="token literal-property property">format</span><span class="token operator">:</span> <span class="token string">'{value}'</span> <span class="token operator">+</span> item<span class="token punctuation">.</span>unit <span class="token comment">// 坐标轴上的单位</span></pre></td></tr><tr><td data-num="342"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="343"></td><td><pre> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="344"></td><td><pre> <span class="token literal-property property">text</span><span class="token operator">:</span> item<span class="token punctuation">.</span>title<span class="token punctuation">,</span></pre></td></tr><tr><td data-num="345"></td><td><pre> <span class="token literal-property property">margin</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="346"></td><td><pre> <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="347"></td><td><pre> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#999999'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="348"></td><td><pre> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="349"></td><td><pre> <span class="token literal-property property">align</span><span class="token operator">:</span> <span class="token string">'middle'</span> <span class="token comment">// 坐标轴对齐方式（相对于坐标轴的值） 默认是：middle 居中对齐</span></pre></td></tr><tr><td data-num="350"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="351"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="352"></td><td><pre> <span class="token literal-property property">top</span><span class="token operator">:</span> item<span class="token punctuation">.</span>top<span class="token punctuation">,</span></pre></td></tr><tr><td data-num="353"></td><td><pre> <span class="token literal-property property">height</span><span class="token operator">:</span> item<span class="token punctuation">.</span>height<span class="token punctuation">,</span></pre></td></tr><tr><td data-num="354"></td><td><pre> <span class="token literal-property property">offset</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="355"></td><td><pre> <span class="token literal-property property">lineWidth</span><span class="token operator">:</span> <span class="token number">0</span></pre></td></tr><tr><td data-num="356"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="357"></td><td><pre> option<span class="token punctuation">.</span>series<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span></pre></td></tr><tr><td data-num="358"></td><td><pre> <span class="token literal-property property">name</span><span class="token operator">:</span> item<span class="token punctuation">.</span>name<span class="token punctuation">,</span></pre></td></tr><tr><td data-num="359"></td><td><pre> <span class="token literal-property property">type</span><span class="token operator">:</span> item<span class="token punctuation">.</span>type<span class="token punctuation">,</span></pre></td></tr><tr><td data-num="360"></td><td><pre> <span class="token literal-property property">data</span><span class="token operator">:</span> item<span class="token punctuation">.</span>data<span class="token punctuation">,</span></pre></td></tr><tr><td data-num="361"></td><td><pre> <span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="362"></td><td><pre> <span class="token function-variable function">pointFormatter</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></pre></td></tr><tr><td data-num="363"></td><td><pre> <span class="token keyword">return</span> <span class="token string">'<tr><td><li style="color: '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>color <span class="token operator">+</span> <span class="token string">';padding:0px;"></span> '</span> <span class="token operator">+</span> item<span class="token punctuation">.</span>name <span class="token operator">+</span></pre></td></tr><tr><td data-num="364"></td><td><pre> <span class="token string">': </li><div style="float: right;">'</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>y<span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>valueDecimals<span class="token punctuation">)</span> <span class="token operator">+</span> item<span class="token punctuation">.</span>unit <span class="token operator">+</span> <span class="token string">'</div></td></tr>'</span></pre></td></tr><tr><td data-num="365"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="366"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="367"></td><td><pre> <span class="token literal-property property">yAxis</span><span class="token operator">:</span> item<span class="token punctuation">.</span>yAxisIndex<span class="token punctuation">,</span></pre></td></tr><tr><td data-num="368"></td><td><pre> <span class="token literal-property property">showInNavigator</span><span class="token operator">:</span> <span class="token boolean">false</span></pre></td></tr><tr><td data-num="369"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="370"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="371"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="372"></td><td><pre><span class="token punctuation">}</span></pre></td></tr><tr><td data-num="373"></td><td><pre></pre></td></tr><tr><td data-num="374"></td><td><pre><span class="token comment">// 画图（container 为 div 的 id）</span></pre></td></tr><tr><td data-num="375"></td><td><pre>Highcharts<span class="token punctuation">.</span><span class="token function">stockChart</span><span class="token punctuation">(</span><span class="token string">'container'</span><span class="token punctuation">,</span> option<span class="token punctuation">)</span></pre></td></tr></table></figure><div class="tags"><a href="/tags/Highcharts/" rel="tag"><i class="ic i-tag"></i> Highcharts</a></div></div><footer><div class="meta"><span class="item"><span class="icon"><i class="ic i-calendar-check"></i> </span><span class="text">更新于</span> <time title="修改时间：2023-04-22 21:42:11" itemprop="dateModified" datetime="2023-04-22T21:42:11+08:00">2023-04-22</time> </span><span id="2023/01/10/Highcharts画收益概览/" class="item leancloud_visitors" data-flag-title="Highcharts 画收益概览" title="阅读次数"><span class="icon"><i class="ic i-eye"></i> </span><span class="text">阅读次数</span> <span class="leancloud-visitors-count"></span> <span class="text">次</span></span></div><div class="reward"><button><i class="ic i-heartbeat"></i> 赞赏</button><p>请我喝[茶]~(￣▽￣)~*</p><div id="qr"><div><img data-src="/images/wechatpay.png" alt="Hito Li 微信支付"><p>微信支付</p></div><div><img data-src="/images/alipay.png" alt="Hito Li 支付宝"><p>支付宝</p></div></div></div><div id="copyright"><ul><li class="author"><strong>本文作者： </strong>Hito Li <i class="ic i-at"><em>@</em></i>涛声依旧</li><li class="link"><strong>本文链接：</strong> <a href="https://hitoli.com/2023/01/10/Highcharts%E7%94%BB%E6%94%B6%E7%9B%8A%E6%A6%82%E8%A7%88/" title="Highcharts 画收益概览">https://hitoli.com/2023/01/10/Highcharts画收益概览/</a></li><li class="license"><strong>版权声明： </strong>本站所有文章除特别声明外，均采用 <span class="exturl" data-url="aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LW5jLXNhLzQuMC9kZWVkLnpo"><i class="ic i-creative-commons"><em>(CC)</em></i>BY-NC-SA</span> 许可协议。转载请注明出处！</li></ul></div></footer></article></div><div class="post-nav"><div class="item left"><a href="/2022/12/05/Win10%E5%BD%BB%E5%BA%95%E5%85%B3%E9%97%ADwsappx%E8%BF%9B%E7%A8%8B/" itemprop="url" rel="prev" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1gipesng5oej20zk0m87d4.jpg" title="Win10彻底关闭wsappx进程"><span class="type">上一篇</span> <span class="category"><i class="ic i-flag"></i> Windows</span><h3>Win10彻底关闭wsappx进程</h3></a></div><div class="item right"><a href="/2023/01/10/Vue%E6%A0%B9%E6%8D%AE%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82%E4%BF%AE%E6%94%B9%E9%A1%B5%E9%9D%A2%E6%95%B0%E6%8D%AE/" itemprop="url" rel="next" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1giciryrr3rj20zk0m8nhk.jpg" title="Vue根据路由传参修改页面数据"><span class="type">下一篇</span> <span class="category"><i class="ic i-flag"></i> Vue</span><h3>Vue根据路由传参修改页面数据</h3></a></div></div><div class="wrap" id="comments"></div></div><div id="sidebar"><div class="inner"><div class="panels"><div class="inner"><div class="contents panel pjax" data-title="文章目录"><ol class="toc"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%BC%95%E8%A8%80"><span class="toc-number">1.</span> <span class="toc-text">引言</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81"><span class="toc-number">2.</span> <span class="toc-text">代码</span></a></li></ol></div><div class="related panel pjax" data-title="系列文章"><ul><li class="active"><a href="/2023/01/10/Highcharts%E7%94%BB%E6%94%B6%E7%9B%8A%E6%A6%82%E8%A7%88/" rel="bookmark" title="Highcharts画收益概览">Highcharts画收益概览</a></li></ul></div><div class="overview panel" data-title="站点概览"><div class="author" itemprop="author" itemscope itemtype="http://schema.org/Person"><img class="image" itemprop="image" alt="Hito Li" data-src="/images/avatar.jpg"><p class="name" itemprop="name">Hito Li</p><div class="description" itemprop="description">天生我材必有用</div></div><nav class="state"><div class="item posts"><a href="/archives/"><span class="count">52</span> <span class="name">文章</span></a></div><div class="item categories"><a href="/categories/"><span class="count">22</span> <span class="name">分类</span></a></div><div class="item tags"><a href="/tags/"><span class="count">89</span> <span class="name">标签</span></a></div></nav><div class="social"><span class="exturl item weibo" data-url="aHR0cHM6Ly93ZWliby5jb20vdS8xMDYxNDYwNzQ1" title="https://weibo.com/u/1061460745"><i class="ic i-weibo"></i></span> <span class="exturl item douban" data-url="aHR0cHM6Ly93d3cuZG91YmFuLmNvbS9wZW9wbGUvMjU5Mzc2NTY0" title="https://www.douban.com/people/259376564"><i class="ic i-douban"></i></span> <span class="exturl item music" data-url="aHR0cHM6Ly9tdXNpYy4xNjMuY29tLyMvdXNlci9ob21lP2lkPTEwNTQ2NzQ2Mw==" title="https://music.163.com/#/user/home?id=105467463"><i class="ic i-cloud-music"></i></span> <a href="/about/me" title="about/me" class="item about"><i class="ic i-address-card"></i></a></div><ul class="menu"><li class="item"><a href="/" rel="section"><i class="ic i-home"></i>首页</a></li><li class="item"><a href="/about/me" rel="section"><i class="ic i-user"></i>关于</a></li><li class="item dropdown"><a href="javascript:void(0);"><i class="ic i-feather"></i>文章</a><ul class="submenu"><li class="item"><a href="/archives/" rel="section"><i class="ic i-list-alt"></i>归档</a></li><li class="item"><a href="/categories/" rel="section"><i class="ic i-th"></i>分类</a></li><li class="item"><a href="/tags/" rel="section"><i class="ic i-tags"></i>标签</a></li></ul></li><li class="item"><span class="exturl" data-url="aHR0cHM6Ly93d3cuZm9yZXZlcmJsb2cuY24vZ28uaHRtbA=="><i class="ic i-paper-plane"></i>虫洞</span></li></ul></div></div></div><ul id="quick"><li class="prev pjax"><a href="/2022/12/05/Win10%E5%BD%BB%E5%BA%95%E5%85%B3%E9%97%ADwsappx%E8%BF%9B%E7%A8%8B/" rel="prev" title="上一篇"><i class="ic i-chevron-left"></i></a></li><li class="up"><i class="ic i-arrow-up"></i></li><li class="down"><i class="ic i-arrow-down"></i></li><li class="next pjax"><a href="/2023/01/10/Vue%E6%A0%B9%E6%8D%AE%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82%E4%BF%AE%E6%94%B9%E9%A1%B5%E9%9D%A2%E6%95%B0%E6%8D%AE/" rel="next" title="下一篇"><i class="ic i-chevron-right"></i></a></li><li class="percent"></li></ul></div></div><div class="dimmer"></div></div></main><footer id="footer"><div class="inner"><div class="widgets"><div class="rpost pjax"><h2>随机文章</h2><ul><li class="item"><div class="breadcrumb"><a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/" title="分类于 极空间">极空间</a> <i class="ic i-angle-right"></i> <a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/Docker/" title="分类于 Docker">Docker</a></div><span><a href="/2022/10/21/%E6%9E%81%E7%A9%BA%E9%97%B4Docker%E7%89%88mariadb%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE/" title="极空间Docker版mariadb安装与配置">极空间Docker版mariadb安装与配置</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/%E7%94%9F%E6%B4%BB/" title="分类于 生活">生活</a> <i class="ic i-angle-right"></i> <a href="/categories/%E7%94%9F%E6%B4%BB/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/" title="分类于 技术分享">技术分享</a></div><span><a href="/2023/04/16/%E5%91%BD%E4%BB%A4%E5%A4%A7%E6%9D%82%E7%83%A9/" title="命令大杂烩">命令大杂烩</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/" title="分类于 极空间">极空间</a> <i class="ic i-angle-right"></i> <a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/Docker/" title="分类于 Docker">Docker</a> <i class="ic i-angle-right"></i> <a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/Docker/Hexo/" title="分类于 Hexo">Hexo</a></div><span><a href="/2022/09/17/Hexo-Theme-Shoka-algolia%E6%90%9C%E7%B4%A2%E8%B8%A9%E5%9D%91/" title="Hexo + Theme.Shoka + algolia搜索踩坑">Hexo + Theme.Shoka + algolia搜索踩坑</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/Windows/" title="分类于 Windows">Windows</a> <i class="ic i-angle-right"></i> <a href="/categories/Windows/%E5%B7%A5%E5%85%B7/" title="分类于 工具">工具</a></div><span><a href="/2022/11/01/360%E7%8B%AC%E7%AB%8B%E7%89%88%E5%B0%8F%E5%B7%A5%E5%85%B7/" title="360独立版小工具">360独立版小工具</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/%E5%B7%A5%E4%BD%9C/" title="分类于 工作">工作</a> <i class="ic i-angle-right"></i> <a href="/categories/%E5%B7%A5%E4%BD%9C/Vue/" title="分类于 Vue">Vue</a></div><span><a href="/2022/11/09/Vue%E6%8C%89%E7%8E%AF%E5%A2%83%E8%AE%BE%E7%BD%AE%E7%BC%96%E8%AF%91%E9%A1%B9%E7%9B%AE/" title="Vue按环境设置编译项目">Vue按环境设置编译项目</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/%E5%B7%A5%E4%BD%9C/" title="分类于 工作">工作</a> <i class="ic i-angle-right"></i> <a href="/categories/%E5%B7%A5%E4%BD%9C/Highcharts/" title="分类于 Highcharts">Highcharts</a></div><span><a href="/2023/01/10/Highcharts%E7%94%BB%E6%94%B6%E7%9B%8A%E6%A6%82%E8%A7%88/" title="Highcharts画收益概览">Highcharts画收益概览</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/Windows/" title="分类于 Windows">Windows</a> <i class="ic i-angle-right"></i> <a href="/categories/Windows/%E5%B7%A5%E5%85%B7/" title="分类于 工具">工具</a></div><span><a href="/2022/09/22/protobuf%E7%94%9F%E6%88%90js%E6%96%87%E4%BB%B6/" title="protobuf生成js文件">protobuf生成js文件</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/" title="分类于 极空间">极空间</a> <i class="ic i-angle-right"></i> <a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/Docker/" title="分类于 Docker">Docker</a></div><span><a href="/2022/09/16/%E6%9E%81%E7%A9%BA%E9%97%B4chevereto%E5%9B%BE%E5%BA%8Adocker%E7%89%88%E5%AE%89%E8%A3%85/" title="极空间chevereto图床docker版安装">极空间chevereto图床docker版安装</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/" title="分类于 极空间">极空间</a> <i class="ic i-angle-right"></i> <a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/Docker/" title="分类于 Docker">Docker</a> <i class="ic i-angle-right"></i> <a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/Docker/Hexo/" title="分类于 Hexo">Hexo</a></div><span><a href="/2023/07/01/shoka%E4%B8%BB%E9%A2%98%E9%80%9F%E5%BA%A6%E4%BC%98%E5%8C%96-%E6%8B%86%E5%88%86jsdelivr/" title="shoka主题速度优化-拆分jsdelivr">shoka主题速度优化-拆分jsdelivr</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/" title="分类于 极空间">极空间</a> <i class="ic i-angle-right"></i> <a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/Docker/" title="分类于 Docker">Docker</a></div><span><a href="/2022/10/20/%E6%9E%81%E7%A9%BA%E9%97%B4Docker%E7%89%88Wordpress%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE/" title="极空间Docker版Wordpress安装与配置">极空间Docker版Wordpress安装与配置</a></span></li></ul></div><div><h2>最新评论</h2><ul class="leancloud-recent-comment"></ul></div></div><div class="status"><div class="copyright">© 2010 – <span itemprop="copyrightYear">2023</span> <span class="with-love"><i class="ic i-sakura rotate"></i> </span><span class="author" itemprop="copyrightHolder">Hito Li @ ☆∵∴Hito∴∵★</span></div><div class="count"><span class="post-meta-item-icon"><i class="ic i-chart-area"></i> </span><span title="站点总字数">102k 字</span> <span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="ic i-coffee"></i> </span><span title="站点阅读时长">1:32</span></div><div class="powered-by">基于 <span class="exturl" data-url="aHR0cHM6Ly9oZXhvLmlv">Hexo</span> & Theme.<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2FtZWhpbWUvaGV4by10aGVtZS1zaG9rYQ==">Shoka</span></div></div></div></footer></div><script data-config type="text/javascript">var LOCAL={path:"2023/01/10/Highcharts画收益概览/",favicon:{show:"（●´3‘●）哎呀呀",hide:"(´Д｀)真糟糕！"},search:{placeholder:"文章搜索",empty:"关于 「 ${query} 」，什么也没搜到",stats:"${time} ms 内找到 ${hits} 条结果"},valine:!0,fancybox:!0,copyright:'复制成功，转载请遵守 <i class="ic i-creative-commons"></i>BY-NC-SA 协议。',ignores:[function(e){return e.includes("#")},function(e){return new RegExp(LOCAL.path+"$").test(e)}]}</script><script src="https://nas.hitoli.com:18003/assets/polyfill.js"></script><script src="https://nas.hitoli.com:18003/assets/pace.min.js"></script><script src="https://nas.hitoli.com:18003/assets/pjax.min.js"></script><script src="https://nas.hitoli.com:18003/assets/fetch.umd.js"></script><script src="https://nas.hitoli.com:18003/assets/anime.min.js"></script><script src="https://nas.hitoli.com:18003/assets/algoliasearch-lite.umd.min.js"></script><script src="https://nas.hitoli.com:18003/assets/instantsearch.production.min.js"></script><script src="https://nas.hitoli.com:18003/assets/lozad.min.js"></script><script src="https://nas.hitoli.com:18003/assets/quicklink.umd.min.js"></script><script src="https://nas.hitoli.com:18003/assets/jquery.min.js,jquery.fancybox.min.js,jquery.justifiedGallery.min.js" async></script><script src="https://nas.hitoli.com:18003/assets/MiniValine.min.js"></script><script src="https://nas.hitoli.com:18003/assets/copy-tex.min.js" async></script><script src="https://nas.hitoli.com:18003/assets/frappe-charts.min.iife.js"></script><script src="/js/app.js?v=0.0.0"></script></body></html> |