Echarts在线免费图表

 
            var data = [
   { eighteenhours: 100, elevenhours: 600, fivehours: 360, a: 500, b: 290 },
   { eighteenhours: 0, elevenhours: 300, fivehours: 360, a: 500, b: 290 },
   { eighteenhours: 300, elevenhours: 600, fivehours: 0, a: 500, b: 0 },
   { eighteenhours: 300, elevenhours: 690, fivehours: 360, a: 500, b: 290 },
]
let list = []
for (var i = 0, len = data.length; i < len; i++) {
   var total = data[i].eighteenhours + data[i].elevenhours + data[i].fivehours + data[i].a + data[i].b
   list.push({
      eighteenhours: data[i].eighteenhours ? ((data[i].eighteenhours / total) * 100).toFixed(2) : 0,
      elevenhours: data[i].elevenhours ? ((data[i].elevenhours / total) * 100).toFixed(2) : 0,
      fivehours: data[i].fivehours ? ((data[i].fivehours / total) * 100).toFixed(2) : 0,
      a: data[i].a ? ((data[i].a / total) * 100).toFixed(2) : 0,
      b: data[i].b ? ((data[i].b / total) * 100).toFixed(2) : 0,
   })
}
let data1 = []
let data2 = []
let data3 = []
let data4 = []
let data5 = []
for (let x = 0, lens = list.length; x < lens; x++) {
   data1.push(list[x].eighteenhours)
   data2.push(list[x].elevenhours)
   data3.push(list[x].fivehours)
   data4.push(list[x].a)
   data5.push(list[x].b)
}
option = {
   tooltip: {
      trigger: 'axis'
    },
   legend: {
      top: 15,
      data: ['一级', '二级', '三级', '四级','其他'],
   },
   grid: {
      top: 48,
      bottom: 0,
      left: 0,
      right: 5,
      containLabel: true,
   },
   xAxis: {
      min: 0,
      max: 100,
   },
   color: ['#59B9FF', '#29F1FA', '#6ED199', '#1F7BFF', '#3A53D5'],
   yAxis: {
      data: ['公路', '省道', '国道', '高速'],
   },
   series: [
      {
         name: '一级',
         type: 'bar',
         stack: '堆叠',
         data: data1,
         barWidth: 10, //柱图宽度
         itemStyle: {
            normal: {
               label: {
                  show: true,
                  color: 'red',
                  position: 'top',
                  fontSize: 14,
                  formatter: function (res) {
                     if (res.value) {
                        return res.value + '%'
                     } else {
                        return 0
                     }
                  },
               },
            },
         },
      },
      {
         name: '二级',
         type: 'bar',
         stack: '堆叠',
         barWidth: 10, //柱图宽度
         data: data2,
         itemStyle: {
            normal: {
               label: {
                  show: true,
                  color: 'red',
                  position: 'top',
                  fontSize: 14,
                  formatter: function (res) {
                     if (res.value) {
                        return res.value + '%'
                     } else {
                        return 0
                     }
                  },
               },
            },
         },
      },
      {
         name: '三级',
         type: 'bar',
         stack: '堆叠',
         barWidth: 10, //柱图宽度
         data: data3,
         itemStyle: {
            normal: {
               label: {
                  show: true,
                  color: 'red',
                  position: 'top',
                  fontSize: 14,
                  formatter: function (res) {
                     if (res.value) {
                        return res.value + '%'
                     } else {
                        return 0
                     }
                  },
               },
            },
         },
      },
      {
         name: '四级',
         type: 'bar',
         stack: '堆叠',
         barWidth: 10, //柱图宽度
         data: data4,
         itemStyle: {
            normal: {
               label: {
                  show: true,
                  color: 'red',
                  position: 'top',
                  fontSize: 14,
                  formatter: function (res) {
                     if (res.value) {
                        return res.value + '%'
                     } else {
                        return 0
                     }
                  },
               },
            },
         },
      },
      {
         name: '其他',
         type: 'bar',
         stack: '堆叠',
         barWidth: 10, //柱图宽度
         data: data5,
         itemStyle: {
            normal: {
               label: {
                  show: true,
                  color: 'red',
                  position: 'top',
                  fontSize: 14,
                  formatter: function (res) {
                     if (res.value) {
                        return res.value + '%'
                     } else {
                        return 0
                     }
                  },
               },
            },
         },
      },
   ],
};