vue3 使用echarts

我不是女神ヾ 2023-01-19 04:36 4阅读 0赞

## 效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70]

## 安装Echarts ##

cnpm install echarts --save

## vue页面使用 ##

<template>
      <div id="myChart123" :style="{ width: '1500px', height: '550px'}"></div>
    </template>
    
    <script> // 引入echarts import * as echarts from 'echarts' import { onMounted} from "vue"; export default { setup() { onMounted(() => { // 需要获取到element,所以是onMounted的Hook let myChart = echarts.init(document.getElementById("myChart123")); // 绘制图表 myChart.setOption({ xAxis: { data: ["4-3", "4-4", "4-5", "4-6", "4-7", "4-8", "4-9"] }, yAxis:{ }, series: [ { name: "用户量", type: "line", data: [8, 15, 31, 13, 15, 22, 11] } ] }); window.onresize = function () { // 自适应大小 myChart.resize(); }; }); } } </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70]: /images/20221021/f26ff9614acd4ed2a4deb29598000123.png

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue3 中使用 echarts 图表——准备篇

我们常常在项目中使用图表来表示数据，而目前最常用的图标就是echarts，接下来我们就开始学习在vue中使用echarts图标。

骑猪看日落/ 2024年04月22日 15:19/ 0 赞/ 126 阅读

相关 vue3+echarts使用水球图

水球图不是echarts内置组件，需要安装搭配vue-echarts组件，该组件可以省略很多开发echarts图表的重复操作，如果init，setOptions等

矫情吗；*/ 2024年03月23日 13:17/ 0 赞/ 144 阅读

相关 vue 使用 echarts

[echarts官网][echarts] 安装 npm install echarts -S 全局导入 //导入echarts import \ as ec

忘是亡心i/ 2023年10月06日 22:08/ 0 赞/ 86 阅读

相关 vue使用echarts

安装echarts npm install echarts -- save Home.vue <template> <template>

偏执的太偏执、/ 2023年05月31日 06:54/ 0 赞/ 65 阅读

相关 vue3 使用echarts

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

我不是女神ヾ/ 2023年01月19日 04:36/ 0 赞/ 5 阅读

相关 vue webpack 使用 echarts

vue webpack 使用 echarts 引入echart npm install echarts -S 全局引用，在main.js添加如下代码

布满荆棘的人生/ 2022年10月12日 01:21/ 0 赞/ 239 阅读

相关在vue3 中使用echarts

1,安装echarts npm install echarts --save 2,在main.js中导入 import { createApp } fro

待我称王封你为后i/ 2022年08月29日 13:45/ 0 赞/ 271 阅读

相关 Vue中使用Echarts

基本用法打开终端输入：npm install echarts --save 在main.js里面全局引入的方式 // The Vue build

心已赠人/ 2022年03月06日 01:20/ 0 赞/ 346 阅读

相关 vue中使用echarts

[这里是官方引入说明][Link 1] 注意：图表容器必须设置高度，以下都是按需引入，否则体积太大饼状图 <script> var echarts = re

向右看齐/ 2021年11月05日 12:44/ 0 赞/ 572 阅读

相关 vue3+ts中使用echarts5.0

1. 安装 npm install echarts --save 1. 在要使用的页面引入 import as echarts from "echa

深藏阁楼爱情的钟/ 2021年07月26日 01:05/ 0 赞/ 1541 阅读