echarts象形图

最新推荐文章于 2024-09-13 16:59:56 发布

张杰伦i

最新推荐文章于 2024-09-13 16:59:56 发布

阅读量674

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_25750473/article/details/120952182

版权

这段代码展示了一个使用ECharts库创建的柱状图，图表主题为深色，包含两类数据：成长型企业与小巨人企业。柱状图采用圆角矩形图形，具有自定义的颜色、宽度、最大宽度、边框半径等属性，并在顶部显示标签，颜色为白色。图表的X轴和Y轴都进行了定制，包括标签间隔、旋转角度、颜色等。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="chart" style="width: 600px;height:400px;margin: 100px auto"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
<script>
  const myChart = echarts.init(document.getElementById('chart'), 'dark')

  const option = {
    grid: { x: '30', y: '35', x2: '0', y2: '25' },
    xAxis: {
      type: 'category',
      axisTick: { show: false },
      axisLine: { show: false },
      axisLabel: { interval: '0', rotate: 0, color: '#FFFFFF', fontSize: '14' },
      data: [ '成长型企业', '小巨人企业' ],
    },
    yAxis: {
      nameGap: '3.6',
      type: 'value',
      axisLine: { show: false },
      axisLabel: { show: false },
      splitLine: { show: false },
      axisTick: { show: false },
    },
    series: [ {
      data: [ 60, 40 ],
      type: 'pictorialBar',
      color: '#007AFE',
      symbol: 'roundRect', //图形类型，带圆角的矩形
      barWidth: 4, //柱图宽度
      barMaxWidth: '100%', //最大宽度
      borderRadius: 2,
      symbolClip: true,
      symbolMargin: 3, //图形垂直间隔
      symbolRepeat: true, //图形是否重复
      symbolSize: [ 36, 4 ], //图形元素的尺寸
      label: {
        show: true, //开启显示
        position: 'top', //在上方显示
        color: '#FFFFFF',
        fontSize: 18,
        lineHeight: 18,
      },
    } ],
  }
  myChart.setOption(option)
</script>
</body>
</html>