echarts折线图实现部分虚线部分实线效果的方法

更新时间：2024年09月20日 11:34:23 作者：暴富的im

在折线图中,通常实线表示实际数据,而虚线用于表示预测数据,这篇文章主要介绍了echarts折线图实现部分虚线部分实线效果的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

场景：

折线图一般都是实线为准，但是由于最后一个数据是预测。所以想要实现最后一段为虚线。

效果图：

具体实现：

series:[

        {
            name: "销售总金额",
            type: "line",
            smooth: true,
            barWidth: 10,
            stack: 'Total',
            itemStyle: {
              normal: {
                color: "#F02FC2",
                lineStyle: {
                  width: 2,
                  type: 'solid'  //'dotted'虚线 'solid'实线
                }
              },
              // 强调最后一个数据点的样式
            },
            data: [1213,232132,4324,2,23,42323,4234,4243223,424334,4324,423423,64456]

    PS:重点虚线的那一段的开头数据需要与实线的最后一个数据对应

          },
          {
            name: "销售总金额",
            type: "line",
            smooth: true,
            barWidth: 10,
            itemStyle: {
              normal: {
                color: "#F02FC2",
                // 最后一个点的边框颜色
                borderWidth: 2,
                lineStyle: {
                  width: 2,
                  type: 'dotted',
                  color: "yellow"//'dotted'虚线 'solid'实线
                }
              }
            },
            data: ["-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", 64456, 52435]
          },

]

同理：如果中间段的数据需要虚线也按这个方法即可。

数据处理：

let dataValue = [1, 2, 3, 4, 5, 6];
let dataValue1 = [ ...new Array(dataValue.length - 1).fill('-'), dataValue[dataValue.length - 1]

多条线点重合的处理方法

防止多个点以及值为空的情况

 this.options = {
          tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(255,255,255,0.8)",
            formatter: function (params, ticket, callback) {
              var htmlStr = '';
              var valMap = {};
              for (var i = 0; i < params.length; i++) {
                var param = params[i];
                var xName = param.name;//x轴的名称  
                var seriesName = param.seriesName;//图例名称  
                var value = param.value;//y轴值  
                var color = param.color;//图例颜色  

                //过滤无效值
                if (value == '-') {
                  continue;
                }

                //过滤重叠值
                if (valMap[seriesName] == value) {
                  continue;
                }

                if (i === 0) {
                  htmlStr += xName + '<br/>';//x轴的名称  
                }
                htmlStr += '<div>';
                //为了保证和原来的效果一样，这里自己实现了一个点的效果  
                htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';

                //圆点后面显示的文本  
                htmlStr += seriesName + '：' + value;

                htmlStr += '</div>';
                valMap[seriesName] = value;
              }
              return htmlStr;
            },
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                backgroundColor: "#7B7DDC"
              }
            }
          },
          legend: {
            data: ["销售总金额", "回款总金额"],
            textStyle: {
              color: "#B4B4B4"
            },
            top: "0%"
          },
          grid: {
            left: '0%',
            right: '3%',
            bottom: '8%',
            width: "96%",
            containLabel: true
          },
          xAxis: {
            data: this.cdata.category,
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },
            type: 'category',
            boundaryGap: true,
          },
          yAxis: [
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4"
                }
              },

              axisLabel: {
                formatter: "{value} "
              }
            },
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4"
                }
              },
              axisLabel: {
                formatter: "{value} "
              }
            }
          ],
          series: [
            {
              name: "销售总金额",
              type: "line",
              smooth: true,
              barWidth: 10,
              // stack: 'Total',  这个不去掉会出现多个点
              itemStyle: {
                normal: {
                  color: "#F02FC2",
                  lineStyle: {
                    width: 2,
                    type: 'solid'  //'dotted'虚线 'solid'实线
                  }
                },
                // 强调最后一个数据点的样式
              },
              data: this.cdata.rateData
            },
            {
              name: "销售总金额",
              type: "line",
              smooth: true,
              barWidth: 10,
              itemStyle: {
                normal: {
                  color: "#F02FC2",
                  // 最后一个点的边框颜色
                  // borderWidth: 2,
                  lineStyle: {
                    width: 2,
                    type: 'dotted',
                    // color: "yellow"//'dotted'虚线 'solid'实线
                  }
                }
              },
              data: this.cdata.mockRateData
            },
            {
              name: "回款总金额",
              type: "line",
              barWidth: 10,
              smooth: true,
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  color: "#7e8be9",
                  lineStyle: {
                    width: 2,
                    type: 'solid'  //'dotted'虚线 'solid'实线
                  }
                }
              },
              data: this.cdata.barData  [1,2,3,4,'-']
            },
            {
              name: "回款总金额",
              type: "line",
              barWidth: 10,
              smooth: true,
              smooth: false,
              itemStyle: {
                normal: {
                  // barBorderRadius: 5,
                  color: "#7e8be9",
                  // color: "#7e8be9",
                  lineStyle: {
                    width: 2,
                    type: 'dotted'  //'dotted'虚线 'solid'实线
                  }
                }
              },
              data: this.cdata.mockBarData  ['-','-','-',4,5]
            },
          ]
        }

总结

到此这篇关于echarts折线图实现部分虚线部分实线效果的文章就介绍到这了,更多相关echarts折线图部分虚线内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

javascript实现滚轮轮播图片
这篇文章主要为大家详细介绍了javascript实现滚轮轮播图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
微信小程序获取用户信息并保存登录状态详解
这篇文章主要介绍了微信小程序获取用户信息并保存登录状态，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
对js eval()函数的一些见解
下面小编就为大家带来一篇对js eval()函数的一些见解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
js跨域问题浅析及解决方法优缺点对比
所谓js跨域问题，是指在一个域下的页面中通过js访问另一个不同域下的数据对象，出于安全性考虑，几乎所有浏览器都不允许这种跨域访问，这就导致在一些ajax应用中，使用跨域的web service会成为一个问题。要解决跨域的问题，就是本文我们需要探讨的了
2014-11-11
用正则获取指定路径文件的名称
用正则获取指定路径文件的名称...
2007-02-02
小程序实现图片裁剪上传
这篇文章主要为大家详细介绍了小程序实现图片裁剪上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05
JS特权方法定义作用以及与公有方法的区别
在构造函数内部通过this关键字定义的的方法为特权方法它的作用为在构造函数外面公开访问(仅限于实例化的对象)，而且还能够访问私有成员和方法，感兴趣的你可以参考下哈
2013-03-03
微信小程序获取位置展示地图并标注信息的实例代码
这篇文章主要介绍了微信小程序获取位置展示地图并标注信息的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-09-09
微信小程序记录用户移动轨迹的实战记录
最近遇到一个小程序的开发需求,直接可以通过小程序就记录运动轨迹,所以这篇文章主要给大家介绍了关于微信小程序记录用户移动轨迹的相关资料,需要的朋友可以参考下
2021-08-08
js实现页面跳转的五种方法推荐
下面小编就为大家带来一篇js实现页面跳转的五种方法推荐。小编觉得挺不错的。现在分享给大家，让大家参考一下
2016-03-03