vue中简单使用Echarts

最新推荐文章于 2024-11-11 23:32:58 发布

小垄包

最新推荐文章于 2024-11-11 23:32:58 发布

阅读量119

点赞数 1

分类专栏：笔记文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/weixin_40737680/article/details/124848073

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

创建一个画布

<template>
  <div style="width: auto;height: 400px" id="main"></div>
</template>

画图表

<script>
  import echarts from 'echarts'
  export default {
    name: "echarts",
    data() {
      return {}
    },
    mounted() {
      this.echartsInit()
    },
    methods:{
      echartsInit() {
        echarts.init(document.getElementById('main')).setOption({
          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(220, 220, 220, 0.8)'
            }
          }]
        })
      }
    }
  }
</script>