vue 封装echarts

最新推荐文章于 2024-09-07 19:48:06 发布

IT、木昜

最新推荐文章于 2024-09-07 19:48:06 发布

阅读量535

点赞数 1

分类专栏： echarts

本文链接：https://blog.csdn.net/qq_37212162/article/details/122997375

版权

Echarts Vue 柱状图数据可视化组件

关键词由CSDN通过智能技术生成

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<template>
  <div ref="bar_echarts" style="width: 100%; height: 100%"></div>
</template>

<script>
export default {
  name: 'BarCharts',
  props: {
    seriesData: {
      type: Array
    }
  },
  data () {
    return {}
  },
  mounted () {
    this.showEcharts('', this.$refs.bar_echarts)
  },
  methods: {
    showEcharts (data, dom) {
      // let datalist = data
      let myChart = this.$echarts.init(dom)
      let option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
      option && myChart.setOption(option)
      // myChart.setOption({
      //   xAxis: {
      //     data: data
      //   },
      //   series: [
      //     {
      //       data: data
      //     }
      //   ]
      // })
    }
  },
  watch: {
    seriesData: function (newVal) {
      if (newVal) {
        // this.showEcharts(newVal)
      }
    }
  }
}
</script>

<style scoped>

</style>