Echarts在线免费图表

 
            

const lineData = [{ name: "数据1", value: 55 }, 
// { name: "数据2", value: 66 }, 
// { name: "数据3", value: 77}, 
// { name: "数据4", value: 88 }
]

const echartsLabel = lineData?.map(x => x.name)
option = {
   backgroundColor: '#000',
   grid: {
      top: 20, // 设置条形图的边距
      bottom: 0,
   },
   xAxis: {
      splitLine: {
         show: false,
      },
      axisLine: {
         show: false,
      },
      axisLabel: {
         show: false,
      },
      axisTick: {
         show: false,
      },
   },
   yAxis: [
      {
         type: 'category',
         inverse: true,
         data: echartsLabel,
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         axisLabel: {
            show: true,
            textStyle: {
               verticalAlign: 'bottom',
               color: '#fff',
               fontSize: 14,
               fontFamily: 'PingFang SC',
               align: 'left',
               padding: [0, 0, 15, 10],
            },
            formatter: (name) => {
               return `${name}` //名称
            },
         },
         offset: 0,
      },
      {
         type: 'category',
         inverse: true,
         axisTick: 'none',
         axisLine: 'none',
         show: true,
         axisLabel: {
            padding: [0, 15, 15, 0],
            verticalAlign: "bottom",
            align: "right",
            textStyle: {
               color: '#fff',
               fontSize: 14,
               fontFamily: 'PingFang SC',
            },
            formatter: (params) => {
               return `${params}`;
            },
         },
         data: lineData // 占比
      }
   ],
   series: [
      {
         // 内
         type: 'bar',
         barWidth: 14,
         barCateGoryGap: 20,
         legendHoverLink: false,
         silent: true,
         itemStyle: {
            normal: {
               barBorderRadius: 0,
               color: function (params) {
                  var color = ['rgba(255, 77, 0, 1)', 'rgba(99, 231, 183, 1)', 'rgba(61, 255, 255, 1)', 'rgba(78, 167, 249, 1)'];
                  return color[params.dataIndex];
               },
            },
         },
         label: {
            normal: {
               show: false,
            },
         },
         data: lineData,
         z: 2,
         animationEasing: 'elasticOut',
      },
      {
         name: '外框',
         type: 'bar',
         barCateGoryGap: 20,
         barGap: '-100%', // 设置外框粗细
         data: new Array(lineData.length).fill(200),
         barWidth: 14,
         itemStyle: {
            normal: {
               barBorderRadius: 0,
               color: function (params) {
                  var color = ['rgba(248, 160, 123, 0.5)', 'rgba(99, 231, 183, 0.5)', 'rgba(61, 255, 255, 0.5)', 'rgba(78, 167, 249, 0.5)'];
                  return color[params.dataIndex];
               },
            },
         },
         z: 0,
      },
   ],
}