echarts自定义折线图-堆叠区域图

最新推荐文章于 2025-05-19 11:38:42 发布

Bonjours

最新推荐文章于 2025-05-19 11:38:42 发布

阅读量2.7k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端文章标签： echarts折线图堆叠区域图 y轴数值与实际不符自定义折线区域渐变色

本文链接：https://blog.youkuaiyun.com/Bonjours/article/details/103679844

效果如下：

这里使用了官方文档中的堆叠区域图来改造的。有几个注意的地方：

series下的【stack: '总量' 】要去掉，否则y轴数值就会相加，与正确数值不符
改变折线区域的线条颜色和区域渐变色
指针不想是十字指示，可将tooltip下的axisPointer的type: 'cross'改为'line'
如果不想折线那么尖锐，可以在series里加上smooth: true变为柔和曲线，具体看整体设计而定

整体代码如下：

<div id="part6" style="width: 100%;height:240px;"></div>

<script src="js/jquery.min.js"></script>
<script src="echarts/dist/echarts.min.js"></script>

<script type="text/javascript">
    //第6部分
    var dom6 = document.getElementById("part6");
    var myChart6 = echarts.init(dom6);
    var app6 = {};
    option6 = null;
    option6 = {
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                //xy轴十字架指示数值背景区域色
                label: {
                    backgroundColor: '#6a7985'