VUE3引入Echarts

最新推荐文章于 2024-09-17 16:11:14 发布

艾码仕

最新推荐文章于 2024-09-17 16:11:14 发布

阅读量265

点赞数

分类专栏： vue.js 文章标签： echarts vue.js elementui

本文链接：https://blog.csdn.net/deng_zhihao692817/article/details/124602696

版权

vue.js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

安装

npm install echarts --save

template

<!-- 统计图 -->
        <el-card class="box-card" shadow="hover" style="height: 310px" :body-style="{ padding: '10px' }">
          <template #header>
            <div class="card-tlt">
              <span>订单总数统计</span>
            </div>
          </template>
          <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
          <div ref="myEchart" style="width: 100%; height: 270px"></div>
        </el-card>

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


 mounted() {
    // 画统计图
    this.drawLine();
  },

  methods: {
    drawLine() {
      //console.log(this.$refs.myEchart)
      let myChart = echarts.init(this.$refs.myEchart);
      // 指定图表的配置项和数据
      let option = {
        xAxis: {
          type: "category",
          data: [
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
            "星期七",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>