默認你已經具備前端基礎 html，css，js，jq這些基本知識都已經掌握。
什麼是echarts？
ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定製的數據可視化圖表。
類似於echarts的圖表庫還有Highcharts，G2，d3等，至於項目怎麼選型圖表庫，大可不用爲這事情糾結，就像支付寶和微信都有支付，平時買東西你會選擇使用哪個付款就是看個人操作習性了，個人還是比較傾向於echarts和G2,。
項目目錄
實現方式
index.html文件：項目的核心文件，部分示例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>數據看板</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./fonts/icomoon.css">
<script type="text/javascript">
//rem佈局動態更改html
(function(win) {
var tid;
function refreshRem() {
let designSize = 1920;
let html = document.documentElement;
let wW = html.clientWidth;
let rem = wW * 100 / designSize;
document.documentElement.style.fontSize = rem + 'px';
}
win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 100);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 100);
}
}, false);
refreshRem();
})(window);
</script>
</head>
<body>
<div class="viewport">
<!--圖表盒子-->
<div class="chart" id="chart">
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.js"></script>
<script src="./js/index.js"></script>
</html>
css文件包：顧名思義裏面放置的是頁面的樣式，這個樣式主要是多頁面的整體性的框架，以及佈局的樣式約束，另外此項目就涉及一張頁面大屏展示，自適應適配方式採用的rem+flex的佈局當時進行的適配，部分代碼示例如下：
整張頁面的樣式都丟在index.css
~~~css
/* 樣式重置 */
body {
line-height: 1.15;
font-size: 0.16rem;
margin: 0;
padding: 0;
background-repeat: no-repeat;
background-position: 0 0 / cover;
background-color: #101129;
}
* {
margin: 0;
padding: 0;
font-weight: normal;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
/* 內容區 */
.viewport {
min-width: 1024px;
max-width: 1920px;
margin: 0 auto;
display: flex;
padding: 0.05rem 0.15rem 0;
}
.chart {
width: 600px;
height:500px;
}
....
js文件包的index.js文件，部分代碼示例如下：
//圖表的tooltip自動定時滾動顯示函數
function autoTip(total, index, myechart) {
timer = setInterval(function() {
myechart.dispatchAction({
type: 'showTip',
seriesIndex: '0',
dataIndex: index
});
index += 1;
if (index > total) {
index = 0;
}
}, 1000);
}
(function() {
// 基於準備好的dom，初始化echarts實例
var myechart = echarts.init(document.getElementById("chart"));
var fontColor = '#4c9bfd';
option = {
color: ['#02cdff', '#0090ff', '#f9e264'],
textStyle: {
fontSize: 10
},
grid: {
left: '0',
right: '3%',
bottom: '3%',
top: '18%',
containLabel: true,
show: true,
borderColor: 'rgba(0, 240, 255, 0.3)'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true,
backgroundColor: '#333'
}
}
},
legend: {
show: true,
x: 'center',
top: '0',
textStyle: {
color: fontColor
},
data: ['錄製', '直播', '巡課']
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisTick: {
alignWithLabel: false,
show: false
},
axisLabel: {
color: '#4c9bfd'
},
data: ['5.11', '5.12', '5.13', '5.14', '5.15']
}],
yAxis: [{
type: 'value',
name: '次數',
nameTextStyle: {
color: "#ffffff",
fontSize: 10
},
axisLabel: {
color: '#4c9bfd'
},
splitLine: {
lineStyle: {
color: 'rgba(0, 240, 255, 0.3)'
}
},
}],
series: [{
name: '錄製',
type: 'line',
stack: '總量',
symbolSize: 5,
label: {
normal: {
show: true,
position: 'top'
}
},
itemStyle: {
normal: {
areaStyle: {
//color: '#94C9EC'
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: 'rgba(7,46,101,0.3)'
}, {
offset: 1,
color: 'rgba(0,166,246,0.9)'
}]),
}
}
},
data: [120, 132, 101, 134, 90]
},
{
name: '直播',
type: 'line',
stack: '總量',
symbol: 'circle',
symbolSize: 5,
label: {
normal: {
show: true,
position: 'top'
}
},
itemStyle: {
normal: {
areaStyle: {
//color: '#94C9EC'
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: 'rgba(7,44,90,0.3)'
}, {
offset: 1,
color: 'rgba(0,212,199,0.9)'
}]),
}
}
},
data: [220, 85, 191, 90, 230]
},
{
name: '巡課',
type: 'line',
stack: '總量',
symbol: 'circle',
symbolSize: 5,
label: {
normal: {
show: true,
position: 'top'
}
},
itemStyle: {
normal: {
areaStyle: {
//color: '#94C9EC'
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: 'rgba(7,44,90,0.3)'
}, {
offset: 1,
color: 'rgba(0,212,199,0.9)'
}]),
}
}
},
data: [150, 232, 201, 154, 190]
}
]
};
myechart.setOption(option);
window.addEventListener("resize", function() {
myechart.resize();
});
var total = option.xAxis[0].data.length;
var index = 0;
autoTip(total, index, myechart)
})();
fonts文件包：這裏面主要還是一些扁平化的icon,以及純數字電子字體的字體包
需要一些圖標的話可以在阿里矢量圖標庫，字體的話可以找一些開源的字體包。
images文件包：裏面存放一些頁面內所需要的圖片以及科技感的邊框等
=至此項目包的整體就組建好了，經過以上demo示例代碼的組合，整個項目的冰山一角效果也就出來了，運行效果如下圖：=
整個項目運行圖展示：
以上內容如有錯誤地方還請留言/私信交流