百度推出的echarts，製表折線圖柱狀圖餅圖等的超級工具

時間 2019-11-11

標籤百度推出 echarts 製表折線柱狀餅圖超級工具简体版

原文原文鏈接

1、簡介：javascript

一、繪製數據圖表，有了它，想要網頁上繪製個折線圖、柱狀圖，今後easy。html

二、使用這個百度的echarts.js插件，是經過把圖片繪製在canvas上在顯示在頁面上。java

官網對echarts的簡介：jquery

ECharts，縮寫來自Enterprise Charts，商業級數據圖表，一個純Javascript的圖表庫，能夠流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性化定製的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫遊等特性大大加強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。git

支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和絃圖、力導向佈局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件，支持多圖表、組件的聯動和混搭展示。github

2、兩種引入文件的方式chrome

echarts插件下載地址：canvas

http://echarts.baidu.com/build/echarts-2.2.0.zip瀏覽器

https://codeload.github.com/ecomfe/echarts/zip/2.2.0echarts

一、標籤式單文件引入

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts單文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script type="text/javascript">
        // 基於準備好的dom，初始化echarts圖表
        var myChart = echarts.init(document.getElementById('main')); 
        
        var option = {
            tooltip: {
                show: true
            },
            legend: {
                data:['銷量']
            },
            xAxis : [
                {
                    type : 'category',
                    data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    "name":"銷量",
                    "type":"bar",
                    "data":[5, 20, 40, 10, 10, 20]
                }
            ]
        };

        // 爲echarts對象加載數據 
        myChart.setOption(option); 
    </script>
</body>

View Code

二、模塊化單文件引入

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts單文件引入 -->
    <script src="js/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路徑配置
        require.config({
            paths: {
                echarts: 'js/dist'                        
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/map' // 使用柱狀圖就加載bar模塊，按需加載
            ],
            function (ec) {
                // 基於準備好的dom，初始化echarts圖表
                var myChart = ec.init(document.getElementById('main')); 
                option = {
                    tooltip : {
                        trigger: 'item',
                        formatter: '{b}'
                    },
                    series : [
                        {
                            name: '中國',
                            type: 'map',
                            mapType: 'china',
                            selectedMode : 'multiple',
                            itemStyle:{
                                normal:{label:{show:true}},
                                emphasis:{label:{show:true}}
                            },
                            data:[
                                {name:'廣東',selected:true}
                            ]
                        }
                    ]
                };
                var ecConfig = require('echarts/config');
                myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
                    var selected = param.selected;
                    var str = '當前選擇： ';
                    for (var p in selected) {
                        if (selected[p]) {
                            str += p + ' ';
                        }
                    }
                    document.getElementById('wrong-message').innerHTML = str;
                })
                                    
                /*var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['銷量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"銷量",
                            "type":"bar",
                            "data":[5, 20, 40, 10, 10, 20]
                        }
                    ]
                };*/
        
                // 爲echarts對象加載數據 
                myChart.setOption(option); 
            }
        );
    </script>
</body>

方法二的效果圖就是全國地圖的效果，點擊當前省份，背景顏色切換爲黃色，以下：

個人文件目錄是這樣的：

so，在配置時，記得配置好路徑！！！！

關於這兩種引入方式，

一、確定的，若是是用標籤式的引入，就跟咱們使用jquery的時候同樣，在使用以前先引入jquery類庫。而後就開始用了。

二、標籤式引入，是引入了整個echarts這個插件，總共大小是899KB,壓縮後的jquery大小纔有90.9KB，~~~~(>_<)~~~~ 。這個插件實在大！！

三、模塊化單文件引入，這是引入方式是一個基礎js+你想要的那個模塊，好比echarts.js+map.js，一個基礎js的大小是341KB，一個模塊是最小是k.js，5.15KB，最大模塊是map.js，437KB，若是項目裏要繪製的圖不是不少種，使用模塊化更節約資源。

3、筆記

標籤式引入文件的步驟：
一、初始化echarts對象
var myChart = echarts.init(document.getElementById('main'));
二、作好配置option
option={

}
三、加載數據到echarts對象
myChart.setOption(option)

===========================================================

關於幾個經常使用到的參數：
title：
標題，在左上方
ps：跟subtext均可以經過x：參數進行更改

subtext：
副標題，在標題下方

legen:
圖例，在頭部的中間

boundaryGap:true
類目起始和結束兩端空白策略

type:line：
圖的類型,折線圖
series:[{type:line}]

tooltip：
鼠標懸浮時的提示框
tooltip:{trigger:'axis'}

toolbox:
工具箱，在右上方，可不要

calculable : true：
拖拽重計算，就是這個柱形能夠用鼠標拖動。

xAxis:
設置橫座標

yAxis：
設置縱座標

series：
最重要，生成圖表內容的。

markPoint：
繪製點，包括最大小值，以及轉折點

markLine：
繪製直線，平均值線

splitLine : false
分割線

grid:設置網格
grid : {
borderWidth : 0, /* 兩邊的border=0 */
x :'55px', /* 經過修改xy x2 y2更改折線圖的大小 */
y : '25px',
x2 : '20px',
y2 : '20px',
},

trigger:item/axis /* 觸發提示框顯示的樣式 */
tooltip : {
trigger: 'item'
},

itemStyle: /* 要設置拐點的圖案跟顏色也是在這裏設置，line跟圈圈的顏色就直接設置color */
itemStyle: {
normal: {
color : '#03a1e8',
lineStyle: {
borderColor : '#03a1e8'
},
label : { // 顯示此刻數據
show: true,
textStyle : {
color : '#555',
fontSize : '12'
}
},
},
}
================================================

Last，API文檔裏面有好多參數，我我的比較喜歡閱讀裏面說明參數的圖解，看起來更加簡單明瞭，印象深入。例如這圖：

一看就知道要如何去掉標尺設置axisTick參數，要去除橫豎的線是設置對應的x、y軸上得splitLine參數。

可設置參數甚多，閱讀API文檔是最好的idea~