轉自於：https://blog.csdn.net/weixin_43352901/article/details/108489921
折線圖/面積圖 的實現
先看效果
文件目錄
獲取Echarts
引入Echarts
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="../incubator-echarts-5.0.0-alpha.2/dist/echarts.min.js"></script> </head> </html>
繪制圖表
在繪圖前我們需要為 ECharts 准備一個具備高寬的 DOM 容器
<body style="background: black;"> <!-- 為 ECharts 准備一個具備大小（寬高）的 DOM --> <div id="main" style="width: 835px; height: 670px"></div> </body> - 1
- 2
- 3
- 4
然后就可以通過echarts.init方法初始化一個 echarts 實例並通過setOption方法生成一個 折線圖/面積圖
<script type="text/javascript"> // 基於准備好的dom, 初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 使用剛指定的配置項和數據顯示圖表 myChart.setOption(option) </script>
代碼步驟拆分
var option = {} // 指定圖標的配置和數據
數據源
// 數據集 var dataList = [ {date: '08/01', value: 16}, {date: '08/02', value: 56}, {date: '08/03', value: 46}, {date: '08/04', value: 11}, {date: '08/05', value: 116}, {date: '08/06', value: 146}, {date: '08/07', value: 116}, {date: '08/08', value: 56}, {date: '08/09', value: 36}, {date: '08/10', value: 129}, {date: '08/11', value: 145}, {date: '08/12', value: 115}, {date: '08/13', value: 105}, {date: '08/14', value: 45}, {date: '08/15', value: 87}, {date: '08/16', value: 82}, {date: '08/17', value: 24}, {date: '08/18', value: 78}, {date: '08/19', value: 56}, {date: '08/20', value: 52}, {date: '08/21', value: 78}, {date: '08/26', value: 123}, {date: '08/31', value: 130} ] var xKeys = dataList.map((item) => item.date); var values = dataList.map((item) => item.value);
title
title: { text: '球隊近30日盈利情況', show: true, textStyle: { color: '#fff', fontSize: '36', fontFamily: 'Microsoft YaHei', fontWeight: 400 }, top: '42', left: '40' }
legend (配合series才會顯示)
legend: { top: 150, right: 0, z: 4, textStyle: { fontSize: "24px", fontFamily: "Microsoft YaHei", fontWeight: 400, color: "#c2cbf2", }, }
grid
grid: { left: 70, top: 200, right: 40, bottom: 80 }
xAxis（直角坐標系 grid 中的 x 軸）
xAxis: [ { type: 'category', data: xKeys, color:'#323e52', axisLabel: { margin: 20, interval: 'auto', textStyle: { fontSize: 24, fontFamily: 'Microsoft YaHei', fontWeight: 400, textAlign: 'center', color: '#c2cbf2' } }, position: 'bottom', axisLine: { lineStyle: { color: '#b7ccff', type: 'solid' } }, splitLine: { show: false } } ]
yAxis（直角坐標系 grid 中的 y 軸）
yAxis: { type: 'value', silent: true, interval: 30, min: 0, max: 150, axisLabel: { textStyle: { fontSize: 24, fontFamily: 'Microsoft YaHei', fontWeight: 400, textAlign: 'right', color: '#c2cbf2' } }, axisLine: { show: false }, axisTick: { show: false }, splitLine: { show: true, lineStyle: { color: '#232842', type: 'solid' } } }
series（系列列表。每個系列通過 type 決定自己的圖表類型）
series: [ { name: '盈利資金(萬)', type: 'line', // 折現/面積圖 data: values, itemStyle: { color: '#24def3' }, symbol: 'emptyCircle', // 幾何圓 symbolSize: 10, areaStyle: { // 區域填充樣式 color: { // 填充的顏色 // 線性漸變，前四個參數分別是 x0, y0, x2, y2, 范圍從 0 - 1，相當於在圖形包圍盒中的百分比，如果 globalCoord 為 `true`，則該四個值是絕對的像素位置 type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#25eaff', // 0% 處的顏色 }, { offset: 1, color: '#121f35' // 100% 處的顏色 } ], global: false, // 缺省為 false } }, xAxisIndex: 0 } ]
修改部分問題（bug）
示例: 問題一
grid: { left: 'auto', top: 346, right: 'auto', containLabel:true, bottom: 20, }, //grid這樣寫，左右都寫成auto，還要加containLabel，不然就有可能擋住y軸的標簽
示例: 問題二
yAxis里面的max不能寫死，不然最大值永遠不會變，比如max=100，實際的值超過是200，那就會擋住
- 1
