Echarts实现股票前五盈亏数据图

最新推荐文章于 2025-06-16 15:09:16 发布

无处安放的九歌

最新推荐文章于 2025-06-16 15:09:16 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 Echarts 文章标签： Echarts 股票

本文链接：https://blog.csdn.net/weixin_38201728/article/details/100304526

场景：做某基金中的股票收益分析的时候，要把收益前五和亏损前5的股票给列出来；实现如效果图：

要求

显示股票收益前五和亏损前五
通过Echarts实现要求左绿右红

效果图

代码实现，重要步骤已经进行注释

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>股票盈亏前5正负交错轴显示</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>