如何使用Tushare和Echarts来画股票K线图

最新推荐文章于 2025-02-25 10:23:23 发布

m0_46502874

最新推荐文章于 2025-02-25 10:23:23 发布

阅读量3.6k

点赞数 3

分类专栏：数据可视化文章标签： javascript tushare echarts python

本文链接：https://blog.csdn.net/m0_46502874/article/details/113916332

版权

如何使用Tushare和Echarts来画股票K线图

技术支持

Tushare大数据社区官网

首先介绍一下这次要使用的两个工具，Tushare是一个基于Python的金融数据接口，拥有丰富的数据内容，如股票、基金、期货、数字货币等行情数据，公司财务、基金经理等基本面数据等（详细介绍进官网）。如果你之前没有注册过Tushare，而且恰好对金融量化、金融数据分析感兴趣，不妨注册一个Tushare账号，可以获取想要的数据，点击注册。

ECharts官网

常见的数据可视化库：

D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
ECharts.js 百度出品的一个开源 Javascript 数据可视化库
Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
AntV 蚂蚁金服全新一代数据可视化解决方案等等
Highcharts 和 Echarts 就像是 Office 和 WPS 的关系

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表,详细介绍可进官网查看.

大白话：

是一个JS插件
性能好可流畅运行PC与移动设备
兼容主流浏览器
提供很多常用图表，且可定制（折线图、柱状图、散点图、饼图、K线图）

实现结果

先展示一下最终的结果，下面第一张图是利用Tushare和Echarts做出而来的贵州茅台的日K图，第二张图是同花顺网页版的贵州茅台的日K图。除了数据的展示不一样之外，数据的内容是一样的。

Echarts制作的贵州茅台日K
同花顺贵州茅台日K

实现步骤

1.搭建运行环境

我这里的运行环境是Python 3.8.0，Tushare的版本是1.2.62的，因为Tushare是Python的第三方包，所以需要导入，详细步骤见：说明。

# 导入tushare
import tushare as ts
# 设置token
ts.set_token('your token here')
# 初始化pro接口
pro = ts.pro_api( )

至此数据获取的环境已经搭建好了，我们来试一下获取的数据是什么样子的。

daily_data=pro.daily(ts_code='600519.SH', start_date='20210101', end_date='20210220')
print（daily_data）
print（type(daily_data)）

输出的结果是下面的图中所显示的，你会发现有交易日期，开盘价，收盘价，最高价，最低价，成交量等数据。数据的形式是DataFrame类型的，也就是说daily_data具备DataFrame的一般方法和属性，因此数据的显示是从最新数据显示在最前面，但是K线需要的是最近成交的数据显示在最后面，待会我们在来处理数据的问题，这一步说明我们数据接口已经可以使用了。
在这里插入图片描述

现在开始要引入数据可视化的JavaScript文件，点击进入下载地址，会弹出下面的图片，需要下载的内容是echarts.js或者echarts.min.js都可以，下载完后要记得放到对应的工作环境中，方便后面的引入。

2.先画图

在画图之前，我们有必要对Echarts有个基本的了解，建议先去Echarts官网浏览5 分钟上手 ECharts,可以对Echarts有个基本的了解.

使用步骤：

引入 ECharts：通过标签方式直接引入构建好的 echarts 文件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

准备一个具备大小的DOM容器，用来放图。

<div id="main" style="width: 600px;height:400px;"></div>

初始化echarts实例对象

var myChart = echarts.init(document.getElementById('main'));

指定配置项和数据(option)

var option = {
     
    xAxis: {
     
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
     
        type: 'value'
    },
    series: [{
     
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

将配置项设置给echarts实例对象
```
myChart.setOption(option);
```

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color

series：系列列表。每个系列通过 type 决定自己的图表类型；大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
xAxis：直角坐标系 grid 中的 x 轴
boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
yAxis：直角坐标系 grid 中的 y 轴
grid：直角坐标系内绘图网格。
title：标题组件
tooltip：提示框组件
legend：图例组件
color：调色盘颜色列表[]

OK，对上面的知识点有了一定的了解之后，我们可以开始来画我们需要的K线图了。我先把Echarts的全部代码先贴出来，后面在分别解释没块代码的作用。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>debug</title>
    <style>
        #k-box{
   
            height: 100%;
            width: 50%;
            background: white;
            display: inline-block;
        }
    </style>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="k-box"></div>
<script>
    const chartDom = document.getElementById('k-box');
    const myChart = echarts.init(chartDom);
    var option;

    const upColor = '#008000';
    const downColor = '#c00c00';

	// 对数据进行处理的函数,将交易日期,成交量,价格信息分别放置在不同的数组
    function splitData(rawData) {
   
        var categoryData = [];
        var values = [];
        var volumes = [];
        for (var i = 0; i < rawData.length; i++) {
   
            categoryData.push(rawData[i].splice(0, 1)[0]);
            values.push(rawData[i]);
            volumes.push([i, rawData[i][4], rawData[i][0] > rawData

最低0.47元/天解锁文章