快捷導(dǎo)航

echarts折線圖實(shí)現(xiàn)部分虛線部分實(shí)線效果的方法

更新時(shí)間：2024年09月20日 11:34:23 作者：暴富的im

在折線圖中,通常實(shí)線表示實(shí)際數(shù)據(jù),而虛線用于表示預(yù)測數(shù)據(jù),這篇文章主要介紹了echarts折線圖實(shí)現(xiàn)部分虛線部分實(shí)線效果的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

場景：

折線圖一般都是實(shí)線為準(zhǔn)，但是由于最后一個(gè)數(shù)據(jù)是預(yù)測。所以想要實(shí)現(xiàn)最后一段為虛線。

效果圖：

具體實(shí)現(xiàn)：

series:[

        {
            name: "銷售總金額",
            type: "line",
            smooth: true,
            barWidth: 10,
            stack: 'Total',
            itemStyle: {
              normal: {
                color: "#F02FC2",
                lineStyle: {
                  width: 2,
                  type: 'solid'  //'dotted'虛線 'solid'實(shí)線
                }
              },
              // 強(qiáng)調(diào)最后一個(gè)數(shù)據(jù)點(diǎn)的樣式
            },
            data: [1213,232132,4324,2,23,42323,4234,4243223,424334,4324,423423,64456]

    PS:重點(diǎn)虛線的那一段的開頭數(shù)據(jù)需要與實(shí)線的最后一個(gè)數(shù)據(jù)對(duì)應(yīng)

          },
          {
            name: "銷售總金額",
            type: "line",
            smooth: true,
            barWidth: 10,
            itemStyle: {
              normal: {
                color: "#F02FC2",
                // 最后一個(gè)點(diǎn)的邊框顏色
                borderWidth: 2,
                lineStyle: {
                  width: 2,
                  type: 'dotted',
                  color: "yellow"http://'dotted'虛線 'solid'實(shí)線
                }
              }
            },
            data: ["-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", 64456, 52435]
          },

]

同理：如果中間段的數(shù)據(jù)需要虛線也按這個(gè)方法即可。

數(shù)據(jù)處理：

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

多條線點(diǎn)重合的處理方法

防止多個(gè)點(diǎn)以及值為空的情況

 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>';
                //為了保證和原來的效果一樣，這里自己實(shí)現(xiàn)了一個(gè)點(diǎn)的效果  
                htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';

                //圓點(diǎn)后面顯示的文本  
                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',  這個(gè)不去掉會(huì)出現(xiàn)多個(gè)點(diǎn)
              itemStyle: {
                normal: {
                  color: "#F02FC2",
                  lineStyle: {
                    width: 2,
                    type: 'solid'  //'dotted'虛線 'solid'實(shí)線
                  }
                },
                // 強(qiáng)調(diào)最后一個(gè)數(shù)據(jù)點(diǎn)的樣式
              },
              data: this.cdata.rateData
            },
            {
              name: "銷售總金額",
              type: "line",
              smooth: true,
              barWidth: 10,
              itemStyle: {
                normal: {
                  color: "#F02FC2",
                  // 最后一個(gè)點(diǎn)的邊框顏色
                  // borderWidth: 2,
                  lineStyle: {
                    width: 2,
                    type: 'dotted',
                    // color: "yellow"http://'dotted'虛線 'solid'實(shí)線
                  }
                }
              },
              data: this.cdata.mockRateData
            },
            {
              name: "回款總金額",
              type: "line",
              barWidth: 10,
              smooth: true,
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  color: "#7e8be9",
                  lineStyle: {
                    width: 2,
                    type: 'solid'  //'dotted'虛線 'solid'實(shí)線
                  }
                }
              },
              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'實(shí)線
                  }
                }
              },
              data: this.cdata.mockBarData  ['-','-','-',4,5]
            },
          ]
        }