JavaScript可視化與Echarts詳細(xì)介紹

更新時(shí)間：2022年07月30日 10:35:05 作者：哈哈ha~

提到數(shù)據(jù)可視化相信大家都不陌生，它能夠?qū)我坏臄?shù)據(jù)通過合適的可視化圖表類型表現(xiàn)出來，使其更加直觀的展現(xiàn)數(shù)據(jù)的變化趨勢(shì)、對(duì)比、峰值等等。其實(shí)在前端開發(fā)中，數(shù)據(jù)可視化也尤為重要，在眾多圖表庫(kù)中，echarts就是最常見的圖表庫(kù)之一

一、可視化介紹

可視化：將數(shù)據(jù)用圖表展示出來，讓數(shù)據(jù)更加直觀、讓數(shù)據(jù)特點(diǎn)更加突出
應(yīng)用場(chǎng)景：營(yíng)銷數(shù)據(jù)、生產(chǎn)數(shù)據(jù)、用戶數(shù)據(jù)

二、可視化庫(kù)介紹

常見的數(shù)據(jù)可視化庫(kù)：

D3.js：目前 Web 端評(píng)價(jià)最高的 Javascript 可視化工具庫(kù)(入手難)
ECharts.js：百度出品的一個(gè)開源 Javascript 數(shù)據(jù)可視化庫(kù)
Highcharts.js：國(guó)外的前端數(shù)據(jù)可視化庫(kù)，非商用免費(fèi)，被許多國(guó)外大公司所使用
AntV：螞蟻金服全新一代數(shù)據(jù)可視化解決方案等等
Highcharts 和 Echarts 就像是 Office 和 WPS 的關(guān)系

ECharts：一個(gè)使用 JavaScript 實(shí)現(xiàn)的開源可視化庫(kù)，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴矢量圖形庫(kù) ZRender，提供直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表

三、Echarts

Echarts引入和使用

下載echarts（庫(kù)）引入文件到html頁面中

<script src="./src/echarts.js"></script>

準(zhǔn)備一個(gè)DOM容器

<style>
    .box {
		width: 400px;
		height: 400px;
		cursor: pointer;
	}
</style>
<div class='box'></div>

初始化一個(gè)echarts對(duì)象

var box = document.querySelector(".box")
var echarts1 = echarts.init(box)

指定配置項(xiàng)和數(shù)據(jù)

var option = {
	title: {
		text: 'ECharts 入門示例'
	},
	tooltip: {},
	legend: {
		data: ['銷量']
	},
	xAxis: {
		data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
	},
	yAxis: {},
	series: [{
		name: '銷量',
		type: 'bar',
		data: [5, 20, 36, 10, 10, 20]
	}]
}

將配置項(xiàng)設(shè)置給echarts實(shí)例對(duì)象

echarts1.setOption(option)

了解基礎(chǔ)配置

title：標(biāo)題組件，包含主標(biāo)題和副標(biāo)題

tooltip：提示框組件

legend：圖例組件

series

系列列表：每個(gè)系列通過 type 決定自己的圖表類型

xAxis：直角坐標(biāo)系 grid 中的 x 軸

boundaryGap: 坐標(biāo)軸兩邊留白策略 true，這時(shí)候刻度只是作為分隔線，標(biāo)簽和數(shù)據(jù)點(diǎn)都會(huì)在兩個(gè)刻度之間的帶(band)中間

yAxis：直角坐標(biāo)系 grid 中的 y 軸

grid：直角坐標(biāo)系內(nèi)繪圖網(wǎng)格

color：調(diào)色盤顏色列表

注：不要求全部記憶，只需要知道怎么在官方文檔上查找學(xué)習(xí)

官方文檔：Documentation - Apache ECharts

（1）示例：標(biāo)題組件title

              title: {
					show: true,          //是否顯示標(biāo)題組件
					text: '主標(biāo)題',
					link: "http://www.baidu.com",   //主標(biāo)題文本超鏈接
					textStyle: {                   //主標(biāo)題的文本樣式 相當(dāng)于css的
						color: "blue",
						fontWeight: "100"
					},
					subtext: "副標(biāo)題",
					subtextStyle: {               //副標(biāo)題的文本樣式
						color: "red",
						fontWeight: "100",
						fontSize: "20px"
					},
					textAlign: "auto",         //整體（包括 text 和 subtext）的水平對(duì)齊
					textVerticalAlign: "auto", //整體（包括 text 和 subtext）的垂直對(duì)齊
					padding: [5, 10],          //標(biāo)題內(nèi)邊距
					left: 400,                 //title 組件離容器左側(cè)的距離
					backgroundColor: "yellow"   //標(biāo)題背景色，默認(rèn)透明
				},

（2）示例：工具組件toolbox

                toolbox: {
					//配置工具
					feature: {
						mytool: {    //自定義的工具名字，只能以 my 開頭
							show: true,
							title: "自定義擴(kuò)展方法",
							icon: "image://https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658941200&t=d5f42a41eab8af5c9929fcc6f9e1eff7",
							onclick: function() {
								console.log("點(diǎn)擊事件")
							}
						},
						saveAsImage: {
							name: "保存"
						},
						restore: {      //配置項(xiàng)還原
						},
						dataView: { //數(shù)據(jù)視圖工具，可展現(xiàn)當(dāng)前圖表所用的數(shù)據(jù)，編輯后可動(dòng)態(tài)更新
						},
						dataZoom: {},    //數(shù)據(jù)區(qū)域縮放
						magicType: {      //動(dòng)態(tài)類型切換
							type: ['line', 'bar', 'stack']
						}
					}
				},

（3）示例：提示框組件tooltip

            tooltip: {
					show: true,
					trigger: "axis", //觸發(fā)類型 "none"||"axis"
					showContent: false,   // 是否顯示提示框浮層
					alwaysShowContent: true,  //是否永遠(yuǎn)顯示提示框內(nèi)容
					triggerOn: "click",         //提示框觸發(fā)的條件
					backgroundColor: "gold",
					textStyle: {
						color: "white"
					},
					axisPointer: {     //是配置坐標(biāo)軸指示器的快捷方式
						type: "cross",  //指示器類型 line shadow none cross
						axis: "x",      //指示器的坐標(biāo)軸
						snap: true,     //坐標(biāo)軸指示器是否自動(dòng)吸附到點(diǎn)上
                        label: {        //坐標(biāo)軸指示器的文本標(biāo)簽
							show: true,
							color: "red",
						 	formatter: ({    //文本標(biāo)簽文字的格式化器
						 		value
						 	}) => {
								console.log(value)
						 		return `--${value}` //value*2
						 	}
						 }
					}
				},

（4）示例：圖例組件legend

legend: {
					type: "scroll",     //圖例的類型 plain普通圖例 scroll可滾動(dòng)翻頁的圖例
					orient: "vertical",  //圖例列表的布局朝向 vertical horizontal
					data: [{
						name: '銷量1',   //圖例項(xiàng)的名稱
						icon: "circle",   //圖例項(xiàng)的 icon
						itemStyle: {
							color: "red"
						}
					}, {
						name: '銷量2',
						icon: "rect",
						itemStyle: {
							color: "red"
						}
					}, {
						name: '純利1',
						icon: "triangle",
						textStyle: {
							color: "red",
							fontSize: "20px"
						}
					}, {
						name: '純利2',
						icon: "path://",   //'path://' 將圖標(biāo)設(shè)置為任意的矢量路徑
						icon: "image://url",       //通過圖片鏈接設(shè)置為圖片
						icon:  "image://https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658941200&t=d5f42a41eab8af5c9929fcc6f9e1eff7"   //通過圖片編碼設(shè)置為圖片
					  }]
				   },

（5）示例：系列列表series

              series: [{
					name: "某某系列1",
					type: 'line',
					colorBy: "series", //按系列分配調(diào)色盤中的顏色，同一系列中的所有數(shù)據(jù)都是用相同的顏色  
					symbol: "rect",     //標(biāo)記的圖形 設(shè)置拐點(diǎn) 
					cursor: "move",
					label: {
						show: true    //是否顯示標(biāo)簽文字
					},
					endLabel: {       //折線端點(diǎn)的標(biāo)簽
						show: true
					},
					labelLine: {
						show: true,   //是否顯示連接線
						smooth: true    //是否平滑
					},
					lineStyle: {       //標(biāo)簽的視覺引導(dǎo)線配置
						color: "red",
						width: 2,
						join: "miter"  //設(shè)置2個(gè)長(zhǎng)度不為0的相連部分如何連接在一起的屬性
					},
					smooth: 0.3,
					data: [420, 432, 401, 434, 190, 130, 120],
				}, {
					name: "某某系列2",
					type: 'line',
					symbol: "arrow",
					symbolSize: 10,     // 拐點(diǎn)大小   
					data: [860, 962, 961, 964, 1260, 1360, 1360],
				}]
			};

（6）示例：直角坐標(biāo)系 grid 中的 x、y軸（類似）

 xAxis: {
     show: true;  //是否顯示x軸                
     data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']   //類目數(shù)據(jù)，在類目軸
     position:'top'   //x軸的位置
     name:'坐標(biāo)軸的名稱'
     axisTick: {
         show: false // 去除刻度線
     },
     axisLabel: {
         color: '#4c9bfd' // 文本顏色
     },
     axisLine: {
         show: false // 去除軸線
     },
     boundaryGap: false  // 去除軸內(nèi)間距
 },

（7）藍(lán)丁格爾玫瑰圖

<style>
    .box {
      width: 500px;
      height: 500px;
    }
</style>
<div class="box"></div>
<script>
    var box = document.querySelector(".box")
    var ect = echarts.init(box)
    option = {
      title: {
        text: 'Nightingale Chart',
        subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/> : {c} (wppm3vysvbp%)'
      },
      toolbox: {
        show: true,
        feature: {
          mark: {
            show: true
          },
          dataView: {
            show: true,
            readOnly: false
          },
          restore: {
            show: true
          },
          saveAsImage: {
            show: true
          }
        }
      },
      series: [{
        name: '面積模式',
        type: 'pie',
        radius: [30, 110],
        center: ['25%', '50%'],
        roseType: 'radius',
        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
        itemStyle: {
          borderRadius: 5
        },
        label: {
          show: false,
          fontSize: 10
        },
        emphasis: {
          label: {
            show: true
          }
        },
        labelLine: {
          // 連接扇形圖線長(zhǎng)
          length: 6,
          // 連接文字線長(zhǎng)
          length2: 8
        },
        data: [{
            value: 20,
            name: '云南'
          },
          {
            value: 26,
            name: '北京'
          },
          {
            value: 24,
            name: '山東'
          },
          {
            value: 25,
            name: '河北'
          },
          {
            value: 20,
            name: '江蘇'
          },
          {
            value: 25,
            name: '浙江'
          },
          {
            value: 30,
            name: '四川'
          },
          {
            value: 42,
            name: '湖北'
          }
        ]
      }, ]
    };
    ect.setOption(option)
</script>

效果圖：