Ellie's Blog
0%

發表於

版權聲明

本篇是將文章內容整理濃縮，作為學習之用，下文會一一附上原文連結，如有侵權，經告知之後會立即撤下

引用文章

ECharts 饼图

筆記

使用注意

  • 數值加起來不一定是整數
    • 會自己計算比例
  • 設定樣式
    • 放在 series : [{ }]裡面

radius: ‘55%’,

  • 半徑 可视区尺寸（容器高宽中较小一项）的 55% 长度。

roseType: ‘angle’,

  • 把饼图显示成南丁格尔图。

pic

itemStyle

  • 参数可以设置诸如阴影、透明度、颜色、边框颜色、边框宽度等：
1
2
3
4
5
6
itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }

實踐筆記

範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
option = {
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '55%',
      data: [
        { value: 235, name: '视频广告' },
        { value: 274, name: '联盟广告' },
        { value: 310, name: '邮件营销' },
        { value: 335, name: '直接访问' },
        { value: 400, name: '搜索引擎' },
      ],
      roseType: 'angle',
      itemStyle: {
        normal: {
          shadowBlur: 200,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
};

6/29 ECharts 饼图

發表於

版權聲明

本篇是將文章內容整理濃縮，作為學習之用，下文會一一附上原文連結，如有侵權，經告知之後會立即撤下

引用文章

ECharts 异步加载数据

Documentation - Apache ECharts

jQuery ajax - get() 方法

筆記

*数据的动态更新 - 使用 ajax - get() 方法****

  • 拿到資料之後就載入圖表

pic

loading 效果

  • 加載之前 开启 loading 效果

    1
    2
    var myChart = echarts.init(document.getElementById('main'));
    myChart.showLoading(); // 加載之前 开启 loading 效果

  • 加載完之後 隐藏 loading 效果

    1
    2
    3
    4
    5
    6
    7
    8
    9
    $.get(
      'http://www.runoob.com/static/js/echarts_test_data.json',
      function (data) {
        myChart.hideLoading(); // 加載完之後 隐藏 loading 效果

        myChart.setOption();
      },
      'json'
    );

範例 每秒鐘更新一次圖表

ECharts 异步加载数据

  • 詳情 請看內文
    pic

實踐筆記

6/28 ECharts 异步加载数据 1

發表於

版權聲明

本篇是將文章內容整理濃縮，作為學習之用，下文會一一附上原文連結，如有侵權，經告知之後會立即撤下

引用文章

Documentation - Apache ECharts

echart 從 0 到 1_copyLeft - MdEditor

筆記

基礎

6/30 ECharts 数据集（dataset）-基礎

pic

  • 提供一份数据。
    pic
  • 声明一个 X 轴，类目轴（category）。
    • 默认情况下，类目轴对应到 dataset 第一列。
    • 也就是 [‘product’, ‘2015’, ‘2016’, ‘2017’],
      pic–.png)
  • 声明一个 Y 轴，
    • 数值轴。
  • 設定 series 的類型
    • 對應到上面 X 軸的年份
      pic

数据设置在  系列（series）中

  • X 軸設定欄位
    pic
  • 数据设置在   系列（series）中
    pic
    pic

数据设置在  数据集（dataset）中

  • 能够贴近数据可视化常见思维方式：
    • （I）提供数据，（II）指定数据到视觉的映射，从而形成图表。
    • 有點像是 EXCEL 表格的感覺
  • 数据和其他配置可以被分离开来。数据常变，其他配置常不变。分开易于分别管理。
    • 跟Ｙ、Ｘ軸的設定可以分開寫
    • 不會雜亂
  • 数据可以被多个系列或者组件复用，对于大数据量的场景，不必为每个系列创建一份数据。
  • 支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
option = {
  legend: {},
  tooltip: {},
  dataset: {
    // 提供一份数据。
    source: [
      ['product', '2015', '2016', '2017'], //X軸
      ['Matcha Latte', 43.3, 85.8, 93.7],
      //對應到上面['product', '2015', '2016', '2017']
      // EX: Matcha Latte 2015年的數量是43.3
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1],
    ],
  },
  // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
  xAxis: { type: 'category' },
  // 声明一个 Y 轴，数值轴。
  yAxis: {},
  // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
};
  • 很像 EXCEL 格式
    pic

使用 dimensions — 常见的“对象数组”的格式

6/30 ECharts 数据集（dataset）-使用 dimensions - 常见的”对象数组”的格式

  • 用 dimensions 指定了维度的顺序
    1
    dimensions: ['product', '2015', '2016', '2017'],
  • 默认把第一个维度(product)映射到 X 轴上，后面维度映射到 Y 轴上。
    1
    2
    3
    4
    5
    6
    source: [
      { product: 'Matcha Latte', 2015: 43.3, 2016: 85.8, 2017: 93.7 },
      { product: 'Milk Tea', 2015: 83.1, 2016: 73.4, 2017: 55.1 },
      { product: 'Cheese Cocoa', 2015: 86.4, 2016: 65.2, 2017: 82.5 },
      { product: 'Walnut Brownie', 2015: 72.4, 2016: 53.9, 2017: 39.1 },
    ];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
option = {
  legend: {},
  tooltip: {},
  dataset: {
    // 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
    // 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。

    dimensions: ['product', '2015', '2016', '2017'],
    source: [
      { product: 'Matcha Latte', 2015: 43.3, 2016: 85.8, 2017: 93.7 },
      { product: 'Milk Tea', 2015: 83.1, 2016: 73.4, 2017: 55.1 },
      { product: 'Cheese Cocoa', 2015: 86.4, 2016: 65.2, 2017: 82.5 },
      { product: 'Walnut Brownie', 2015: 72.4, 2016: 53.9, 2017: 39.1 },
    ],
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
};
  • 很像 EXCEL 格式
    pic

*把数据集（ dataset ）的行或列映射为系列（series）****

6/30 ECharts 数据集 -把数据集（ dataset ）的行或列映射为系列（series）

  • xAxis

    • 有兩個 X 軸 ((兩個 grid
      1
      2
      3
      4
      xAxis: [
          { type: 'category', gridIndex: 0 },//對應到第一列 ['product', '2012', '2013', '2014', '2015'],
          { type: 'category', gridIndex: 1 } //對應到第一行  'Matcha Latte' 'Milk Tea' 'Cheese Coco
        ],
      pic

  • yAxis

    1
    2
    yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],

pic

  • grid
    • 欄 /分組
    • grid: [{ bottom: ‘55%’ }, { top: ‘55%’ }],
      • 設定第 0 個 grid 距離底部 55%
      • 第 1 個 grid 距離 top 55%
  • series
    • 上面的 grid
      1
      2
      3
      4
      //每个系列对应到 dataset 的每一行。
      { type: 'bar', seriesLayoutBy: 'row' },
      { type: 'bar', seriesLayoutBy: 'row' },
      { type: 'bar', seriesLayoutBy: 'row' },
    • 下面的 grid
      1
      2
      3
      4
      5
      6
      // 每个系列对应到 dataset 的每一列。
      //使用的數據是X軸的gridIndex: 1
          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }

seriesLayoutBy

  • 用甚麼分組 ?
    • 我的 data

pic

  • seriesLayoutBy: row
    • 用第一列分組
      pic
  • seriesLayoutBy: column
    • 用 column 分組
      pic

series.encode 属性将对应的数据映射到坐标轴（如 X、Y 轴）

6/30 ECharts 数据集 -series.encode 属性将对应的数据映射到坐标轴（如 X、Y 轴）

pic

pic

visualMap 进行视觉通道的映射

6/30 ECharts 数据集 -visualMap 进行视觉通道的映射

  • 用來看看比例的
    pic
  • 可調整的:
    • symbol: 图元的图形类别。
    • symbolSize: 图元的大小。
    • color: 图元的颜色。
    • colorAlpha: 图元的颜色的透明度。
    • opacity: 图元以及其附属物（如文字标签）的透明度。
    • colorLightness: 颜色的明暗度。
    • colorSaturation: 颜色的饱和度。
    • colorHue: 颜色的色调。

**交互联动 多个图表共享一个 dataset**

6/30 ECharts 数据集 -交互联动 多个图表共享一个 dataset

pic

發表於

版權聲明

本篇是將文章內容整理濃縮，作為學習之用，下文會一一附上原文連結，如有侵權，經告知之後會立即撤下

引用文章

ECharts 配置语法

Documentation - Apache ECharts

實踐筆記

  • 練習載入 第一個頁面
    6/28 echarts first

  • 最簡單的圖表 範例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    var option = {
      title: {
        text: 'ECharts 数据统计',
      },
      tooltip: {},
      legend: {
        data: ['用户来源'],
      },
      xAxis: {
        data: ['Android', 'IOS', 'PC', 'Ohter'],
      },
      yAxis: {},
      series: [
        {
          name: '访问量',
          type: 'line',
          data: [500, 200, 360, 100],
        },
      ],
    };
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chartmain'));

    //使用制定的配置项和数据显示图表
    myChart.setOption(option);

筆記

  • ECharts 特性
    • 丰富的可视化类型:
      • 提供了常规的折线图、柱状图、散点图、饼图、K 线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，
    • 多种数据格式无需转换直接使用:
      • 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，此外还支持输入 TypedArray 格式的数据。
    • 移动端优化:
      • 针对移动端交互做了细致的优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。
    • 多渲染方案，跨平台使用:
      • 支持以 Canvas、SVG（4.0+）、VML 的形式渲染图表。
    • 深度的交互式数据探索:
      • 提供了 图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件，可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作
    • 动态数据:
      • 数据的改变驱动图表展现的改变。

通过以下几种方式获取 Apache ECharts

标题

1
2
3
title: {
  text: '第一个 ECharts 实例';
}

提示信息

1
tooltip: {},

图例组件

1
2
3
4
5
6
7
8
9
10
11
12
13
legend: {
  data: [
    {
      name: '系列1',
      // 强制设置图形为圆。
      icon: 'circle',
      // 设置文本为红色
      textStyle: {
        color: 'red',
      },
    },
  ];
}

X 轴

1
2
3
xAxis: {
  data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'];
}

Y 轴

1
2
yAxis: {
}

系列列表

1
2
3
4
5
6
7
series: [
  {
    name: '销量', // 系列名称
    type: 'bar', // 系列图表类型
    data: [5, 20, 36, 10, 10, 20], // 系列中的数据内容
  },
];

圖表類型

  • **type: ‘bar’**：柱状/条形图
  • **type: ‘line’**：折线/面积图
  • **type: ‘pie’**：饼图
  • **type: ‘scatter’**：散点（气泡）图
  • **type: ‘effectScatter’**：带有涟漪特效动画的散点（气泡）
  • **type: ‘radar’**：雷达图
  • **type: ‘tree’**：树型图
  • **type: ‘treemap’**：树型图
  • **type: ‘sunburst’**：旭日图
  • **type: ‘boxplot’**：箱形图
  • **type: ‘candlestick’**：K 线图
  • **type: ‘heatmap’**：热力图
  • **type: ‘map’**：地图
  • **type: ‘parallel’**：平行坐标系的系列
  • **type: ‘lines’**：线图
  • **type: ‘graph’**：关系图
  • **type: ‘sankey’**：桑基图
  • **type: ‘funnel’**：漏斗图
  • **type: ‘gauge’**：仪表盘
  • **type: ‘pictorialBar’**：象形柱图
  • **type: ‘themeRiver’**：主题河流
  • **type: ‘custom’**：自定义系列

發表於 更新於

版權聲明

本篇是將文章內容整理濃縮，作為學習之用，下文會一一附上原文連結，如有侵權，經告知之後會立即撤下

引用文章

ECharts 样式设置

Documentation - Apache ECharts

實踐筆記

6/29 ECharts 样式设置

筆記

設定主題的方法

  • 颜色主题（Theme）
  • 调色盘
  • 直接样式设置（itemStyle、lineStyle、areaStyle、label、…）
  • 视觉映射（visualMap）

加載颜色主题的方法 1

1
var chart = echarts.init(dom, 'light');

加載颜色主题的方法 2

  • JS 主题代码保存一个  主题名.js  文件

  • 然后在 HTML 中引用该文件，

    1

  • 最后在代码中使用该主题

    • init 的時候添加屬性
      1
      var myChart = echarts.init(document.getElementById('main'), 'wonderland'); // dark 可尝试修改为 light

调色盘

直接的样式设置

高亮的样式：emphasis

發表於

版權聲明

本篇是將文章內容整理濃縮，作為學習之用，下文會一一附上原文連結，如有侵權，經告知之後會立即撤下

引用文章

:nth-child() & :nth-last-child() - 你覺得燒腦但其實根本不燒腦的選取器

筆記

6/17 :nth-child 的寫法細節

1
2
3
4
5
6
7
8
9
10
11
//對li
//對ul > div無效
li:nth-child(odd) {
  background-color: black;
}
//對ul的子代
//對ul > div有效
//而且排序照算
ul :nth-child(even) {
  background-color: firebrick;
}

發表於

版權聲明

本篇是將文章內容整理濃縮，作為學習之用，下文會一一附上原文連結，如有侵權，經告知之後會立即撤下

引用文章

sass 命名變數 快速提示 模組化命名 SASS 變數

Sass 的顏色變數命名方式

筆記

怎樣是好的命名方式?

  • 這是我看完文章後的總結 有不準確之處煩請指教
  • 大範圍的寫出特徵 方便查找
  • 例如: 命名顏色
    • 用在哪裡 boder
    • 會出現的通用字 color
    • 想要的顏色 blue
    • 想要深淺 light

命名顏色 怎樣才不會混亂?

  • 先命名 顏色
    • RGBA 變成 敘述
    • #AEB8C3 變成 $color-light-gray
  • 應用到元件
    • $boder-color: $color-light-gray

常見的變數名稱 -針對元件

Sass 變數(Variables)

1
2
3
4
5
6
7
8
9
$theme-color: #fff;
$text-color: black;
$table-color: rgba(0, 0, 0, .25);
$link-hover-color: darken(#fff,20%);

$font-md：18px-2px;
$font-lg: 16px * 1.5 ;
$font-lg: $font-md * 1.5 ;

常見的變數名稱- 針對顏色

1
2
3
4
5
6
7
8
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-900 !default;

參考bootstrap 實用的變數名稱

bootstrap/_variables.scss at main · twbs/bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$body-bg: $white !default;
$body-color: $gray-900 !default;
$body-text-align: null !default;

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px,
) !default;

$border-widths: (
  1: 1px,
  2: 2px,
  3: 3px,
  4: 4px,
  5: 5px,
) !default;

$font-size-root: null !default;
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$font-size-sm: $font-size-base * 0.875 !default;
$font-size-lg: $font-size-base * 1.25 !default;

$h1-font-size: $font-size-base * 2.5 !default;
$h2-font-size: $font-size-base * 2 !default;
$h3-font-size: $font-size-base * 1.75 !default;
$h4-font-size: $font-size-base * 1.5 !default;
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;

發表於

版權聲明

本篇是將文章內容整理濃縮，作為學習之用，下文會一一附上原文連結，如有侵權，經告知之後會立即撤下

引用文章

快速了解 HTML 語意化標籤

鼠年全馬鐵人挑戰 WEEK 07:優化 SEO- 語意化標籤！讓別人看懂你在寫什麼！

筆記

主要的標籤 &圖示

1.header：網頁的標頭，通常放置網站標題。

2.nav：網頁的選單、導覽。

3.main：網頁的主要內容。

4.aside：網頁的側欄、附加內容。

5.article：一篇文章內容。

6.section：自訂的區塊，例如數篇摘要組成的空間。

7.footer：網頁的頁尾，通常放置聯絡方式、著作權宣告等等。

8.mark：強調一小塊內容。

9.time：顯示日期時間。

其他語義化標籤

快速了解 HTML 語意化標籤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<mark>

如黃色螢光筆的方式畫出重點，強調一小塊內容

<details>

描述文章的細節

<figure><figcaption>

<figure>用於圖像，<figcaption>用於圖像標題

<hgroup>

當內容有主標題及次標題等多個標題的狀況下使用。

<cite>

引用其他文獻或作品(例如書籍、歌曲、電影、繪畫、雕塑等）的標題

發表於

版權聲明

本篇是將文章內容整理濃縮，作為學習之用，下文會一一附上原文連結，如有侵權，經告知之後會立即撤下

筆記

這篇是把我會用的插件集結起來

12 個前端愛用的 VSCode 擴充套件

12 個前端愛用的 VSCode 擴充套件

  • Better Comment
  • Bracket Pair Colorizer
    • 已經內建到 VS
  • indent-rainbow
  • Prettier
  • VSCode 中文化
  • Code Spell Checker
  • Live Server
  • favorites
    • 能夠讓將專案中的特定檔案、資料夾存到我的最愛
  • Polacode
    • 快速產生用於貼文的圖片
  • Import Cost
    • 計算  @import  或  require  的外部資源尺寸

VS Code 必备插件推荐

VS Code 必备插件推荐-阿里云开发者社区

  • Auto Close Tag 自动添加 HTML / XML 关闭标签

  • Auto Rename Tag 自动重命名配对的 HTML / XML 标签

  • HTML Snippets 代码自动填充

  • Image Preview 鼠标移到路径里显示图像预览

  • Debugger for Chrome 前端调试, 查看使用方法

  • ESLintEsLint 可以帮助我们检查 Javascript 编程时的语法错误。

  • Git History 以图表的形式查看 git 日志

  • JavaScript (ES6) code snippetses6 代码片段

  • SVG Viewer 此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序

  • VeturVue 语法高亮显示, 语法错误检查, 代码自动补全

  • vscode-fileheader 顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时間

10 款 VS Code 插件神器，第 7 款超级实用！

10 款 VS Code 插件神器，第 7 款超级实用！

    1. Codelf
    • 命名
    • 它通过搜索 GitHub, Bitbucket, GitLab 来找到真实的使用变量名，为你提供一些高频使用的词汇，同时为你标明使用的语言、代码链接。

  • local history

    • 每当我们保存更改时，它都会备份一份历史文件，当我们需要恢复之前版本时，只需要点击一下对应的文件即可。

  • TODO Tree

    • 某块代码需要以后进一步完善，如果能够给它做一个标记，那么后续定位到对应位置是一件非常轻松高效的事情。
    • 可以实现标签高亮
      ，还可以在活动栏添加一个选项卡，它能够以不同视图展示我们标记的位置，

  • vscode-icons

  • Better Align

    • 代码的上下对齐
    • 它能够用冒号（：）、赋值（=，+=，-=，*=，/=）和箭头（=>）对齐代码。

  • Partial Diff

    • 文件比较
      是一种即常用有实用的一项功能，例如，我们想查看哪里修改了代码、查看输出的日志信息有什么区别等等

  • change-case

    • 驼峰轉下划线 反之也可以

VSCode 必裝套件

VSCode 必裝套件 - HackMD

  • Chinese Lorem
  • AutoFileName
  • Git Graph

其他

Preview on Web Server

Preview on Web Server - Visual Studio Marketplace

發表於

版權聲明

本篇是將文章內容整理濃縮，作為學習之用，下文會一一附上原文連結，如有侵權，經告知之後會立即撤下

引用文章

【狀況題】有些檔案我不想放在 Git 裡面… - 為你自己學 Git | 高見龍

.gitignore not ignoring package.json

心得

  • 看完教學文章後自己實驗
    • 先提出疑問
    • 列出實驗步驟
    • 可以比較各種作法的差距
    • 最後集結成文章

筆記

.gitignore 檔案寫法

【狀況題】有些檔案我不想放在 Git 裡面… - 為你自己學 Git | 高見龍

1
2
3
4
5
6
7
8
9
10
11
12
13

# 忽略 secret.yml 檔案
secret.yml

#忽略 A資料夾 之下所有的檔案都會忽略
/A

# 忽略 config 目錄下的 database.yml 檔案
config/database.yml

# 忽略所有附檔名是 .tmp 的檔案
*.tmp

[比較] .gitignore 會真的忽略的檔案

.gitignore 自己使用過後的總結

  • 因為有下載**Local History 插件**
  • 就算其他東西不便 .gitignore 裡面的東西改變 就可以 commit
  • 加入.gitignore 在 VScode 會顯示灰色