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]

相关推荐
华仔啊1 天前
前端必看!12个JS神级简写技巧,代码效率直接飙升80%,告别加班!
前端·javascript
excel1 天前
dep.ts 逐行解读
前端·javascript·vue.js
爱上妖精的尾巴1 天前
5-20 WPS JS宏 every与some数组的[与或]迭代(数组的逻辑判断)
开发语言·前端·javascript·wps·js宏·jsa
excel1 天前
Vue3 响应式核心源码全解析:Dep、Link 与 track/trigger 完整执行机制详解
前端
前端大卫1 天前
一个关于时区的线上问题
前端·javascript·vue.js
whltaoin1 天前
中秋赏月互动页面:用前端技术演绎传统节日之美
前端·javascript·html·css3·中秋主题前端
IT派同学1 天前
TableWiz诞生记:一个被表格合并逼疯的程序员如何自救
前端·vue.js
西洼工作室1 天前
CSS高效开发三大方向
前端·css
昔人'1 天前
css`font-variant-numeric: tabular-nums` 用来控制数字的样式。
前端·css
铅笔侠_小龙虾1 天前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js