vue中用echarts做一个躺着的柱状图

在 Vue 中集成 ECharts 并绘制一个躺着的柱状图(即横向的柱状图),你可以通过设置 ECharts 的 bar 类型,并配置 xAxisyAxis 来实现。下面是一个完整的 Vue 示例代码。

示例代码:

vue 复制代码
<template>
  <div id="bar-chart" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'HorizontalBarChart',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      var chartDom = document.getElementById('bar-chart');
      var myChart = echarts.init(chartDom);

      var option = {
        title: {
          text: 'Horizontal Bar Chart Example',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'value', // 横向的柱状图,X 轴是数值轴
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category', // Y 轴是类目轴
          data: ['Category A', 'Category B', 'Category C', 'Category D']
        },
        series: [
          {
            name: 'Value',
            type: 'bar', // 柱状图类型
            data: [335, 410, 234, 543],
            itemStyle: {
              color: '#3398DB'
            }
          }
        ]
      };

      // 设置配置项并显示图表
      myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
#bar-chart {
  width: 100%;
  height: 100%;
}
</style>

代码说明:

  1. HTML 部分<div id="bar-chart"></div> 是用来容纳 ECharts 图表的 DOM 元素。在 mounted() 钩子中初始化图表。

  2. JavaScript 部分

    • echarts.init():将容器元素传递给 echarts.init,初始化图表实例。
    • xAxisyAxis
      • xAxis 设为 value 类型,因为横向的柱状图的 X 轴是数值轴。
      • yAxis 设为 category,用于展示分类数据,如 Category ACategory B
    • series
      • type 设为 bar,表示柱状图类型。
      • data 用来展示每个类目对应的数据值。
  3. 样式 :使用 scoped 的 CSS 确保图表容器的宽度和高度适配父级元素。

效果

  • 这是一个简单的横向柱状图,柱子沿 X 轴水平方向排列,而 Y 轴用来显示不同的分类。
  • 你可以根据实际需求调整图表的标题、颜色、数据等。

扩展:

  • 你可以添加更多的 series 项,生成多组数据的横向柱状图。
  • 通过配置 tooltiplegend,你可以使图表的交互更加丰富。

如果你需要动态更新图表数据或更多自定义样式,可以在 Vue 中结合 propsdata 使用。

相关推荐
Y学院16 小时前
vue的组件通信
前端·javascript·vue.js
PairsNightRain16 小时前
React Concurrent Mode 是什么?怎么使用?
前端·react.js·前端框架
小岛前端16 小时前
React 剧变!
前端·react.js·前端框架
teeeeeeemo16 小时前
Webpack 模块联邦(Module Federation)
开发语言·前端·javascript·笔记·webpack·node.js
Greg_Zhong17 小时前
vue项目安装使用,npm、webpack版本问题注意
vue.js·npm版本、webpack版本
岁月宁静17 小时前
AI聊天系统 实战:打造优雅的聊天记录复制与批量下载功能
前端·vue.js·人工智能
小小弯_Shelby17 小时前
uniApp App内嵌H5打开内部链接,返回手势(左滑右滑页面)会直接关闭H5项目
前端·uni-app
IT_陈寒17 小时前
SpringBoot性能飞跃:5个关键优化让你的应用吞吐量提升300%
前端·人工智能·后端
加洛斯18 小时前
Vue 知识篇(2):浅谈Vue中的DOM与VNode
前端·javascript·vue.js
kunge1v518 小时前
学习爬虫第三天:数据提取
前端·爬虫·python·学习