echarts在vue3中如何使用

一只桃子~

已于 2022-06-22 11:18:53 修改

阅读量321

点赞数

文章标签： echarts vue.js javascript

于 2022-06-21 15:19:55 首次发布

本文链接：https://blog.csdn.net/qq_43405603/article/details/125391488

版权

一、按需引入

1、npm i echarts --save

2、在你用到的页面复制以下代码，直接套用官网实例就可以

<template>
  <divf id="lineChar"></divf>
</template>
<script>
import { onMounted } from "vue";
import * as echarts from "echarts";
export default {
  name: "data_page",
  setup() {
    onMounted(() => {
      //需要获取到element,所以是onMounted的Hook
      let myChart = echarts.init(document.getElementById("lineChar"));
      // 绘制图表
      myChart.setOption({
        title: { text: "人数" },
        tooltip: {},
        xAxis: {
          data: ["10", "20", "30", "30", "40", "50"],
        },
        yAxis: {},
        series: [
          {
            name: "成绩",
            type: "bar",
            data: [100, 200, 300, 400, 500, 600],
          },
        ],
      });
      window.onresize = function () {
        //自适应大小
        myChart.resize();
      };
    });
  },
  components: {},
  mounted() {},
};
</script>
<style lang="less" scoped>
#lineChar {
  width: 700px;
  height: 700px;
}
</style>