在Vue3中使用Apache Echarts

展示简单的echarts实例

首先下载echrats依赖： npm install echarts --save

在项目中引入echarts:import * as echarts from "echarts";

然后定义我们加载echarts实例的方法：

大家在定义这个方法的时候可以参考我下面图片中的壳子，然后将两个红框括起来的内容换成自己的就可以了。

非常重要的一点就是我们一定要给展示echarts实例的盒子设置宽和高，要不然echarts实例渲染不出来

下面图片中展示了显示不同的echarts实例需要修改的代码部分，大家可以对比看一下。

这个是代码：

<template>
  <div class="test">
    <h1>setup测试代码</h1>
    <div id="container1" ref="echartRef" class="echart"></div>
  </div>
</template>
<script setup name="machineoperate">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
const echartRef = ref();
onMounted(() => {
  echartsOne();
});
function echartsOne() {
  // 基于准备好的dom，初始化echarts实例
  // const myChart = echarts.init(echartRef.value);
  const myChart = echarts.init(document.getElementById("container1"));
  // 绘制图表
  myChart.setOption({
    // title: {
    //   text: "ECharts 入门示例",
    // },
    // tooltip: {},
    // xAxis: {
    //   data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    // },
    // yAxis: {},
    // series: [
    //   {
    //     name: "销量",
    //     type: "bar",
    //     data: [5, 20, 36, 10, 10, 20],
    //   },
    // ],
    xAxis: {},
    yAxis: {},
    series: [
      {
        data: [
          [10, 40],
          [50, 100],
          [40, 20],
        ],
        type: "line",
      },
    ],
  });
}
</script>
<style scoped>
.echart {
  width: 250px;
  height: 200px;
}
</style>