echarts 折线图数据绘制一个K线图表()

项目中客户有这个需求(主要想看涨跌)，这里记录一下。效果图 ：

简单的k线图需要四条数据（//开盘(open)，收盘(close)，最低(lowest)，最高(highest)）。开盘价取折线图的实时价，收盘价也取折线图的实时价，最低最高在随机取值就会有折线图的感觉(没有中间的块，只判断涨跌)。

折线图数据实时刷新，涨跌echarts会判断(开盘价和收盘价一样,后一条数据的值比前一条数据的值大，判为涨，否则为跌)

主要代码:

getLine() {
	let echart = document.getElementById("goldEchart");
	this.goldEchart = echarts.init(echart);

	let dateList = [];
	let valueList = [];
	let data = []
	let dates = []

	//this.lineList 后台数据格式如下:
	//id: 9031
	//latestpri: "1510.64"
	//limit: "-0.16%"
	//time: "2019-11-01 19:20:24"
	//dat是一个时期格式化函数

	this.lineList.forEach((value, key) => {
		valueList.push(Number(value.latestpri))
		dates.push(dat(new Date(value.time), 'hh:mm'))
		let minpri = Number(value.latestpri) - Math.random() * 0.05
		let maxpri = Number(value.latestpri) + Math.random() * 0.05
		data.push([value.latestpri, value.latestpri, Number(minpri).toFixed(2), Number(maxpri).toFixed(2)])
	})
	//价格最小值(y轴最小刻度)
	let min = Math.round(Math.min.apply(Math, valueList));
	let max = Math.round(Math.max.apply(Math, valueList));
	let option = {
		animation: false,
		tooltip: {
			trigger: "axis",
			type: 'none',
			//提示框背景色
			backgroundColor: '#DA5151',
			//提示框样式
			formatter: function(params) {
				params = params[0];
				return params.name + '</br><p style="background:#fff;display:inline-block;width:9px;height:9px;border-radius:50%"></p> ' + params.value[1] + '<span style="font-size:12px">' + ' ' + '</span>';
			},
			axisPointer: {
				type: 'none', //去掉提示框竖线
			}
		},
		xAxis: [{
			splitNumber: 5,
			type: 'category',
			boundaryGap: false,
			axisLine: {
				show: false,
				onZero: false,
				lineStyle: {
					color: '#999'
				}
			},
			axisLabel: {
				interval: 'auto', //横坐标间隔
			},
			axisTick: { //x轴刻度线
				show: false
			},
			data: dates
		}],
		yAxis: [{
			splitNumber: 5,
			type: 'value',
			max: max + 0.5,
			min: min - 0.5,
			axisLabel: {
				formatter: function(value, index) {
					return value.toFixed(2);
				}
			},
			axisLine: {
				show: false, //隐藏纵轴坐标线
				onZero: false,
				lineStyle: {
					color: '#999'
				}
			},
			axisTick: { //y轴刻度线
				show: false
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: '#555',
					type: 'dotted'
				}
			},
		}],
		grid: [{
			top: 20,
			left: 55,
			right: 15,
			bottom: 30,
		}],
		series: [{
			type: 'candlestick',
			name: '日K',
			data: data,
			itemStyle: {
				normal: {
					color: '#d52c21',
					color0: '#5ab13e',
					borderColor: '#d52c21',
					borderColor0: '#5ab13e'
				},
			},
		}]
	};

	if(this.goldEchart) {
		this.goldEchart.clear() //clear 重新绘制
		this.goldEchart.setOption(option);
	}

	//显示提示框
	this.goldEchart.dispatchAction({
		type: 'showTip',
		seriesIndex: 0, // 显示第几个series
		dataIndex: data.length - 1 // 显示第几个数据
	});
}