vue中echarts的应用

最新推荐文章于 2024-10-18 15:58:53 发布

Lancelot212

最新推荐文章于 2024-10-18 15:58:53 发布

阅读量130

点赞数 1

文章标签： vue.js echarts 前端

本文链接：https://blog.csdn.net/qq_73882890/article/details/140118962

版权

首先我们要安装echarts

pnpm add echarts

然后进入echarts官网

https://echarts.apache.org/examples/zh/index.html

在里面我选一个图点进去，这里我们选择最简单的折线图

我们选完整代码，将他复制粘贴到vue中的<script>模块中

例如：

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

onMounted(() => {
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

option && myChart.setOption(option);
})


</script>

<template>
    <div id="main"></div>
</template>

<style scoped>


</style>

很多情况下是用onMounted,我们在渲染前需要把echarts配置好，还需要在template准备一个容器装echarts，在option中去配置echarts，相关的配置项要去阅读官方文档