Echarts在线免费图表

 
            let colorList = ['#68FB6E', '#1EE7E7', 'pink', '#2F54EB', 'red', 'yellow','purple']
let objO = [{
   name: '浮游兽',
   value: 1000,
   number: '-0.30',
}, {
   name: '迪哥兽',
   number: '0.40',
   value: 1500
}, {
   name: '巴达兽',
   number: '0.50',
   value: 1800
}, {
   name: '天马兽',
   number: '0.60',
   value: 2000
}, {
   name: '天使兽',
   number: '0.70',
   value: 2300
}, {
   name: '神圣天使兽',
   number: '0.80',
   value: 2500
}, {
   name: '究极天使兽',
   number: '0.90',
   value: 5000
}]
option = {
   backgroundColor: '#0a142f',
   color: colorList,
   tooltip: {
      show: false,
   },
   legend: {
      show: false,
   },
   grid: {
      left: '20%',
      right: '10%',
      bottom: '0',
      top: '10%',
   },
   xAxis: {
      show: false,
   },
   yAxis: [
      {
         type: 'category',
         inverse: true,
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         axisPointer: {
            label: {
               show: true,
               margin: 30,
            },
         },
         data: objO.map((item) => item.name),
         axisLabel: {
            margin: 100,
            fontSize: 12,
            align: 'left',
            color: '#BAE7FF',
         },
      },
      {
         type: 'category',
         inverse: true,
         axisTick: {
            show: false
         },
         axisLine: {
            show: false
         },
         axisLabel: {
            show: true,
            fontSize: 14,
            color: 'rgba(255, 255, 255, 0.85)',
            inside: false,
         },
         data: objO.map((item) => item.value),
         formatter: function (value, index) {
            return ['{a|' + objO[index].value + 'kw·h' + '}'];
         },
         rich: {
            a: {
               padding: [16, 0, 0, -150]
            }
         }
      },
      {
         type: 'category',
         inverse: true,
         axisTick: {
            show: false
         },
         axisLine: {
            show: false
         },
         axisLabel: {
            show: true,
            fontSize: 14,
            color: '#F53F3F',
            inside: false,
            formatter: function (value, index) {
               if (objO[index].number < 0) {
                  return ['{a|' + parseFloat((objO[index].number * 100).toFixed(2)) + '%⬇' + '}'];
               } else {
                  return ['{b|' + parseFloat((objO[index].number * 100).toFixed(2)) + '%⬆' + '}'];
               }
            },
            rich: {
               a: {
                  padding: [16, 0, 0, -60],
                  color: '#F53F3F'
               },
               b: {
                  padding: [16, 0, 0, -60],
                  color: '#00B42A'
               }
            }
         },
         data: objO.map((item) => item.number),
      },
   ],
   series: [
      {
         z: 2,
         name: '数量',
         type: 'bar',
         barWidth: 7,
         zlevel: 1,
         data: objO.map((item, i) => {
            return {
               value: item.value,
               itemStyle: {
                  color: colorList[i],
                  barBorderRadius: 30,
               },
            };
         })
      },
      {
         name: '背景',
         type: 'bar',
         barWidth: 7,
         barGap: '-100%',
         itemStyle: {
            color: 'rgba(118, 111, 111, 0.1)',
            barBorderRadius: 30,
         },
         tooltip: {
            formatter: ' ',
         },
         data: objO.map(k => Math.max.apply(null, objO.map(p => p.value)) * 1.5)
      },
   ],
};