可視化框架echart
ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。
它提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用於統計的盒形圖，用於地理數據可視化的地圖、熱力圖、線圖，用於關系數據可視化的關系圖、treemap、旭日圖，多維數據可視化的平行坐標，還有用於 BI 的漏斗圖，儀表盤，並且支持圖與圖之間的混搭。
你可以在下載界面下載包含所有圖表的構建文件，如果只是需要其中一兩個圖表，又嫌包含所有圖表的構建文件太大，也可以在在線構建中選擇需要的圖表類型后自定義構建。
編輯器
word其實就是編輯器，ppt也是，不同的編輯器可以產生不同類型的文件。在這里，我們需要的是產生網頁文件的編輯器，即我們需要產生.html后綴的文件，所以推薦一個輕量級編輯器Sublime，http://www.sublimetext.com/。根據你的電腦系統來選擇相應的安裝包安裝，具體使用方法可以參考官網的教程。
框架的使用方法
首先要明確的是，我們需要的插圖是由網頁的形式在瀏覽器中呈現的，所以需要在編輯器中編寫代碼，保存成html文件，接着在瀏覽器中打開。幸運的是，框架已經為我們寫好了大多數生成圖表的代碼，我們只需要修改其中的設置並讀入我們的數據，就可以輕松制作出新穎又好看的圖表。下面就用世界地圖和餅狀圖來說明該框架的使用方法
上圖是最終的效果圖，制作該圖片分為兩個步驟：
使用echart.js生成世界地圖和餅狀圖
世界地圖：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Awesome-pyecharts</title>
<!-- 下面兩行的意思是，瀏覽器從網絡上獲取echart包，而不需要你配置任何編程環境 -->
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/world.js"></script>
</head>
<body>
<!-- div標簽表示一個塊，它是我們的圖片容器。所以屬性style里 寬度和高度是可以自定義的，1800px代表1800像素，塊的寬度和高度於生成圖片的尺寸相關，在下面的餅狀圖中則同理。-->
<div id="container" class="chart-container" style="width:1800px; height:1200px;"></div>
<script>
// 所有的腳本代碼都寫在script標簽里
var chart_container = echarts.init(
document.getElementById('container'), 'white', {renderer: 'canvas'});
// var option代表定義一個名為option的變量，后面花括號里的代表我們需要作圖的參數設置
var option_container = {
// 默認的顏色數組 （如果不明確設置每個數據項的顏色，則會采用默認的數組
// 此處的顏色為十六進制表示，也可以使用rgb來表示。簡單地理解就是一串字符就代表一個顏色，挑選喜歡的顏色可以自行搜索顏色
"color": ["#ac6767","#1d953f","#6950a1","#918597"],
"series": [
{
// 圖標類型為 地圖
"type": "map",
"name": "test",
"label": {
"show": false,
"position": "top",
"margin": 8
},
"mapType": "world", // 地圖類型為 世界地圖
// data里的每一個{}中，是一項數據整體，標明了該項數據的名稱，值，以及顏色等參數。注意：此處的字符串需要加雙引號""(輸入法切換至英文狀態)
"data": [
{
// ItemStyle 中設置每一個數據項的顏色
"name": "United States", "value": 43,
'itemStyle':{'color':"#c23531"}
},
{
"name": "Japan","value": 17, // 注意項與項之間的逗號
'itemStyle':{'color':"#CD8500"}
},
{
"name": "France","value": 7,
'itemStyle':{'color':"#EE2C2C"}
},
{
"name": "Italy","value": 6,
'itemStyle':{'color':"#918597"}
},
{
"name": "Canada","value": 5,
'itemStyle':{'color':"#bda29a"}
},
{
"name": "United Kingdom","value": 4,
'itemStyle':{'color':"#6950a1"}
},
{
"name": "Spain","value": 4,
'itemStyle':{'color':"#1d953f"}
},
{
"name": "Holland","value": 4,
'itemStyle':{'color':"#2f4554"}
},
{
"name": "Belgium","value": 3,
'itemStyle':{'color':"#EEAD0E"}
}
, {
"name": "Germany","value": 2,
'itemStyle':{'color':"#607B8B"}
},
{
"name": "Austria","value": 2,
'itemStyle':{'color':"#5CACEE"}
},
{
"name": "Switzerland","value": 1,
'itemStyle':{'color':"#4EEE94"}
},
{
"name": "Poland","value": 1,
'itemStyle':{'color':"#8DEEEE"}
},
{
"name": "Chile","value": 1,
'itemStyle':{'color':"#B23AEE"}
},
],
"roam": true,
"zoom": 1,
// 去除各個國家上的小紅點
"showLegendSymbol": false,
}
],
// 鼠標懸浮，單擊產生的效果（在網頁上可以動態顯示）
"tooltip": {
"show": true,
"trigger": "item",
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "line"
},
"textStyle": {
"fontSize": 14
},
"borderWidth": 0
}
};
chart_container.setOption(option_container);
</script>
</body>
</html>
餅狀圖代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Awesome-pyecharts</title>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/world.js"></script>
</head>
<body>
<div id="container" class="chart-container" style="width:1200px; height:800px;"></div>
<script>
var chart_container = echarts.init(
document.getElementById('container'), 'white', {renderer: 'canvas'});
var option_container = {
title: {
text: 'No. of papers',
left: 'center'
},
legend: {
orient: 'vertical',
left: 'left',
// 圖例數據
data: ['United States', 'Japan', 'France', 'Italy', 'Canada', 'England', 'Spain', 'Holland', 'Belgium', 'Germany', 'Austria', 'Switzerland', 'Poland', 'Chile'],
// 設置圖例的文字樣式
textStyle:{
fontWeight:'bold', // 字型粗細
fontSize:'20', // 文字大小
fontFamily:'Times New Roman' //字體
}
},
series: [
{
name: '',
type: 'pie', // 圖的類型為餅圖
radius: '55%', // 餅圖半徑
clockwise:true, // 順時針排列各項數據
center: ['50%', '60%'], //餅圖的中心坐標
// 餅圖中數據項標簽設置
label:{
show:true,
position:'outside',
// 格式設置 詳細請看：www.echartsjs.com/zh/option.html#series-pie.label.formatter
formatter: '{a} {b} : {c} ({d}%)',
fontWeight:'bold',
fontSize:'20',
fontFamily:'Times New Roman'
},
// ItemStyle 中設置每一個數據項的顏色
data: [
{value: 43, name: 'United States',itemStyle:{color:'#c23531'}},
{value: 17, name: 'Japan',itemStyle:{color:'#CD8500'}},
{value: 7, name: 'France',itemStyle:{color:'#EE2C2C'}},
{value: 6, name: 'Italy',itemStyle:{color:'#918597'}},
{value: 5, name: 'Canada',itemStyle:{color:'#bda29a'}},
{value: 4, name: 'England',itemStyle:{color:'#6950a1'}},
{value: 4, name: 'Spain',itemStyle:{color:'#1d953f'}},
{value: 4, name: 'Holland',itemStyle:{color:'#2f4554'}},
{value: 3, name: 'Belgium',itemStyle:{color:'#EEAD0E'}},
{value: 2, name: 'Germany',itemStyle:{color:'#607B8B'}},
{value: 2, name: 'Austria',itemStyle:{color:'#5CACEE'}},
{value: 1, name: 'Switzerland',itemStyle:{color:'#4EEE94'}},
{value: 1, name: 'Poland',itemStyle:{color:'#8DEEEE'}},
{value: 1, name: 'Chile',itemStyle:{color:'#B23AEE'}},
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
chart_container.setOption(option_container);
</script>
</body>
</html>
接下來的步驟與上面的世界地圖操作相同，最后保存餅狀圖片。
將世界地圖和餅狀圖拼接為一張圖片
該步驟使用了ps，具體步驟是：
此處寬度和高度可以自定義，一般一開始可以設置大一點，到后面生成圖片之前進行裁剪
接着把兩張圖片拖入畫布中，調整大小與位置，再將兩個圖層柵格化，最后文件另存為.jpg文件，整個過程結束。
關於echart.js的詳細信息或其它類型的圖片可以參考：https://www.echartsjs.com/zh/index.html