1. 圖表（echarts）--數(shù)據(jù)可視化
與傳統(tǒng)形式中用表格或文檔展現(xiàn)數(shù)據(jù)的方式相比匠童，可視化能將數(shù)據(jù)以更加直觀的方式展現(xiàn)出來埂材，使數(shù)據(jù)更加客觀、更具說服力汤求。
下面是最常見的一種形式：
數(shù)據(jù)可視化并不是簡單的把數(shù)據(jù)變成圖表俏险。而是以數(shù)據(jù)為視角严拒，看待世界。換句話說竖独，數(shù)據(jù)可視化的客體是數(shù)據(jù)裤唠，但我們想要的其實是——數(shù)據(jù)視覺，以數(shù)據(jù)為工具预鬓，以可視化為手段巧骚，目的是描述真實情況，發(fā)現(xiàn)規(guī)律格二。
可視化定義：數(shù)據(jù)可視化劈彪，是關于數(shù)據(jù)視覺表現(xiàn)形式的科學技術研究。其中顶猜，這種數(shù)據(jù)的視覺表現(xiàn)形式被定義為沧奴，一種以某種概要形式抽提出來的信息，包括相應信息單位的各種屬性和變量长窄。 它是一個處于不斷演變之中的概念滔吠，其邊界在不斷地擴大。主要指的是技術上較為高級的技術方法挠日，而這些技術方法允許利用圖形疮绷、圖像處理、計算機視覺以及用戶界面嚣潜，通過表達冬骚、建模以及對立體、表面懂算、屬性以及動畫的顯示只冻，對數(shù)據(jù)加以可視化解釋。
2. echarts介紹
ECharts是由百度團隊開發(fā)的计技，可高度個性化定制的數(shù)據(jù)可視化圖表庫喜德。它的底層依賴輕量級的Canvas類庫ZRender，是一個純JavaScript的圖表庫垮媒，兼容（IE8/9/10/11舍悯，Chrome，F(xiàn)irefox涣澡，Safari等）主流瀏覽器贱呐，可以運行在PC和移動設備上。
3. 能實現(xiàn)哪些圖表
http://echarts.baidu.com/examples/
4. 在 webpack 中使用 ECharts
Webpack 是目前比較流行的模塊打包工具入桂，你可以在使用 webpack 的項目中輕松的引入和打包 ECharts
你可以使用如下命令通過 npm 安裝 ECharts:
npm install echarts --save
5. 引入 ECharts
通過 npm 上安裝的 ECharts會放在node_modules目錄下奄薇。
// 使用 require('echarts') 得到的是已經(jīng)加載了所有圖表和組件的 ECharts 包
var echarts = require('echarts');
我們可以按需引入：
var echarts = require('echarts/lib/echarts');
// 引入柱狀圖
require('echarts/lib/chart/bar');
// 引入提示框和標題組件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
// 基于準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 繪制圖表
myChart.setOption({
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
5. 繪制一個簡單的圖表
在繪圖前我們需要為 ECharts 準備一個具備高寬的 DOM 容器抗愁。
<body>
<!-- 為 ECharts 準備一個具備大心俚佟（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
然后就可以通過 echarts.init方法初始化一個 echarts實例并通過 setOption方法生成一個簡單的柱狀圖呵晚。
6.組件
除了圖表外 ECharts 中，提供了很多交互組件沫屡。例如：
圖例組件legend饵隙、標題組件 title、視覺映射組件visualMap沮脖、數(shù)據(jù)區(qū)域縮放組件dataZoom金矛、時間線組件timeline等
// echarts的核心部分幾乎都在這個option配置中
// 來個例子：
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: { //直角坐標系網(wǎng)格
left: '3%',
right: '6%',
bottom: '3%',
containLabel: true
},
xAxis: { //直角坐標系 grid 中的 x 軸
type: 'value',
position: 'top',
boundaryGap: [0, 0.01],
axisLine: {
show: false
},
axisTick: {
show: false
},
minInterval: 1
},
yAxis: { // 直角坐標系 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) { // 對y軸上的刻度值的顯示進行處理
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ù)排序反轉
},
series: [ //每個系列通過 type 決定自己的圖表類型
{
name: '安排記錄數(shù)',
type: 'bar', // 圖表類型
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 中主要通過 on 方法添加事件處理函數(shù)
示例：
myChart.on('click', function (params) {
console.log(params);
});
鼠標事件包括: click,dblclick，mousedown勺届，mouseup驶俊，mouseover，mouseout免姿，globalout饼酿，contextmenu。
所有的鼠標事件包含參數(shù) params胚膊，這是一個包含點擊圖形的數(shù)據(jù)信息的對象故俐。（移動端不支持雙擊事件dblclick，自己寫方法代替）
8.echarts的vue插件 v-charts的優(yōu)缺點
正如v-charts的官方介紹：
在使用 echarts 生成圖表時紊婉，經(jīng)常需要做繁瑣的數(shù)據(jù)類型轉化药版、修改復雜的配置項，v-charts 的出現(xiàn)正是為了解決這個痛點喻犁「斩福基于 Vue2.0 和 echarts 封裝的 v-charts 圖表組件，只需要統(tǒng)一提供一種對前后端都友好的數(shù)據(jù)格式設置簡單的配置項株汉，便可輕松生成常見的圖表。
v-charts在方便地生成圖表的同時歌殃，限制了圖表的結構乔妈。對series部分尤其是data數(shù)據(jù)支持的不好，導致生成的圖表僵化氓皱，很難進行擴展路召。 app報表第一版使用了這個組件，但后來的版本不再使用它波材。
9.highcharts
特點：是個付費的工具股淡，色系看上去更協(xié)調，個人或公司內部使用倒可以廷区，個人認為highcharts看上去更舒服吧唯灵。
其他工具：比如D3，連色盲圖都可以生成的隙轻，但功能越多一般也越復雜https://beta.observablehq.com/@mbostock/exoplanets
官網(wǎng)：https://d3js.org/
