1. 圖表（echarts）--數(shù)據(jù)可視化
與傳統(tǒng)形式中用表格或文檔展現(xiàn)數(shù)據(jù)的方式相比，可視化能將數(shù)據(jù)以更加直觀的方式展現(xiàn)出來(lái)，使數(shù)據(jù)更加客觀、更具說(shuō)服力。
下面是最常見(jiàn)的一種形式：
數(shù)據(jù)可視化并不是簡(jiǎn)單的把數(shù)據(jù)變成圖表。而是以數(shù)據(jù)為視角，看待世界。換句話(huà)說(shuō)，數(shù)據(jù)可視化的客體是數(shù)據(jù)，但我們想要的其實(shí)是——數(shù)據(jù)視覺(jué)，以數(shù)據(jù)為工具，以可視化為手段，目的是描述真實(shí)情況，發(fā)現(xiàn)規(guī)律。
可視化定義：數(shù)據(jù)可視化，是關(guān)于數(shù)據(jù)視覺(jué)表現(xiàn)形式的科學(xué)技術(shù)研究。其中，這種數(shù)據(jù)的視覺(jué)表現(xiàn)形式被定義為，一種以某種概要形式抽提出來(lái)的信息，包括相應(yīng)信息單位的各種屬性和變量。 它是一個(gè)處于不斷演變之中的概念，其邊界在不斷地?cái)U(kuò)大。主要指的是技術(shù)上較為高級(jí)的技術(shù)方法，而這些技術(shù)方法允許利用圖形、圖像處理、計(jì)算機(jī)視覺(jué)以及用戶(hù)界面，通過(guò)表達(dá)、建模以及對(duì)立體、表面、屬性以及動(dòng)畫(huà)的顯示，對(duì)數(shù)據(jù)加以可視化解釋。
2. echarts介紹
ECharts是由百度團(tuán)隊(duì)開(kāi)發(fā)的，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表庫(kù)。它的底層依賴(lài)輕量級(jí)的Canvas類(lèi)庫(kù)ZRender，是一個(gè)純JavaScript的圖表庫(kù)，兼容（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等）主流瀏覽器，可以運(yùn)行在PC和移動(dòng)設(shè)備上。
3. 能實(shí)現(xiàn)哪些圖表
http://echarts.baidu.com/examples/
4. 在 webpack 中使用 ECharts
Webpack 是目前比較流行的模塊打包工具，你可以在使用 webpack 的項(xiàng)目中輕松的引入和打包 ECharts
你可以使用如下命令通過(guò) npm 安裝 ECharts:
npm install echarts --save
5. 引入 ECharts
通過(guò) npm 上安裝的 ECharts會(huì)放在node_modules目錄下。
// 使用 require('echarts') 得到的是已經(jīng)加載了所有圖表和組件的 ECharts 包
var echarts = require('echarts');
我們可以按需引入：
var echarts = require('echarts/lib/echarts');
// 引入柱狀圖
require('echarts/lib/chart/bar');
// 引入提示框和標(biāo)題組件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
// 繪制圖表
myChart.setOption({
title: {
text: 'ECharts 入門(mén)示例'
},
tooltip: {},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: {},
series: [{
name: '銷(xiāo)量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
5. 繪制一個(gè)簡(jiǎn)單的圖表
在繪圖前我們需要為 ECharts 準(zhǔn)備一個(gè)具備高寬的 DOM 容器。
<body>
<!-- 為 ECharts 準(zhǔn)備一個(gè)具備大?。▽捀撸┑?DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
然后就可以通過(guò) echarts.init方法初始化一個(gè) echarts實(shí)例并通過(guò) setOption方法生成一個(gè)簡(jiǎn)單的柱狀圖。
6.組件
除了圖表外 ECharts 中，提供了很多交互組件。例如：
圖例組件legend、標(biāo)題組件 title、視覺(jué)映射組件visualMap、數(shù)據(jù)區(qū)域縮放組件dataZoom、時(shí)間線組件timeline等
// echarts的核心部分幾乎都在這個(gè)option配置中
// 來(lái)個(gè)例子：
var option = {
color: ['#90ed7d','#7cb5ec'], // 色系
tooltip: { //提示框組件
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: { // 圖例組件
orient: 'horizontal',
icon: "circle",
itemWidth: 10,
itemHeight: 10,
data: data.legend
},
barGap: '0%',
grid: { //直角坐標(biāo)系網(wǎng)格
left: '3%',
right: '6%',
bottom: '3%',
containLabel: true
},
xAxis: { //直角坐標(biāo)系 grid 中的 x 軸
type: 'value',
position: 'top',
boundaryGap: [0, 0.01],
axisLine: {
show: false
},
axisTick: {
show: false
},
minInterval: 1
},
yAxis: { // 直角坐標(biāo)系 grid 中的 y 軸
type: 'category',
data: data.names,
axisLine: {
lineStyle: {
color: '#ccd6eb',
}
},
axisTick: {
lineStyle: {
color: '#ccd6eb',
}
},
axisLabel: {
textStyle: {
color: '#000'
},
interval: data.names.length > 20 ? 1 : 0,
formatter: function (value) { // 對(duì)y軸上的刻度值的顯示進(jìn)行處理
var max_num = value.match(/[^\x00-\xff]/) == null ? 8 : 4
if (value.length > max_num){
return value.substr(0,max_num-1) + '...'
}
else {
return value
}
},
},
inverse: true //數(shù)據(jù)排序反轉(zhuǎn)
},
series: [ //每個(gè)系列通過(guò) type 決定自己的圖表類(lèi)型
{
name: '安排記錄數(shù)',
type: 'bar', // 圖表類(lèi)型
data: data.plan,
itemStyle: {
normal: {
label: {
show: true,
formatter: (params)=>{
if (params.value == 0) return ''
return params.value
},
position: 'right',
textStyle: {
color: 'black',
fontSize: 10
}
},
shadowBlur: {
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 20
}
}
}
},
{
name: '已完成記錄數(shù)',
type: 'bar',
data: data.complete,
itemStyle: {
normal: {
label: {
show: true,
formatter: (params)=>{
if (params.value == 0) return ''
return params.value
},
position: 'right',
textStyle: {
color: 'black',
fontSize: 10
}
},
shadowBlur: {
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 20
}
}
}
}
]
};
7.事件
在 ECharts 中主要通過(guò) on 方法添加事件處理函數(shù)
示例：
myChart.on('click', function (params) {
console.log(params);
});
鼠標(biāo)事件包括: click,dblclick，mousedown，mouseup，mouseover，mouseout，globalout，contextmenu。
所有的鼠標(biāo)事件包含參數(shù) params，這是一個(gè)包含點(diǎn)擊圖形的數(shù)據(jù)信息的對(duì)象。（移動(dòng)端不支持雙擊事件dblclick，自己寫(xiě)方法代替）
8.echarts的vue插件 v-charts的優(yōu)缺點(diǎn)
正如v-charts的官方介紹：
在使用 echarts 生成圖表時(shí)，經(jīng)常需要做繁瑣的數(shù)據(jù)類(lèi)型轉(zhuǎn)化、修改復(fù)雜的配置項(xiàng)，v-charts 的出現(xiàn)正是為了解決這個(gè)痛點(diǎn)?；?Vue2.0 和 echarts 封裝的 v-charts 圖表組件，只需要統(tǒng)一提供一種對(duì)前后端都友好的數(shù)據(jù)格式設(shè)置簡(jiǎn)單的配置項(xiàng)，便可輕松生成常見(jiàn)的圖表。
v-charts在方便地生成圖表的同時(shí)，限制了圖表的結(jié)構(gòu)。對(duì)series部分尤其是data數(shù)據(jù)支持的不好，導(dǎo)致生成的圖表僵化，很難進(jìn)行擴(kuò)展。 app報(bào)表第一版使用了這個(gè)組件，但后來(lái)的版本不再使用它。
9.highcharts
特點(diǎn)：是個(gè)付費(fèi)的工具，色系看上去更協(xié)調(diào)，個(gè)人或公司內(nèi)部使用倒可以，個(gè)人認(rèn)為highcharts看上去更舒服吧。
其他工具：比如D3，連色盲圖都可以生成的，但功能越多一般也越復(fù)雜https://beta.observablehq.com/@mbostock/exoplanets
官網(wǎng)：https://d3js.org/
