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

最新推荐文章于 2024-07-08 17:31:39 发布
最新推荐文章于 2024-07-08 17:31:39 发布
阅读量6.4k 收藏 2
点赞数 2
分类专栏： echart echarts
原文链接：https://blog.csdn.net/u011669700/article/details/53104168
版权

注：案列展示地址  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" οnclick="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" οnclick="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>

yezitoo
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts折线图曲线图分段用不同颜色显示，曲线改变颜色例子，Y轴超过某一数值曲线变色
05-04
echarts折线图曲线图分段用不同颜色显示，Y轴超过某一数值变色,echarts曲线改变颜色例子,x轴和y轴数据可以自己定义,曲线默认显示黑色(black)，400以上900以下显示成金色(gold)。 核心代码 visualMap: { show: false...
echarts 双折线图 实现 与虚线
05-15
根据提供的信息，我们可以深入探讨如何在 ECharts 中实现双折线图，并且让其中一条折线显示为虚线。此示例代码虽然未完全展示，但已经足够让我们理解其核心概念和技术要点。 ### 一、ECharts 双折线图简介 #### ...
Echarts图给坐标轴加一个标识线markLine
热门推荐
lhxsirky的博客
08-29 4万+
Echart3数据可视化视图 给坐标轴加一个标识线markLine 当X轴不是数值时，而是一个类型数据，如年份，公司名，企业名，这时Echarts图就不是从X轴起始位置开始的，所以我们就要给X轴加一个虚拟的值’0’，在markLine中也是在赋值起始位置X轴值时，放置虚拟数据，并且设置一个boundaryGap: 0,可以让坐标轴与刻度之间空白变为0，这时标示线就从X轴起始位置开始了，详细属性...
Echarts添加一条垂直于x轴的直线
weixin_42720512的博客
01-14 1万+
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
echarts折线图加一条目标值线
最新发布
admire_fish的博客
07-08 822
在这个例子中，我们定义了一个目标值 targetValue，然后在 markLine 的 data 数组中添加了一个对象来表示这条线。我们设置了线的起点和终点，并定制了线的样式和标签，这样就在 ECharts 折线图中添加了一条目标值线。
echarts X轴 或者 Y轴 添加标识线
银滴子的博客
11-06 1万+
1、X轴添加标示线效果图 代码 option = { xAxis: { data : ['aaa','bbb'] }, yAxis: {}, series: [{ symbolSize: 20, data: [ ['aaa', 8.04], ['bbb', 9....
【EXCEL】折线图添加垂直x轴的竖线|画图
qq_50653422的博客
12-08 7875
因为加辅助列有点不习惯，已经有分位数横坐标了，想着试下用散点图的误差线画。ps：看清楚是垂直误差线而不是水平误差线。
echarts 中 markLine垂直于X轴线， 折线图上新增区域块加颜色markarea
sunnyboysix的博客
02-01 7378
一 效果图 二 代码 { data: [0.54, 0.52, 0.72, 0.82, 0.44, 0.36, 0.82, 0.52, 0.74], type: 'line', markLine: { lineStyle: { width: 3, color: '#F7B500', },
echarts中markline移动，x轴绘制俩条垂直移动线
qq_45525250的博客
07-26 4700
坐标轴上有俩条垂直markline，并且可以单独移动。
echarts中画垂直的标识线
weixin_42209881的博客
08-16 2363
代码】echarts中画垂直的标识线。
在vue中使用echarts(折线图的demo,markline用法)
10-15
通过以上步骤，你已经在Vue中成功实现了ECharts折线图并添加了markline功能。你可以根据项目需求调整配置，以展示不同类型的图表和自定义标记线。记得在实际项目中根据实际情况调整样式和数据源，以满足实际需求。
echarts实现折线图的拖拽效果
10-15
在实现折线图的拖拽效果时，首先需要初始化ECharts实例并提供一个容器（如上例中的main div），然后利用setOption方法定义图表的各种配置，包括坐标轴、提示框以及系列（series）。接着，通过设置graphic组件，为每...
在Echarts图中给坐标轴加一个标识线markLine
10-15
在Echarts图中添加标识线markLine主要涉及以下几个方面： 1. 理解markLine：markLine即标记线，用于在Echarts图表中绘制直线，常见用于显示平均值、趋势线等。它作为图表的一个属性存在，可以轻松地在图表中的指定...
echarts 添加警戒线markline
七月❤的博客
07-30 1320
markLine: { data: [ {xAxis: 13, name: '最低警戒值'}, //{xAxis: 27, name: '最高警戒值'} ], label:{ color:'#ffff' }, lineStyle:{ color: '#006dd.
excel 添加垂直竖向直线
WenbinYao&YouweiHu
01-09 1万+
0 需求 写论文时遇到一个需求就是要给excel出的图添加一个垂直的竖直线，而且希望这个竖直线是和图本身一体的，而不是添加了一个形状。效果如下图所示，我在x=3的位置添加了一个竖直线。 1 基本思路 实现这个竖直线的基本思路是添加一列辅助列，在需要添加竖直线的位置写上一个数字m，m的数量级和y轴的数量级差不多就行。然后把这一列辅助列也绘制到图上去，然后设置误差项为数十倍个m，若图的y轴范围发生了改变则再修改范围为原来的就可以了。 2 具体实现步骤 在x,y边上再加一列辅助列，这里命名为append，我想
echart的X,Y轴坐标name竖排，竖列显示
qq_40739261的博客
03-20 1122
echart的X,Y轴坐标name多竖排或者一竖列显示。
echart markLine x轴 两点之间 或 日期之间 的竖线箭头
sy_yan的博客
08-06 1656
前端 echart markLine 实现 在x轴两个月份中间 动态画一条标线箭头
列表推导式在pyechart中添加竖线分割线，将折线根据横轴分成多个区域
k54kdk的博客
08-06 995
[opts.MarkAreaItem(),opts.MarkAreaItem()]控制pyechart的标记区域， 效果代码 .set_series_opts( markarea_opts=opts.MarkAreaOpts( data=[ opts.MarkAreaItem(x=(s,e)) for s,e in zip(index_com_s,index_com_e) ..
echarts折线图折线分段显示不同的颜色怎么实现
09-25
### 回答1： 使用 echarts 的 itemStyle 属性，可以设置折线段的颜色。可以参考官网文档：https://echarts.apache.org/zh/option.html#series-line.itemStyle ### 回答2： 在Echarts折线图中，要实现折线分段显示不同的颜色，可以通过使用"series"中的"itemStyle"属性来实现。 首先，在数据项中，我们可以设置每个数据点的特定颜色，例如： ```javascript data: [ {value: 120, itemStyle: {color: 'red'}}, {value: 200, itemStyle: {color: 'blue'}}, {value: 150, itemStyle: {color: 'green'}} ] ``` 然后，在图表的配置项中，找到对应的series配置项，设置"itemStyle"属性为一个函数，这个函数将根据数据项中的颜色进行渲染： ```javascript series: [{ type: 'line', data: [ {value: 120, itemStyle: {color: 'red'}}, {value: 200, itemStyle: {color: 'blue'}}, {value: 150, itemStyle: {color: 'green'}} ], itemStyle: function (params) { return params.data.itemStyle; } }] ``` 这样配置后，折线图的每个数据点将根据其特定颜色进行渲染，从而实现了折线分段显示不同的颜色。 需要注意的是，以上示例是基于Echarts4的配置方式，如果是其他版本可能会有些许差异。另外，为了使折线图更加美观，也可以在"itemStyle"中配置其他样式，如设置线条粗细、线条样式等。希望以上回答对你有所帮助。 ### 回答3： 要实现echarts折线图折线分段显示不同的颜色，可以使用echarts的区域标记功能。 首先，需要设置折线图的x轴数据和y轴数据。然后，使用series配置项中的markArea属性来标记不同的区域。 例如，我们有以下数据： ```javascript // x轴数据 var xData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']; // y轴数据 var yData = [120, 200, 150, 80, 70, 110, 130]; ``` 然后，在series配置项中设置markArea属性，来标记不同的区域： ```javascript series: [{ type: 'line', data: yData, markArea: { data: [{ yAxis: 0, // 区域起始位置 itemStyle: { color: 'rgba(255, 0, 0, 0.3)' // 区域颜色 } },{ yAxis: 100, // 区域终止位置 itemStyle: { color: 'rgba(0, 255, 0, 0.3)' // 区域颜色 } }] } }] ``` 以上代码中，我们设置了两个区域，一个从y轴0开始，另一个从y轴100开始。通过设置itemStyle中的color属性来指定不同区域的颜色。 最后，将x轴数据和series配置项应用到echarts实例中，即可实现折线图折线分段显示不同的颜色。 ```javascript var myChart = echarts.init(document.getElementById('chart')); myChart.setOption({ xAxis: { data: xData }, series: [{ type: 'line', data: yData, markArea: { data: [{ yAxis: 0, itemStyle: { color: 'rgba(255, 0, 0, 0.3)' } },{ yAxis: 100, itemStyle: { color: 'rgba(0, 255, 0, 0.3)' } }] } }] }); ``` 这样，echarts折线图的折线就会按照设定的区域进行分段显示，每个区域的颜色也会根据设置来呈现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值