vue3中使用echarts

最新推荐文章于 2024-07-05 10:34:38 发布

大可-

最新推荐文章于 2024-07-05 10:34:38 发布

阅读量196

点赞数 2

文章标签： echarts 前端 javascript vue.js

本文链接：https://blog.csdn.net/m0_55333789/article/details/131134769

版权

一、安装

npm install --save echarts

二、使用

<template>
<div>
  <div id="myChart" :style="{ width: '300px', height: '300px' }"></div>
</div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { reactive, onMounted } from 'vue';

  const state = reactive<any>({
    option: {
      grid: {
        top: '4%',
        left: '2%',
        right: '4%',
        bottom: '0%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: ["芳草地国际","实验小学","白家庄小学","外国语小学","师范学校附属","望京东园"],
          axisTick: {
            alignWithLabel: true,
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
        },
      ],
      series: [
        {
          name: '学校',
          type: 'bar',
          barWidth: '40%',
          data: [260,680,360,460,150,320],
        },
      ],
    },
  })

const initeCharts = () => {
  let myChart = echarts.init(<HTMLElement>document.getElementById('myChart'))
  // 绘制图表
  myChart.setOption(state.option)
}

onMounted(() => {
  initeCharts()
})

</script>

<style scoped>

</style>