echarts—柱状图

1. npm下载echarts

2. 项目中引入import * as echarts from "echarts";

3. 完成效果：
   

4. 代码

// An highlighted block
<template>
  <div ref="container" :style="{ width: '90%', height: '100%' }"></div>
</template>
<script>
import * as echarts from "echarts";
import {
    onMounted, ref } from "vue";
export default {
   
  setup() {
   
    const container = ref(null);
    onMounted(() => {
   
      const chart = echarts.init(container.value, {
   
        width: "700px",
        height: "200px",
      });
    chart.setOption({
   
          xAxis: {
   
            type: "category",
             // 数据的一种形式 1
            // data: ["一居", "一居", "一居"],
            axisTick: {
   
              length: 0,
            },