前言
現在需要用到畫各種報表圖的地方是越來越多了，現在時下流行的畫報表和雷達圖的插件是echarts。本人就來簡單說說如何用echarts畫k線圖吧
原創地址：https://www.cnblogs.com/caominjie/p/11460363.html
快速實現
根據需求下載或者配置echarts插件
下載配置地址：echarts 這里有案例包，也有js文件，也有npm，更有定制化下載
案例上手
選擇它的官方案例 可以找到你需要的各種樣式需求，
選中其中你需要的進入，左側是代碼，右側是圖形，但最好先看看它的 5分鍾快速上手.
基本的使用還是要靠它的
api配置查詢
在配置它圖片的時候有許多配置可能沒看懂，可以結合的api文檔查看. 查看方法是把關鍵字在左上側黏貼進去會有提示出來，選中你要的。如： xAxis.type
基本看看文檔就能解決大多數問題了
實現代碼
現在到了重頭戲了，說了那么多就是想看看實現，下面就提供代碼：
代碼中各種配置屬性是我辛苦查詢的，方便以后快速配置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用echarts畫一個簡單的k線圖</title>
<!-- 導入的js自己下去,在官網：https://echarts.apache.org/examples/zh/index.htm -->
<script src="./js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">
// 基於准備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
var rawData = [['2015/12/31','3570.47','3539.18','-33.69','-0.94%','3538.35','3580.6','176963664','25403106','-'],['2015/12/30','3566.73','3572.88','9.14','0.26%','3538.11','3573.68','187889600','26778766','-'],['2015/12/29','3528.4','3563.74','29.96','0.85%','3515.52','3564.17','182551920','25093890','-'],['2015/12/28','3635.77','3533.78','-94.13','-2.59%','3533.78','3641.59','269983264','36904280','-'],['2015/12/25','3614.05','3627.91','15.43','0.43%','3601.74','3635.26','198451120','27466004','-'],['2015/12/24','3631.31','3612.49','-23.6','-0.65%','3572.28','3640.22','227785216','31542126','-'],['2015/12/23','3653.28','3636.09','-15.68','-0.43%','3633.03','3684.57','298201792','41990292','-'],['2015/12/22','3645.99','3651.77','9.3','0.26%','3616.87','3652.63','261178752','36084604','-'],['2015/12/21','3568.58','3642.47','63.51','1.77%','3565.75','3651.06','299849280','39831696','-'],['2015/12/18','3574.94','3578.96','-1.03','-0.03%','3568.16','3614.7','273707904','36538580','-'],['2015/12/17','3533.63','3580','63.81','1.81%','3533.63','3583.41','283856480','38143960','-'],['2015/12/16','3522.09','3516.19','5.83','0.17%','3506.29','3538.69','193482304','26528864','-'],['2015/12/15','3518.13','3510.35','-10.31','-0.29%','3496.85','3529.96','200471344','27627494','-'],['2015/12/14','3403.51','3520.67','86.09','2.51%','3399.28','3521.78','215374624','27921354','-'],['2015/12/11','3441.6','3434.58','-20.91','-0.61%','3410.92','3455.55','182908880','24507642','-'],['2015/12/10','3469.81','3455.5','-16.94','-0.49%','3446.27','3503.65','200427520','27949970','-'],['2015/12/9','3462.58','3472.44','2.37','0.07%','3454.88','3495.7','195698848','26785488','-']].reverse();
// 計算各種日線圖
function calculateMA(dayCount, data) {
var result = [];
for (var i = 0, len = data.length; i < len; i++) {
if (i < dayCount) {
result.push('-');
continue;
}
var sum = 0;
for (var j = 0; j < dayCount; j++) {
sum += data[i - j][1];
}
result.push(sum / dayCount);
}
return result;
}
var dates = rawData.map(function (item) {
return item[0];
});
var data = rawData.map(function (item) {
return [+item[1], +item[2], +item[5], +item[6]];
});
// 指定圖表的配置項和數據
var option = {
backgroundColor: '#21202D',// 背景色
legend: {// 要畫的線
data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'],
inactiveColor: '#777',//圖例關閉時的顏色。
textStyle: {//圖例的公用文本樣式。
color: '#fff'
}
},
tooltip: {//提示框組件
trigger: 'axis',
axisPointer: {//坐標軸指示器配置項。
animation: false,// 過渡動畫
type: 'cross',// 類型:'line' 直線指示器,'shadow' 陰影指示器,'none' 無指示器,'cross' 十字准星指示器。
lineStyle: {// 線的樣式
color: '#376df4',// 鼠標放到圖上會出來一個豎立的坐標線
width: 2,
opacity: 1
}
}
},
xAxis: {//x軸設置
type: 'category',// 坐標軸類型。'value' 數值軸，適用於連續數據。'category' 類目軸，適用於離散的類目數據.'time' 時間軸，適用於連續的時序數據.'log' 對數軸。適用於對數數據。
data: dates,// x軸數據循環方法返回結果
axisLine: { lineStyle: { color: '#8392A5' } }// 底部x軸顏色
},
yAxis: {// y軸設置
scale: true,//是否是脫離 0 值比例。設置成 true 后坐標刻度不會強制包含零刻度。在雙數值軸的散點圖中比較有用。
axisLine: { lineStyle: { color: '#8392A5' } },//y軸線的顏色
splitLine: { show: false }//是否顯示分隔線。默認數值軸顯示，類目軸不顯示。
},
grid: {//直角坐標系內繪圖網格，單個 grid 內最多可以放置上下兩個 X 軸，左右兩個 Y 軸。可以在網格上繪制折線圖，柱狀圖，散點圖（氣泡圖）。
bottom:60//grid 組件離容器下側的距離。單位像素
},
dataZoom: [{//組件 用於區域縮放，從而能自由關注細節的數據信息，或者概覽數據整體，或者去除離群點的影響。就是滾軸上下滾的縮放
textStyle: {
color: '#8392A5'
},
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',// 鼠標放在柱上會出來的圖標,默認小手
handleSize: '80%',//控制手柄的尺寸，可以是像素大小，也可以是相對於 dataZoom 組件寬度的百分比，默認跟 dataZoom 寬度相同。
dataBackground: {//數據陰影的樣式。
areaStyle: {//陰影的填充樣式
color: '#8392A5'
},
lineStyle: {//陰影的線條樣式
opacity: 0.8,
color: '#8392A5'
}
},
handleStyle: {//手柄的樣式配置
color: '#fff',
shadowBlur: 3,//圖形陰影的模糊大小
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}, {
type: 'inside'
}],
animation: false,// 翻頁動畫
// 這里開始設置日k線,如單日,5日,10日,20日,30日
series: [//系列列表。每個系列通過 type 決定自己的圖表類型
{
type: 'candlestick',// 顯示種類,如線性等
name: '日K',
data: data,// 日k線每日的數據
itemStyle: {// 對象樣式
normal: {
color: '#FD1050',
color0: '#0CF49B',
borderColor: '#FD1050',
borderColor0: '#0CF49B'
}
}
},
{
name: 'MA5',// 5日k線
type: 'line',
data: calculateMA(5, data),// 使用它返回數據方法(幾天，數據)
smooth: true,//平滑曲線顯示(好看絲滑)
showSymbol: true,//是否顯示 symbol, 如果 false 則只有在 tooltip hover 的時候顯示。
lineStyle: {
normal: {
width: 1// 5日k線粗細
}
}
},
{
name: 'MA10',
type: 'line',
data: calculateMA(10, data),
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
}
},
{
name: 'MA20',
type: 'line',
data: calculateMA(20, data),
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
}
},
{
name: 'MA30',
type: 'line',
data: calculateMA(30, data),
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
}
}
]
};
//option.title = {text:"new"}
console.log(option)
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</html>
希望我寫的案例能幫助到需要的人！！！
注意原創，不要盜用