Skip to content

Commit

Permalink
feat: adjust default pointer & remove jqeury
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lellansin
Lellansin committed Apr 15, 2020
1 parent 0ef9c41 commit 6fad95e
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 24 deletions.
2 changes: 1 addition & 1 deletion about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ <h3 id="hkmUV" style="padding: 7px 0px; margin: 0px; font-weight: 700; font-size
<p style="font-size: 14px; color: rgb(38, 38, 38); line-height: 1.74; letter-spacing: 0.05em; outline-style: none; overflow-wrap: break-word; margin: 0px;"><br></p>
<p style="font-size: 14px; color: rgb(38, 38, 38); line-height: 1.74; letter-spacing: 0.05em; outline-style: none; overflow-wrap: break-word; margin: 0px;">Node.js 开发者报告的诞生源自于改善国内 Node.js 开发者生态的现状。基于这一点，我们在 2020 年第一次发起了 Node.js 开发者报告调查。</p>
<p style="font-size: 14px; color: rgb(38, 38, 38); line-height: 1.74; letter-spacing: 0.05em; outline-style: none; overflow-wrap: break-word; margin: 0px;"><br></p>
<p style="font-size: 14px; color: rgb(38, 38, 38); line-height: 1.74; letter-spacing: 0.05em; outline-style: none; overflow-wrap: break-word; margin: 0px;">第一次调查的目的是为了系统的了解国内 Node.js 生态的现状，根据第一年的报告数据，后期组织会调整问卷内容以及统计方式。问卷内容后面会 host 在 Github 开源组织上由组织成员日常运营，欢迎社区同学来 PR。</p>
<p style="font-size: 14px; color: rgb(38, 38, 38); line-height: 1.74; letter-spacing: 0.05em; outline-style: none; overflow-wrap: break-word; margin: 0px;">第一次调查的目的是为了系统地了解国内 Node.js 生态的现状，根据第一年的报告数据，后期组织会调整问卷内容以及统计方式。问卷内容后面会 host 在 Github 开源组织上由组织成员日常运营，欢迎社区同学来 PR。</p>
<p style="font-size: 14px; color: rgb(38, 38, 38); line-height: 1.74; letter-spacing: 0.05em; outline-style: none; overflow-wrap: break-word; margin: 0px;"><span><br></span></p>
<h3 id="eBDsK" style="padding: 7px 0px; margin: 0px; font-weight: 700; font-size: 20px; line-height: 28px;">加入我们</h3>
<p style="font-size: 14px; color: rgb(38, 38, 38); line-height: 1.74; letter-spacing: 0.05em; outline-style: none; overflow-wrap: break-word; margin: 0px;"><br></p>
Expand Down
80 changes: 57 additions & 23 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
<!-- 引入 ECharts 文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
<script src="https://gallerybox.echartsjs.com/dep/echarts/map/js/china.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
function setChart(id, idx = 1, title, list) {
const chart = echarts.init(document.getElementById(id));
Expand Down Expand Up @@ -103,16 +102,13 @@
chart.setOption(getPie(idx));
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: 1
seriesIndex: list.length,
dataIndex: 0
});
});
}
</script>
<style>
/* h1, h2, h3, h4, h5 {
border-bottom: 1px solid var(--border-color);
} */
h3 { padding: 7px 0px; margin: 0px; font-weight: 700; font-size: 20px; line-height: 28px; }
h4 { padding: 7px 0px; margin: 0px; font-weight: 700; font-size: 16px; line-height: 24px; }
h3 a, h4 a { text-decoration: none; color: black; }
Expand Down Expand Up @@ -193,11 +189,11 @@ <h4 id="人物来源"><a href="#人物来源"><svg viewBox="0 0 16 16" version="
radius: '55%',
center: ['40%', '50%'],
data: [
{name: '<22 岁 (10.2%)', value: 111},
{name: '22~24 岁 (26.1%)', value: 284},
{name: '25~27 岁 (29.14%)', value: 317, selected: true},
{name: '28~32 岁 (24.27%)', value: 269},
{name: '>32 岁 (9.84%)', value: 107}
{name: '<22 岁 (10.33%)', value: 115},
{name: '22~24 岁 (26.24%)', value: 292},
{name: '25~27 岁 (29.2%)', value: 325, selected: true},
{name: '28~32 岁 (24.53%)', value: 273},
{name: '>32 岁 (9.7%)', value: 108}

],
}
Expand Down Expand Up @@ -287,12 +283,17 @@ <h4 id="人物来源"><a href="#人物来源"><svg viewBox="0 0 16 16" version="

<div id="canvas-cities" style="width: 600px;height:400px; margin-top: 20px;"></div>
<script type="text/javascript">
echarts.init(document.getElementById('canvas-cities')).setOption({
const citiesChart = echarts.init(document.getElementById('canvas-cities'))
citiesChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: (params) => {
const [item] = params.filter((item) => item.value);
return (item.value / 1113 * 100).toFixed(2) + '%';
}
},
legend: {
data: ['城市', '其他城市', '移动办公', '海外']
Expand Down Expand Up @@ -350,13 +351,20 @@ <h4 id="人物来源"><a href="#人物来源"><svg viewBox="0 0 16 16" version="
data: [undefined, 10]
}]
});
setTimeout(function(){
citiesChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: 10
});
}, 100);
</script>

<p class='line'><br></p>
<h4 id="职业简历"><a href="#职业简历"><svg viewBox="0 0 16 16" version="1.1" width="16" height="16" class="anchor-icon"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a> 职业简历</h4>
<p class='line'><br></p>
<ul lake-indent="0" class="list">
<li>典型的受访者来自两种公司，分别是是百人左右的小型公司，以及 5k 人以上的大公司。</li>
<li>典型的受访者来自两种公司，分别是百人左右的小型公司，以及 5k 人以上的大公司。</li>
<li>他们通常是 7 人左右的团队内的前端或者全栈工程师。</li>
</ul>
<p class='line'><br></p>
Expand Down Expand Up @@ -987,7 +995,8 @@ <h4 id="配置方式"><a href="#配置方式"><svg viewBox="0 0 16 16" version="

<div id="canvas-cfg" style="width: 700px;height:300px; margin-top: 0px;"></div>
<script type="text/javascript">
echarts.init(document.getElementById('canvas-cfg')).setOption({
const cfgChart = echarts.init(document.getElementById('canvas-cfg'));
cfgChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
Expand Down Expand Up @@ -1023,6 +1032,13 @@ <h4 id="配置方式"><a href="#配置方式"><svg viewBox="0 0 16 16" version="
data: [876, 670, 288, 186]
}]
});
setTimeout(function(){
cfgChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: 0
});
}, 1000);
</script>


Expand Down Expand Up @@ -1184,7 +1200,8 @@ <h4 id="操作系统"><a href="#操作系统"><svg viewBox="0 0 16 16" version="
<div id="canvas-os" style="width: 700px; height:150px; margin-top: 0px;"></div>
<script type="text/javascript">
const osData = { Linux: 958, MacOS: 236, Windows: 204 };
echarts.init(document.getElementById('canvas-os')).setOption({
const osChart = echarts.init(document.getElementById('canvas-os'));
osChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
Expand Down Expand Up @@ -1221,6 +1238,13 @@ <h4 id="操作系统"><a href="#操作系统"><svg viewBox="0 0 16 16" version="
data: Object.keys(osData).map((key) => osData[key])
}]
});
setTimeout(function(){
osChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: 0
});
}, 1000);

</script>

Expand Down Expand Up @@ -1395,7 +1419,7 @@ <h4 id="反向代理"><a href="#反向代理"><svg viewBox="0 0 16 16" version="
<p class='line'><br></p>
<ul lake-indent="0" class="list">
<li>Noder 们对于反向代理的概念是约等于 Nginx 的。</li>
<li>使用反向代理的基本都会使用 Nginx。</li>
<li>使用反向代理的基本都会使用 Nginx （由于多选的原因百分比会超过 100%）。</li>
<li>越大的公司越倾向于使用反向代理。</li>
</ul>
<p class='line'><br></p>
Expand Down Expand Up @@ -1689,8 +1713,7 @@ <h4 id="版本"><a href="#版本"><svg viewBox="0 0 16 16" version="1.1" width="
type: 'pie',
radius: '55%',
center: ['50%', '40%'],
data: Object.keys(verData).map((name) => ({ name, value: verData[name]}))
,
data: Object.keys(verData).map((name) => ({ name, value: verData[name]})),
emphasis: {
itemStyle: {
shadowBlur: 10,
Expand Down Expand Up @@ -2153,7 +2176,13 @@ <h4 id="生态期望"><a href="#生态期望"><svg viewBox="0 0 16 16" version="
legend: {},
tooltip: {
trigger: 'axis',
showContent: false
axisPointer: {
type: 'shadow'
},
formatter: (params) => {
const [item] = params.filter((item) => item.value);
return (item.value / 1113 * 100).toFixed(2) + '%';
}
},
dataset: {
source: [
Expand Down Expand Up @@ -2253,6 +2282,11 @@ <h4 id="生态期望"><a href="#生态期望"><svg viewBox="0 0 16 16" version="
ecoChart.setOption(option);
setTimeout(function() {
ecoChart.setOption(getEcoPie(2));
ecoChart.dispatchAction({
type: 'showTip',
seriesIndex: 5,
dataIndex: 0
});
});
</script>
<p class='line'><br></p>
Expand Down

0 comments on commit 6fad95e

Please sign in to comment.