Echarts在线免费图表

 
            const datas=[
   {value:20,name:'北京'},
   {value:60,name:'上海'},
   {value:40,name:'天津'},
   {value:70,name:'杭州'}
]
const maxArr=[100,100,100,100]
option = {
   //你的代码
   tooltip:{
      show:false
   },
   backgroundColor:'#01304d',
   legend:{
      show:true,
      right:0,
      top:0,
      itemWidth:20,
      itemHeight:9,
      itemGap:21,
      textStyle:{
         fontSize:12,
         color:'#ffff'
      },
   },
   xAxis:{
      show:false,
      type:'value'
   },
   // grid:{
   //    left:0,
   //    right:-20,
   //    top:32,
   //    bottom:-25,
   //    containLabel:true
   // },
   yAxis:[
   {
      type:'category',
      inverse:true,
      axisLine:{
         show:false
      },
      axisTick:{
         show:false
      },
      axisLabel:{
         fontSize:14,
         color:'#89f5ff',
         margin:21
      },
      data:datas.map(item=>item.name)
   },
   ],
   series:[
      {
         z:11,
         name:'预测数据',
         type:'bar',
         barWidth:10,
         data:datas.map(item=>({value:item.value})),
         itemStyle:{
            // barBorderRadius:5,
            normal:{
               color:new echarts.graphic.LinearGradient(0,0,0,1,[
                  {offset:0,color:'#51a2aa'},
                  {offset:1,color:'#08464a'}
               ])
            }
         },
         label:{
            normal:{
               show:true,
               position:['90%',-20],
               textStyle:{
                  color:'#fff',
                  fontSize:12
               }
            }
         }
      },
      {
         z:10,
         name:'预测需求量',
         type:'bar',
         barWidth:10,
         barGap:'-100%',
         itemStyle:{
            normal:{
               color:new echarts.graphic.LinearGradient(0,0,0,1,[
                  {offset:0,color:'#1b5469'},
                  {offset:1,color:'#05384d'}
               ])
            }
         },
         // tooltip:{
         //    show:false
         // },
         label:{
            normal:{
               show:true,
               position:['95%',-20],
               textStyle:{
                  color:'#fff',
                  fontSize:12
               }
            }
         },
         data:maxArr
      },
      {
         // name:'最上层的立体圆',
         type:'pictorialBar',
         symbolSize:[4,9],
         z:12,
         itemStyle:{
            normal:{
               color:'#c8fffa',
               opacity:0.3
            }
         },
        data: maxArr.map(value => ({ value, symbolPosition: 'end' }))
      },
      {
         // name:'中间立体圆'，
         type:'pictorialBar',
         symbolSize:[4,9],
         symbolOffset:[3,0],
         z:12,
         itemStyle:{
            normal:{
               color:'#c8fffa',
            }
         },
         data:datas.map(item=>{
            return {value:item.value,symbolPosition:'end'}
         })
      },
      {
         // name:'最低立体圆'，
         type:'pictorialBar',
         symbolSize:[4,9],
         symbolOffset:[2,0],
         z:12,
         itemStyle:{
            normal:{
               color:'#c8fffa',
               opacity:0.4
            }
         },
         data:[{value:0},{value:0},{value:0},{value:0}]
      },
      {
         // name:'底部的托盘'，
         type:'pictorialBar',
         symbolSize:[21,39],
         symbolOffset:[10,0],
         z:0,
         itemStyle:{
            normal:{
               color:new echarts.graphic.LinearGradient(0,0,1,0,[
                  {offset:0,color:'#013453'},
                  {offset:1,color:'#114e66'}
               ]),
            }
         },
         data:[{value:0},{value:0},{value:0},{value:0}],
         tooltip:{
            show:false
         }
      }
   ]
};