vue+element+echarts组件封装柱状图【循环遍历表格】

最新推荐文章于 2024-06-16 19:57:36 发布

一丝净土

最新推荐文章于 2024-06-16 19:57:36 发布

阅读量221

点赞数

分类专栏：精品代码文章标签： vue.js echarts javascript

本文链接：https://blog.csdn.net/weixin_42970071/article/details/135821256

版权

精品代码专栏收录该内容

14 篇文章 0 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍如何使用Vue.js结合Element UI库，将Echarts柱状图进行组件封装，实现动态从表格数据中循环遍历并展示图表。通过此方法，可以方便地在多个页面复用该图表组件。

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

// BarEcharts.vue
<!--柱状图公用组件-->
<template>
  <div ref="chart" style="width: 100%; height: 400px;"></div>
</template>
<script>
import echarts from 'echarts'

export default {
  name: "BarEcharts",
  data() {
    return {
      data: {
        title: '', //标题
        xRotate: 0, //x轴旋转角度
        xData: [], //x轴数据
        yFormatter: '', //y轴显示
        sColor0: '#66b1ff', // 0% 处的颜色
        sColor1: '#b3d3f8', // 100% 处的颜色
        sItemFormatter: "{c}",
        sData: [], //s数据
        sName: '', //s标题
      },
    }

了解本专栏