Echarts在线免费图表

 
            const color = ['rgba(57, 130, 240, 1)', 'rgba(255, 125, 28, 1)', 'rgba(75, 148, 192, 1)', 'rgba(128, 213, 243, 1)', 'rgba(154, 213, 167, 1)', 'rgba(255, 132, 205, 1)', 'rgba(241, 199, 77, 1)', '#37cbcb']

option = {
   grid: {
      top: '25px',
      left: '10px',
      right: '2%',
      bottom: '6%',
      containLabel: true
    },
    tooltip: {
      trigger: 'item'
    },
    animation: false,
    xAxis: [
      {
        type: 'category',
        data: ['动漫', '电影', '综艺', '电视剧', '音乐剧', '喜剧', '纪录片', '追番'],
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            type: 'dashed', // 将x轴线设置为虚线
            color: '#ccc',
            opacity: 0.3
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed', // y轴分割线类型
            color: '#ccc',
            opacity: 0.3
          }
        },
        axisLabel: {
          show: true,
          interval: 0,

          fontSize: 18,
          fontWeight: 500,
          color: '#000',
          rich: {
            a: {
              fontSize: 10,
              fontWeight: 600,
              color: '#ffffff'
            },
            b: {
              height: 0,
              fontSize: 10,
              color: '#ffffff'
            }
          }
        },
        interval: 0
      }
    ],
    yAxis: {
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed', // y轴分割线类型
          color: '#ccc',
          opacity: 0.3
        }
      },
      axisLabel: {
        show: true,
        formatter: '{value} %', // 右侧Y轴文字显示
        textStyle: {
          color: '#18191B',
          fontSize: 14
        }
      }
    },
    series: [
      {
        name: '上部圆',
        type: 'pictorialBar',
        silent: true,
        symbolSize: function (data) {
          return [data * 0.7, data * 0.7] // 根据data的值计算symbolSize的大小
        },
        symbolOffset: [0, -13],
        symbolPosition: 'end',
        z: 14,
        label: {
          show: false,
          position: 'top',
          fontSize: 15,
          fontWeight: 'bold',
          color: '#5BFCF4'
        },
        itemStyle: {
          emphasis: {
            barBorderRadius: [0, 20, 20, 0]
          },
          normal: {
            color: function (params) {
              return color[params.dataIndex]
            },
            // 柱状图上显示数字
            label: {
              show: true, // 开启显示
              position: 'top', // 在上方显示
              offset: [0, 47],
              textStyle: {
                // 数值样式
                fontSize: 16,
                color: '#fff',
                fontWeight: 500
              },
              formatter: '{c}%'
            }
          }
        },
        data: [93.5, 91, 92, 86, 89, 91, 87, 90]
      }
    ]
};