echarts的折线图实现部分虚线部分实线

场景:

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

效果图:
具体实现:
javascript 复制代码
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]

相关推荐
半花2 分钟前
【Vue】defineProps、defineEmits 和 defineExpose
前端·vue.js
霍格沃兹_测试8 分钟前
软件测试 | 测试开发 | H5页面多端兼容测试与监控
前端
toooooop817 分钟前
本地开发环境webScoket调试,保存html即用
前端·css·websocket
山有木兮木有枝_23 分钟前
手动封装移动端下拉刷新组件的设计与实现
前端
阳光阴郁大boy25 分钟前
大学信息查询平台:一个现代化的React教育项目
前端·react.js·前端框架
小菜全31 分钟前
uniapp新增页面及跳转配置方法
开发语言·前端·javascript·vue.js·前端框架
AlexMercer101234 分钟前
[前端]1.html基础
前端·笔记·学习·html
白水清风43 分钟前
关于Js和Ts中类(class)的知识
前端·javascript·面试
前端Hardy44 分钟前
只用2行CSS实现响应式布局,比媒体查询更优雅的布局方案
javascript·css·html
小菜全1 小时前
uniapp基础组件概述
前端·css·vue.js·elementui·css3