vue2+echarts实现柱状图

m0_65760299

于 2024-04-12 11:07:57 发布

阅读量535

点赞数 5

文章标签： echarts 信息可视化前端

本文链接：https://blog.csdn.net/m0_65760299/article/details/137673408

版权

<template>
  <div>
    <div ref="echartsBar" class="bar_chart"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';

export default {
  name: "homepageAds-index",
  mounted() {
    this.renderChart();
  },
  components: {
  },
  methods: {
    renderChart() {
      // 初始化 echarts 实例
      const myChart = echarts.init(this.$refs.echartsBar);

      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '柱状图示例',
          textStyle: {
            color: '#333', // 标题文字颜色
            fontSize: 18, // 标题文字大小
            fontWeight: 'bold' // 标题文字粗细
          }
        },
        tooltip: {},
        legend: {
          left: 'center',
          // 设置图例垂直底部
          bottom: -20,
          // 设置图例布局为水平
          orient: 'horizontal',
          // 设置图例的间距
          itemGap: 20,
          // 设置图例的大小
          itemWidth: 20,
          itemHeight: 6,
          // 其他样式设置
          textStyle: {
            color: '#333', // 图例文字颜色
            fontSize: 14 // 图例文字大小
          }
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          axisLine: {
            lineStyle: {
              color: '#333' // x轴线条颜色
            }
          },
          axisTick: {
            show: false // 隐藏刻度线
          },
          axisLabel: {
            color: '#333' // x轴标签文字颜色
          }
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: '#333' // y轴线条颜色
            }
          },
          axisTick: {
            show: false // 隐藏刻度线
          },
          axisLabel: {
            color: '#333' // y轴标签文字颜色
          }
        },
        grid: {
          containLabel: true, // 包含刻度标签在内
          left: '3%', // 调整图表位置
          right: '4%', // 调整图表位置
          bottom: '3%', // 调整图表位置
          backgroundColor: '#f4f4f4', // 背景颜色
          borderWidth: 0 // 边框宽度
        },
        series: [{
          name: '销量',
          type: 'bar',
          itemStyle: {
            // 柱状图颜色设置
            color: '#1890ff' // 柱状图颜色
          },
          data: [5, 20, 36, 10, 10, 20]
        }]
      };

      // 使用配置项显示图表
      myChart.setOption(option);

      // 监听图表元素的点击事件
      myChart.on('click', (params) => {
        // 当点击柱状图的柱子时，params 包含点击元素的信息
        if (params.componentType === 'series' && params.seriesType === 'bar') {
          const dataIndex = params.dataIndex; // 获取点击的数据索引
          const dataValue = params.value; // 获取点击的数据值
          const dataName = params.name; // 获取点击的数据名称

          // 显示弹窗
          alert(`点击了${dataName}，其值为${dataValue}`);
        }
      });
    }
  }
}
</script>


<style scoped>
.bar_chart {
  width: 200px;
  height: 400px;
}
</style>