Echarts在线免费图表

 
            const dataSource = [
        {
           value: '100',
           name: '标签1',
        },
        {
           value: '900',
           name: '标签2',
        },
        {
           value: '800',
           name: '标签3',
        },
        {
           value: '700',
           name: '标签4',
        },
        {
           value: '600',
           name: '标签5',
        },
     ];
     let barWidth = 10 /* 进度条及进度条radius宽度 */,
        attaData = [] /* 进度条数据 */,
        attaVal = [] /* 进度条数值 */,
        topName = [] /* 进度条名称 */;
     dataSource.forEach((it, i) => {
        topName[i] = `${it.name}`;
        attaVal[i] = it.value;
        attaData[i] = {
            value: parseFloat(it.value).toFixed(2),
        };
    });
    /* 该值无具体作用，取进度最大值 * 1.2 */
         const myColor = [
        "#64bdff",
        "#1659ff",
        "#19f41e",
        "#50c3c6",
        "#fe6448"
      ];
     option = {
        backgroundColor:'#000',
        grid: [
           {
              left: 20,
              top: 40,
              right: 10,
              bottom: 40,
              containLabel: true,
           },
        ],
        xAxis: [
           {
              gridIndex: 0,
              type: 'value',
              axisLabel: { show: false },
              axisLine: { show: false },
              splitLine: { show: false },
              axisTick: { show: false },
           },
        ],
        yAxis: [
           {
              gridIndex: 0,
              type: 'category',
              inverse: true,
              data: dataSource.map((item) => item.name),
              axisTick: { show: false },
              axisLine: { show: false },
              splitLine: { show: false },
              position: 'right',
              axisLabel: {
                 width: 80,
                 padding: [0, 50, 40, 0],
                 align: 'right',
                 formatter: (name, index) => {
                    return `{value|${name}}`;
                 },
                 rich: {
                    value: {
                       color:'#fff',
                       fontSize: 20,
                       fontWeight: 500,
                    },
                 },
              },
           },
        ],
        series: [
           {
              z: 10,
              type: 'bar',
              barWidth: 10,
              data: dataSource.map((item) => item.value),
              label:{
               show:true,
               color:'inherit',
               position: 'insideBottomLeft',
               lineHeight: 50,
                fontSize: 20,
                fontFamily:'agencyr',
              },
              itemStyle: {
                 barBorderRadius:5,
                 color:(params)=>{
                    return `${myColor[params.dataIndex]}`
                 }

              },
           },
           {
              z: 3,
              name: '背景',
              type: 'bar',
              barWidth: 10,
              barGap: '-100%',
              data:['960','960','960','960','960'],
              itemStyle: {
                 normal: {
                    color: '#3F4F5DCC',
                      barBorderRadius:5,
                 },
              },
           },
        ],
     };