基于echarts定制修改的k线图工具

注：百度echarts拷贝下来的k线图框架，根据需求自己修改制作的k线图工具

前端代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>echarts测试</title><script type="text/javascript" src="../static/echarts.js"></script><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head><style>#main {margin: auto auto;}
</style><body><!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 1200px;height:800px;"></div>
<script type="text/javascript">var chartDom = document.getElementById('main')var myChart = echarts.init(chartDom);const upColor = '#ec0000';const upBorderColor = '#8A0000';const downColor = '#00da3c';const downBorderColor = '#008F28';// Each item: open，close，lowest，highestvar responseData;var tradeData;var d=[]//小数转百分比的函数function toPercent(point){if (point==0) {return 0;}var str=Number(point*100).toFixed(2);str+="%";return str;}//发送同步请求到后端拿数据$.ajax({url: '/api/deal_data',type: 'GET',async: false,          //同步success: function (data) {responseData = data['data_list']}});const data0 = splitData(//     [['2013/1/24', 2320.26, 2320.26, 2287.3, 2362.94, ...]], responseData);//将拿到的数据列表进行拆分，日期放到日期列表，其他数据放到值列表function splitData(rawData) {const categoryData = [];const values = [];for (var i = 0; i < rawData.length; i++) {categoryData.push(rawData[i].splice(0, 1)[0]); values.push(rawData[i]);// console.log(rawData[i][7])if(rawData[i][7] === 1.0){//把所有的买、卖、平仓点放到列表d.push({name: 'Mark',coord: [categoryData[i], rawData[i][8]], value: '买'+' \n '+toPercent(rawData[i][9]),itemStyle: {color: 'rgb(255,48,48)'}},{name: 'Mark',coord: [rawData[i][10], rawData[i][11]],value: '平',itemStyle: {color: 'rgb(255,236,139)'}})}if(rawData[i][7] === -1.0){d.push({name: 'Mark',coord: [categoryData[i], rawData[i][8]],value: '卖'+' \n '+toPercent(rawData[i][9]),itemStyle: {color: 'rgb(41,60,85)'}},{name: 'Mark',coord: [rawData[i][10], rawData[i][11]],value: '平',itemStyle: {color: 'rgb(255,236,139)'}})}}return {categoryData: categoryData,values: values,};}//中轨、上轨、下轨的函数定义赋值function calculateMA(dayCount) {if (dayCount === 'median') {var median_result = [];for (var i = 0, len = data0.values.length; i < len; i++) {median_result.push(data0.values[i][4])}return median_result;}if (dayCount === 'upper') {var upper_result = [];for (var i = 0, len = data0.values.length; i < len; i++) {// if (i < len) {upper_result.push(data0.values[i][5])}return upper_result}if (dayCount === 'lower') {var lower_result = [];for (var i = 0, len = data0.values.length; i < len; i++) {// if (i < len) {lower_result.push(data0.values[i][6])}return lower_result}}option = {title: {text: '交易',left: 0},tooltip: {trigger: 'axis',axisPointer: {type: 'cross'}},legend: {data: ['日K', '中轨', '上轨', '下轨']},grid: {left: '10%',right: '10%',bottom: '15%'},xAxis: {type: 'category',data: data0.categoryData,scale: true,boundaryGap: false,axisLine: {onZero: false},splitLine: {show: false},min: 'dataMin',max: 'dataMax'},yAxis: {scale: true,splitArea: {show: true}},dataZoom: [{type: 'inside',start: 50,end: 100},{show: true,type: 'slider',top: '90%',start: 50,end: 100}],series: [{name: '日K',type: 'candlestick',data: data0.values,itemStyle: {color: upColor,color0: downColor,borderColor: upBorderColor,borderColor0: downBorderColor},//k线上的气泡markPoint: {label: {formatter: function (param) {return param != null ? param.value + '' : '';}},data: d,tooltip: {formatter: function (param) {return param.name + '<br>' + (param.data.coord || '');}}},},{name: '中轨',type: 'line',data: calculateMA('median'),smooth: true,lineStyle: {opacity: 0.5}},{name: '上轨',type: 'line',data: calculateMA('upper'),smooth: true,lineStyle: {opacity: 0.5}},{name: '下轨',type: 'line',data: calculateMA('lower'),smooth: true,lineStyle: {opacity: 0.5}},]};option && myChart.setOption(option);</script>

后端代码：

from flask import Flask,request,render_template
import pandas as pdapp=Flask(__name__)# pd.set_option('display.max_columns', None)
# pd.set_option('display.max_row', None)@app.route('/')
def index():return render_template('klines_generate.html')@app.route('/api/deal_data')
def deal_data():pos_data = pd.read_csv('position3.csv')trade_data = pd.read_csv('trade.csv')# 表时间格式转换trade_data['candle_begin_time'] = pd.to_datetime(trade_data['start_time'], format='%Y/%m/%d %H:%M')pos_data['candle_begin_time'] = pd.to_datetime(pos_data['candle_begin_time'])# print(pos_data)# 合表result = pos_data.merge(trade_data, how='outer')result.fillna(value=0, inplace=True)df = pd.DataFrame(result)df = df[['candle_begin_time', 'open', 'close', 'low', 'high', 'median', 'upper', 'lower', 'signal', 'start_price','change', 'end_bar', 'end_price']]result = df.values.tolist()return {'data_list': result}if __name__ == '__main__':app.run(host='0.0.0.0',port=5000)

pandas读取的csv文件，这里只拿部分数据展示：

交易的文件：

k线图上的数据：

后端代码说明：
首先交易文件中是没有‘candle_begin_time’这个字段的，为了合表方便，所以新增了该字段，并将两张表中的时间转换成一样的格式。
将两张表按照相同的时间进行合并，没有匹配到的行中会出现空值，用0填充
最后取出有用的列，将series格式转换成列表，返回给前端。

时间对应的就是k线图上的x坐标
附上效果图：
我这里是13万数据

基于echarts定制修改的k线图工具相关推荐

如何使用Tushare和Echarts来画股票K线图
如何使用Tushare和Echarts来画股票K线图技术支持 Tushare大数据社区官网首先介绍一下这次要使用的两个工具,Tushare是一个基于Python的金融数据接口,拥有丰富的数据内 ...
plotly基于dataframe数据绘制股票K线图并过滤非交易时间
plotly基于dataframe数据绘制股票K线图并过滤非交易时间 #ohlc过滤非交易时间: import plotly as py # 导入plotly库并命名为py import plotly ...
如何使用Echarts设计专业的K线图
如何使用Echarts设计专业的K线图先上图: Echarts所需的K线的数据结构有:时间(date),开盘(open),收盘(close),最低(lowest),最高(highest),成交量(v ...
javascript：echarts 画基金周K线图
以广发双擎升级混合基金 (005911)为例 W005911.html <!DOCTYPE html> <html> <head><meta charset= ...
用AnyStock和LightningChart打造炫酷的制作股票、金融业K线图工具产品
近年来资本市场风起云涌,如何通过数字化.图形化手段分析金融产品是一个将经验工具化的手段,那么今天我们来聊一聊如何打造一款图形化金融工具--股票交易图(K线图). 最近小编在多个开发控件产品群看到有一群 ...
echarts配置及专业k线作图工具
一般看官网配置比较多,教大家如何copy完线性图代码,快速更改配置. echerts线图常用配置: grid: [{left: '0%',right: '5%',top: '5%',height: ' ...
java+web+股票图表_基于Echarts的股票K线图展示
一.概述这是一个简单的股票K线图展示,利用echarts第三方进行配置,用户可以进行放大缩小查看K线图,还可进行拖拽. 二.演示效果三.目录结构其中dist文件夹是echart插件,jquery ...
php k线图 echarts,股票K线图，折线图总结（echarts）
此处利用bootstrap+echarts画布配置参数实现响应式,并且利用socket实时通信实现数据的实时更新 (一)介绍 ECharts (Enterprise Charts 商业产品图表库) E ...
基于Highcharts箱线图实现k线图
如何制作一个k线图? 似乎可利用的插件或库有很多,比如echarts.highcharts.d3.js等.使用echarts是最简单的,有现成的demo可供参考,而d3可定制性是最高的,这些定制需要你 ...

基于echarts定制修改的k线图工具

基于echarts定制修改的k线图工具

基于echarts定制修改的k线图工具相关推荐

最新文章

热门文章