Echarts在线免费图表

 
                  const data=[
        { value: 20,name:'糖尿病', color: '#00F2DD' }, // 第一个数据点，值为 20，颜色为红色
        { value: 30,name:'高血压', color: '#FF604C' }, // 第二个数据点，值为 30，颜色为绿色
        { value: 29,name:'心脏病', color: '#00EB47' }, // 第二个数据点，值为 30，颜色为绿色
        { value: 90,name:'胃病', color: '#0099FF' }, // 第二个数据点，值为 30，颜色为绿色
        { value: 78,name:'脑膜炎', color: '#FFC600' }, // 第二个数据点，值为 30，颜色为绿色
        { value: 80,name:'阿尔兹海默', color: '#b41d1d' }, // 第二个数据点，值为 30，颜色为绿色
      ];
      // let name = ['糖尿病', '高血压', '心脏病', '胃病', '脑膜炎', '阿尔兹海默'];
      const textStyle = { "color": "#645f61", "fontSize": 15 }
      const itemColor = {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 1
      }

      let option = {
        title: {
          text: '慢病统计',
          top:'5%',
          textStyle:{
            color: '#009BFF',
            fontSize:15
          },
          left:'1%'
        },
        grid: {
            left: '15%',  // 调整左边距
            right: '15%', // 调整右边距
            top: '20%',   // 调整顶部边距
            bottom: '20%' // 调整底部边距
        },

        backgroundColor: "#ffffff",
        tooltip: {
          show: false,
        },
        legend: {
          show: false
        },
        xAxis: [{
          splitLine: {
            show: false
          },
          max: 100,
          type: 'value',
          show: false
        }],
        yAxis: [
            {
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          type: 'category',
          axisTick: {
            show: false
          },
          inverse: true,
          axisLabel: {
            textStyle: textStyle,
            margin: 10
          },
        },
        {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: textStyle,
              margin: 40,
              formatter: function (value) {
                return value + '%';
              },
              align: 'right', // Align the labels to the left
            },
            data: data.map(item => ({
              value: item.value,
              name: item.name,
              itemStyle: {
                color: item.color // Set color for each data point
              },
              label: {
                show: true,
                position: 'right', // Place the label on the right side of the bar
                formatter: '{b}'  // Use the data item's name for label content
              }
            }))
          }
        ],
        series: [{
          name: '',
          type: 'bar',
          barWidth: 10, // Width of the bar
          MaxSize: 0,
          showBackground: true,
          yAxisIndex: 0,
          barBorderRadius: [50, 50, 50, 50],
          backgroundStyle: {
            borderRadius: 5
          },
          label: {
            show: false
          },
          itemStyle: {
            barBorderRadius: [50, 50, 50, 50],
            color: itemColor
          },
          data: data.map(item => ({
            value: item.value,
            name: item.name,
            itemStyle: {
              color: item.color // Set color for each data point
            },
            label: {
              show: true,
              position: 'left', // Place the label on the right side of the bar
              formatter: '{b}' // Use the data item's name for label content
            }
          }))
        }]
      };