Echarts在线免费图表

 
              const category = [
    {
      name: '重庆',
      value: 300
    },
    {
      name: '上海',
      value: 400
    },
    {
      name: '北京',
      value: 500
    },
    {
      name: '成都',
      value: 400
    }
  ]
  const total = 1600 // 数据总数
  const datas = []
  category.forEach((value) => {
    datas.push(value.value)
  })
  const totalArr = []
  category.forEach((item) => {
    totalArr.push({ value: total, num: item.value, name: item.name })
  })
  option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      show: true,
      axisPointer: {
        type: 'none'
      },
      formatter: function () {
        return ''
      }
    },
    xAxis: {
      max: total,
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    grid: {
      left: '15%',
      top: '5%', // 设置条形图的边距
      right: '15%',
      bottom: '5%',
      containLabel: true
    },
    yAxis: [
      {
        type: 'category',
        inverse: false,
        data: category,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        }
      }
    ],
    series: [
      {
        // 内
        type: 'pictorialBar',
        barWidth: 18,
        silent: false,
        itemStyle: {
          normal: {
            color: '#00A1A3'
          }
        },
        symbolRepeat: 'fixed',
        symbolMargin: 2,
        symbol: 'rect',
        symbolClip: true,
        symbolSize: [10, 20],
        symbolPosition: 'start',
        symbolOffset: [0, 46],
        data: category,
        z: 3,
        animationEasing: 'elasticOut',
        tooltip: {
          show: true,
          trigger: 'axis'
        }
      },
      {
        type: 'pictorialBar',
        itemStyle: {
          normal: {
            color: '#eee'
          },
          emphasis: {
            color: '#eee'
          }
        },
        symbolRepeat: 'fixed',
        symbolMargin: 2,
        symbol: 'rect',
        symbolClip: true,
        symbolSize: [10, 20],
        symbolPosition: 'start',
        symbolOffset: [0, 0],
        label: {
          normal: {
            formatter: (params) => {
              var text
              text = '{f| ' + params.data.num + '}'
              return text
            },
            rich: {
              f: {
                color: 'rgba(160, 172, 188, 1)',
                fontSize: '13px',
                fontWeight: 'bold'
              }
            },
            position: 'right',
            distance: 20, // 向右偏移位置
            show: true
          },
          emphasis: {
            formatter: (params) => {
              var text
              text = '{f| ' + params.data.num + '}'
              return text
            },
            rich: {
              f: {
                color: 'rgba(50, 147, 255, 1)',
                fontSize: '13px',
                fontWeight: 'bold'
              }
            },
            position: 'right',
            distance: 20, // 向右偏移位置
            show: true
          }
        },
        data: totalArr, // value值
        z: 2
      },
      {
        type: 'bar',
        itemStyle: {
          normal: {
            color: 'transparent'
          },
          emphasis: {
            color: 'rgba(111, 179, 255, 0.1)'
          }
        },
        barWidth: 30,
        z: 1,
        data: totalArr, // value值
        label: {
          normal: {
            formatter: '{b}',
            textStyle: {
              color: 'rgba(160, 172, 188, 1)',
              fontSize: 13,
              fontWeight: 'bold'
            },
            position: 'left',
            distance: 20, // 向右偏移位置
            show: true
          }
        }
      }
    ]
  }