echartsDay01 echarts 繪圖流程顏色主題切換canvas 和svg echarts基本概念組件組件定位座標系

0x00 Echart 繪圖流程

引入js庫
編寫繪圖容器
獲取繪圖容器Dom對象
將Dom對象傳入，初始化chart對象
配置chart對象

入門案例：

代碼：

<!--
 * @Author: your name
 * @Date: 2020-07-03 12:33:40
 * @LastEditTime: 2020-07-03 12:44:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /css/test-echarts.html
--> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
    <style>
        .chart{
            width:800px;
            height:400px;
        }
    </style>
</head>
<body>
    <!-- 容器組件 -->
    <div class='chart' id='chart'></div>  
    <script>
        const chartDom = document.getElementById('chart');
        const chart = echarts.init(chartDom);
        chart.setOption({
           title:{
                text:'ECharts入門案例',
           },
           //x軸
           xAxis:{
               data:['食品','數碼','服飾','箱包']
           },
           //y軸
           yAxis:{},
           //數據和圖標類型
           series:{
               type:'bar',//bar表示柱狀圖
               data:[100,200,90,150]
           }
        });
    </script>
</body>
</html>

0x01 顏色主題

Echarts4內置的兩種主題

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

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

其他的主題，沒有內置在 ECharts 中，需要自己加載。這些主題可以在主題編輯器（https://www.echartsjs.com/theme-builder/）裏訪問到。也可以使用這個主題編輯器，自己編輯主題。下載下來的主題可以這樣使用：

保存爲js文件，然後直接輸入主題的名字即可。

const chart = echarts.init(chartDom,'purple-passion');

0x02 使用 Canvas 或者 SVG 渲染

默認爲canvas，可以修改爲svg

// 使用 Canvas 渲染器（默認）
var chart = echarts.init(containerDom, null, {renderer: 'canvas'});
// 等價於：
var chart = echarts.init(containerDom);

// 使用 SVG 渲染器
var chart = echarts.init(containerDom, null, {renderer: 'svg'});

頻繁更新動畫：選擇canvas

大屏顯示：選擇svg

0x03 ECharts 基本概念

#系列：一組數值（可以理解爲數組）映射成對應的圖

一個 系列 包含的要素至少有：一組數值、圖表類型（series.type）、以及其他的關於這些數據如何映射成圖的參數。

echarts 裏系列類型（series.type）就是圖表類型。系列類型（series.type）至少有：line（折線圖）、bar（柱狀圖）、pie（餅圖）、scatter（散點圖）、graph（關係圖）、tree（樹圖）、...

如下圖，右側的 option 中聲明瞭三個 系列（series）：pie（餅圖系列）、line（折線圖系列）、bar（柱狀圖系列），每個系列中有他所需要的數據（series.data）。

demo：

一個座標系中繪製多個系列：

<!--
 * @Author: your name
 * @Date: 2020-07-03 12:33:40
 * @LastEditTime: 2020-07-03 13:57:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /css/test-echarts.html
--> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
    <script src='theme.js'></script>
    <style>
        .chart{
            width:800px;
            height:400px;
        }
    </style>
</head>
<body>
    <!-- 容器組件 -->
    <div class='chart' id='chart'></div>  
    <script>
        const chartDom = document.getElementById('chart');
        const chart = echarts.init(chartDom,'purple-passion',{renderer:'svg'});
        chart.setOption({
           title:{
                text:'ECharts多系列案例',
           },
           //x軸
           xAxis:{
               data:['一季度','二季度','三季度','四季度']
           },
           //y軸
           yAxis:{},
           //數據和圖標類型
           series:[
           {
            type:'pie',
            center:['65%',60], //距離左側百分之65，距離上側60px
            radius:35,
            data:[
                {name:'分類1',value:50},
                {name:'分類2',value:60},
                {name:'分類3',value:55},
                {name:'分類4',value:79}
            ]
           },
           {
               type:'line',
               data:[100,200,96,123],
           },
           {
               type:'bar',//bar表示柱狀圖
               data:[100,200,90,150]
           }
           ]
        });
    </script>
</body>
</html>

以上這種寫法數據源是分散的，且難以實現數據的複用。爲了數據的複用和維護的方便，echart4.0引入了dataset

只需要維護一個source數組，用encode來取代原來的data,其中0代表source中的第0列，1代表source中的第1列......

以下用dataset進行改寫：

<!--
 * @Author: your name
 * @Date: 2020-07-03 12:33:40
 * @LastEditTime: 2020-07-03 14:24:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /css/test-echarts.html
--> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
    <script src='theme.js'></script>
    <style>
        .chart{
            width:800px;
            height:400px;
        }
    </style>
</head>
<body>
    <!-- 容器組件 -->
    <div class='chart' id='chart'></div>  
    <script>
        const chartDom = document.getElementById('chart');
        const chart = echarts.init(chartDom,'purple-passion',{renderer:'svg'});
        chart.setOption({
            dataset:{
                source:[
                    ['一季度',100,79,'分類1',50],
                    ['二季度',112,81,'分類2',60],
                    ['三季度',96,88,'分類3',55],
                    ['四季度',123,72,'分類4',70],
                ]
            },
           title:{
                text:'ECharts多系列案例',
           },
           //x軸
           xAxis:{
               data:['一季度','二季度','三季度','四季度']
           },
           //y軸
           yAxis:{},
           //數據和圖標類型
           series:[
           {
            type:'pie',
            center:['65%',60], //距離左側百分之65，距離上側60px
            radius:35,
            encode:{itemName:3,value:4}
           },
           {
               type:'line',
               encode:{x:0,y:1}
           },
           {
               type:'bar',//bar表示柱狀圖
               encode:{x:0,y:2}
           }
           ]
        });
    </script>
</body>
</html>

0x04 組件

在系列之上，echarts 中各種內容，被抽象爲“組件”。例如，echarts 中至少有這些組件：xAxis（直角座標系 X 軸）、yAxis（直角座標系 Y 軸）、grid（直角座標系底板）、angleAxis（極座標系角度軸）、radiusAxis（極座標系半徑軸）、polar（極座標系底板）、geo（地理座標系）、dataZoom（數據區縮放組件）、visualMap（視覺映射組件）、tooltip（提示框組件）、toolbox（工具欄組件）、series（系列）、...

我們注意到，其實系列（series）也是一種組件，可以理解爲：系列是專門繪製“圖”的組件。

如下圖，右側的 option 中聲明瞭各個組件（包括系列），各個組件就出現在圖中。

dome：

        const chartDom = document.getElementById('chart');
        const chart = echarts.init(chartDom,'light',{renderer:'svg'});
        var option = {
            dataset:{
                source:[
                    ['一季度',100,79,'分類1',50],
                    ['二季度',112,81,'分類2',60],
                    ['三季度',96,88,'分類3',55],
                    ['四季度',123,72,'分類4',70],
                ]
            },
            //定位
           grid:{
               top:100,
               left:'10%',
               right:'10%',
               bottom:100,
           },
           title:{
                text:'ECharts多系列案例',//正標題
                subtext:'數據可視化案例副標題',//副標題
           },
           //圖例
           legend:{
             left:300,//控制圖例的位置
            
             data:[{
                 name:'分類',
                 icon:'circle',
                 textStyle:{
                     color:'#fff'
                 }
             },'折線圖','柱狀圖'],//和系列的name屬性相綁定
           },
           toolbox:{
               feature:{
                   //區域縮放
                   dataZoom:{
                       yAxis:false,
                   },
                   //區域還原
                   restore:{},
                   //保存爲圖片
                   saveAsImage:{}
               }
           },
           dataZoom:[
               {
                   show:true,
                   start:0,//起始位置的百分比
                   end:100,//結束位置的百分比
               }
           ],
           //x軸
           xAxis:{
               data:['一季度','二季度','三季度','四季度']
           },
           //y軸
           yAxis:{},
           //數據和圖標類型
           series:[
           {
            name:'分類',
            type:'pie',
            center:['65%',60], //距離左側百分之65，距離上側60px
            radius:35,
            encode:{itemName:3,value:4}
           },
           {
               name:'折線圖',
               type:'line',
               encode:{x:0,y:1}
           },
           {
               name:'柱狀圖',
               type:'bar',//bar表示柱狀圖
               encode:{x:0,y:2}
           }
           ]
        };
        chart.setOption(option);

0x05 組件的定位：

不同的組件、系列，常有不同的定位方式。

[類 CSS 的絕對定位]

多數組件和系列，都能夠基於 top / right / down / left / width / height 絕對定位。這種絕對定位的方式，類似於 CSS 的絕對定位（position: absolute）。絕對定位基於的是 echarts 容器 DOM 節點。

其中，他們每個值都可以是：

絕對數值（例如 bottom: 54 表示：距離 echarts 容器底邊界 54 像素）。
或者基於 echarts 容器高寬的百分比（例如 right: '20%' 表示：距離 echarts 容器右邊界的距離是 echarts 容器寬度的 20%）。

如下圖的例子，對 grid 組件（也就是直角座標系的底板）設置 left、right、height、bottom 達到的效果。

0x06 座標系

#散點圖

<!--
 * @Author: your name
 * @Date: 2020-07-03 12:33:40
 * @LastEditTime: 2020-07-03 15:17:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /css/test-echarts.html
--> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
    <script src='theme.js'></script>
    <style>
        .chart{
            width:800px;
            height:400px;
        }
    </style>
</head>
<body>
    <!-- 容器組件 -->
    <div class='chart' id='chart'></div>  
    <script>
        const chartDom = document.getElementById('chart');
        const chart = echarts.init(chartDom,'light',{renderer:'svg'});
        var option = {
            xAxis:{},
            yAxis:{},
            dataset:{
                source:[
                    [13,44],
                    [18,63],
                    [29,48],
                    [14,63],
                ]
            },
            series:[{
                type:'scatter',//散點圖
                encode:{x:0,y:1}
            }
            ]
        };
        chart.setOption(option);
    </script>
</body>
</html>

#雙座標系：

兩個 yAxis，共享了一個 xAxis。兩個 series，也共享了這個 xAxis，但是分別使用不同的 yAxis，使用 yAxisIndex 來指定它自己使用的是哪個 yAxis：

Demo：

代碼：

<!--
 * @Author: your name
 * @Date: 2020-07-03 12:33:40
 * @LastEditTime: 2020-07-03 16:08:01
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /css/test-echarts.html
--> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
    <script src='theme.js'></script>
    <style>
        .chart{
            width:800px;
            height:400px;
        }
    </style>
</head>
<body>
    <!-- 容器組件 -->
    <div class='chart' id='chart'></div>  
    <script>
        const chartDom = document.getElementById('chart');
        const chart = echarts.init(chartDom,'light',{renderer:'canvas'});
        var option = {
            xAxis:{
                type:'category'
            },
            yAxis:[{},{
                splitLine:{
                    show:false,
                }
            }],
            dataset:{
                source:[
                  ['product','2012','2013','2014','2015'],
                  ['Matcha Latte',41.1,30.4,65.1,53.3],
                  ['Milk Tea',86.5,92.1,85.7,83.1]
                ]
            },
            series:[{
                type:'bar',
                seriesLayoutBy:'row',//以行的方式進行取數
                yAxisIndex:0 //表示該柱狀圖對應第一個座標系
            },
            {
                type:'line',
                seriesLayoutBy:'row',
                yAxisIndex:1,
            }
            ]
        };
        chart.setOption(option);
    </script>
</body>
</html>

#多座標系

<!--
 * @Author: your name
 * @Date: 2020-07-03 12:33:40
 * @LastEditTime: 2020-07-03 16:33:19
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /css/test-echarts.html
--> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
    <script src='theme.js'></script>
    <style>
        .chart{
            width:800px;
            height:400px;
        }
    </style>
</head>
<body>
    <!-- 容器組件 -->
    <div class='chart' id='chart'></div>  
    <script>
        const chartDom = document.getElementById('chart');
        const chart = echarts.init(chartDom,'dark',{renderer:'canvas'});
        var option = {
            grid:[{
                bottom:'55%'
            },{
                top:'55%',
            }],
            xAxis:[{
                type:'category',
                gridIndex:0,
            },
            {
                type:'category',
                gridIndex:1,
            }],
            yAxis:[{
                min:0,
                max:100,
                gridIndex:0
            },{
                splitLine:{
                    show:false,
                },
                gridIndex:0,
            },{
                min:0,
                max:100,
                gridIndex:1,
            }],
            dataset:{
                source:[
                  ['product','2012','2013','2014','2015'],
                  ['Matcha Latte',41.1,30.4,65.1,53.3],
                  ['Milk Tea',86.5,92.1,85.7,83.1]
                ]
            },
            series:[{
                type:'bar',
                seriesLayoutBy:'row',//以行的方式進行取數
                xAxisIndex:0,
                yAxisIndex:0 //表示該柱狀圖對應第一個座標系
            },
            {
                type:'line',
                seriesLayoutBy:'row',
                xAxisIndex:0,
                yAxisIndex:1,
            },
            {
                type:'bar',
                seriesLayoutBy:'row',
                xAxisIndex:1,
                yAxisIndex:2
            }
            ]
        };
        chart.setOption(option);
    </script>
</body>
</html>

echartsDay01 echarts 繪圖流程顏色主題切換canvas 和svg echarts基本概念組件組件定位座標系

0x00 Echart 繪圖流程

0x01 顏色主題

0x02 使用 Canvas 或者 SVG 渲染

0x03 ECharts 基本概念

0x04 組件

0x05 組件的定位：

0x06 座標系

DAPPER 事務 TRANSACTION

Java中線程的創建方式

一鍵自動化博客發佈工具,chrome和firfox詳細配置

ThinkPHP5開發中API數據安全相關解決方案

VueDay05:vuecli 腳手架

echartsDay01 echarts 繪圖流程顏色主題切換canvas 和svg echarts基本概念組件組件定位座標系

CPPDay09 異常&C++11標準

分享一個自己的寫的小小小小小項目：DataBank一站式信息發佈平臺（西電站）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

echartsDay01 echarts 繪圖流程 顏色主題 切換canvas 和svg echarts基本概念 組件 組件定位 座標系

0x00 Echart 繪圖流程

0x01 顏色主題

0x02 使用 Canvas 或者 SVG 渲染

0x03 ECharts 基本概念

0x04 組件

0x05 組件的定位：

0x06 座標系

echartsDay01 echarts 繪圖流程顏色主題切換canvas 和svg echarts基本概念組件組件定位座標系