ECharts实现折线图颜色分段及垂直X轴的markline标注

于 2019-08-16 17:36:33 发布
阅读量6.7k 收藏 2
点赞数 2
CC 4.0 BY-SA版权
分类专栏： echart echarts
原文链接：https://blog.youkuaiyun.com/u011669700/article/details/53104168
本文介绍使用ECharts实现折线图分段显示的方法，通过动态分割数据并生成多个series元素，配合markline实现平行于y轴的趋势线，以适应不同参数需求。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

注：案列展示地址  https://gallery.echartsjs.com/editor.html?c=xBkYIDiWWl&v=1

一、预期效果
可以根据传递的参数的不同生成相应的折线图分段 


二、技术要点
1、需要根据传参分割原有折线图的数据，用于生成不同的series子元素，便于后面的折线图分段展现。 
2、折线图平行于y轴的markline实现并不友好，对于高度最高是在初次创建图标的时候就是写死的，因为目前没有找到任何方法可以获取ECharts图标自动生成的Y轴最大值。

三、代码展示
<html>
<body>
    <div class="row">
        <div class="container">
            <div class="col-lg-4 col-md-4">
                <button class="btn btn-default" onclick="initCharts()">生成图像</button>
            </div>

            <div class="col-lg-8 col-md-8">
                <div id="main" style="height: 300px;">

                </div>
                <button id="adjust" class="btn btn-primary pull-right" onclick="transCharts(['周三', '周五'])">调整</button>
            </div>
        </div>
    </div>
</body>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="echarts3/echarts.js"></script>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    function initCharts() {
        var option = {
            title: {
                text: '未来一周气温变化',
                subtext: '纯属虚构'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                data: ['周一','周二','周三','周四','周五','周六','周日']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} °C'
                },
                max: 15
            },
            series: [
                {
                    name:'最高气温',
                    type:'line',
                    data:[6, 8, 11, 10, 12, 13, 10]
                }
            ]
        };
        myChart.clear();
        myChart.setOption(option);
    }
    //根据传入的点进行数据分割, option填充和重新制图
    function transCharts(splitPoints) {
        var oldOption = myChart.getOption();
        var data = oldOption.series[0].data;
        var dataTime = oldOption.xAxis[0].data;
        var splitIndex = [];
        for (var i =0; i < splitPoints.length; i++) {
            splitIndex.push(dataTime.indexOf(splitPoints[i]));
        }
        console.log(splitIndex);

        var series = [];
        var index = 0;
        var seriesData = new Array(splitIndex.length+1);
        for (var i = 0; i < seriesData.length; i++) seriesData[i] = new Array();
        for (var i = 0; i < data.length; i++) {
            console.log(i + '-----------' + index);
            if (i < splitIndex[index]) {
                seriesData[index].push(data[i]);
                for (var j = index+1; j < seriesData.length; j++) {
                    seriesData[j].push('-');
                }
            }
            else if (i == splitIndex[index]) {
                seriesData[index].push(data[i]);
                seriesData[++index].push(data[i]);
                for (var j = index+1; j < seriesData.length; j++) {
                    seriesData[j].push('-');
                }
            }
            else {
                seriesData[index].push(data[i]);
            }
            for (var k = 0; k < seriesData.length; k++) {
                console.log(seriesData[k]);
            }
            console.log(i + '-----------');
        }

        for (var i = 0; i < seriesData.length; i++) {
            series.push({
                name: i+'',
                type: 'line',
                data: seriesData[i]
            });
        }
        var markLineData = [];
        for (var i = 0; i < splitPoints.length; i++) {
            markLineData.push([
                {coord:[splitPoints[i], 0]},
                {coord:[splitPoints[i], oldOption.yAxis[0].max]}
            ])
        }
        series.push({
            name:'平行于y轴的趋势线',
            type:'line',
            markLine: {
                name:'aa',
                data: markLineData
            }
        })


        var options = {
            title: oldOption.title,
            tooltip: oldOption.tooltip,
            xAxis:  oldOption.xAxis,
            yAxis: oldOption.yAxis,
            series: series
//            series: [
//                {
//                    name: '最高气温',
//                    type: 'line',
//                    data: [6, 8, 11]
//                },
//                {
//                    name: '最高气温1',
//                    type: 'line',
//                    data: ['-', '-', 11, 10, 12]
//                },
//                {
//                    name: '最高气温2',
//                    type: 'line',
//                    data: ['-','-', '-', '-', 12, 13, 10]
//                },
//                {
//                    name:'平行于y轴的趋势线',
//                    type:'line',
//                    //data:[0],
//                    markLine: {
//                        name:'aa',
//                        data: [[
//                            {coord:['周三',0]},
//                            {coord:['周三',15]}//如何获取grid上侧最大值，目前是写死的
//                        ],[
//                            {coord:['周五',0]},
//                            {coord:['周五',15]}//如何获取grid上侧最大值，目前是写死的
//                        ]]
//                    }
//                }
//            ]
        };
        myChart.clear();
        myChart.setOption(options);
    }
</script>
</html>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值