鍍金池/ 問答/HTML/ 如何利用echarts實(shí)現(xiàn)梯形波圖標(biāo)展示

如何利用echarts實(shí)現(xiàn)梯形波圖標(biāo)展示

1.想要利用echarts實(shí)現(xiàn)如下效果，請(qǐng)問該如何做呢。
圖片描述

echarts官方文檔中有關(guān)于自定義開發(fā)部分，但是看過(guò)后發(fā)現(xiàn)那是針對(duì)于它本身支持的類型如：‘rect’、‘line’……，并沒有梯形。。如果要實(shí)現(xiàn)梯形波的效果，我需要修改echarts的源碼嗎，請(qǐng)各位指點(diǎn)一二，感謝^_^

回答
編輯回答
澐染

你這個(gè)可以理解為折線圖啊。

2018年8月27日 23:10
編輯回答
離人歸

又來(lái)自問自答，其實(shí)自己的描述有點(diǎn)問題，本來(lái)其實(shí)想要實(shí)現(xiàn)的效果是下面這種，相差也并不大。

clipboard.png
現(xiàn)在我是直接用line直接描點(diǎn)，畢竟是由數(shù)據(jù)繪制的。計(jì)算出四個(gè)點(diǎn)就好了，通過(guò)折線連接即可。
不過(guò)需要注意的是：分清類目軸和非類目軸。最開始自己就是沒有弄清楚，導(dǎo)致畫圖時(shí)，數(shù)據(jù)會(huì)基于類目軸來(lái)繪制，結(jié)果第二組數(shù)據(jù)繪制時(shí)又會(huì)從類目軸的第一個(gè)依次描繪起走，這樣就可能會(huì)有重疊，也不是我們想要的效果。。
簡(jiǎn)單試驗(yàn)成功代碼如下：

option = {
    title:{
       text:'梯形波' ,
       left:'center'
    },
    tooltip:{
        show:true,
    },
    dimensions:[
     'from','to','profit'
    ],
    encode:{
      tooltip:[0,1,2]  
    },
    xAxis: {
        type: 'value',
        interval:30
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [
         //x維度  y維度
          [  0,   0,   1],
          [ 20,  20,  2],
          [ 40,   20,   2],
          [ 60,   0,  2]
        ],
        type: 'line',
        areaStyle: {}
    },
    {
        data: [//x維度  y維度
          [  65,   0,   1],
          [ 88,  45,  2],
          [ 100,  45,   2],
          [ 123,   0,  2]
        ],
        type: 'line',
        areaStyle: {}
    
    }, 
    {
        data: [],
        type: 'line',
        areaStyle: {}
    
    }]
   
};
2018年7月12日 02:35