vue3+ts中使用echarts5.0

深藏阁楼爱情的钟 2021-07-26 01:05 1483阅读 0赞

1.  安装

npm install echarts --save

1.  在要使用的页面引入

import * as echarts from "echarts";

1.  容器配置

<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
      <el-card shadow="always" class="box-card">
        <div class="chart-body">
          <div id="lineChart" style="height: 300px; width: 100% padding:10px" ></div>
        </div>
      </el-card>
    </el-col>

1.  绘图

// 1. lineChart
    public drawLineChart() { 
      const lineChart: HTMLElement = document.getElementById(
        "lineChart"
      ) as HTMLElement;
      const myChart = echarts.init(lineChart).setOption({ 
        title: { 
          text: "ECharts 入门示例",
        },
        tooltip: { },
        xAxis: { 
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: { },
        series: [
          { 
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
      return myChart;
    }

1.  调用

public async mounted() { 
      await this.drawLineChart();
    }

发表评论取消回复

表情：

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

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

相关阅读

相关 vue3 + ts：使用uuid

一、使用vue3-uuid > pnpm add vue3-uuid ![17d27dce17bb4cacbd99cef600b297c0.png][] 切换源： >

r囧r小猫/ 2024年04月01日 15:53/ 0 赞/ 68 阅读

相关 vue3+ts：shims-vue.d.ts

一、本文引子 uniapp（3.8.4.20230531）+ vue3 + ts + vite 项目在搭建这个base项目的时候出现红素波浪线如图，代码运行正常，但是看起

男娘i/ 2024年03月16日 19:29/ 0 赞/ 42 阅读

相关 Vue中使用ts

typescript引入新建项目创建项目时，选择ts ![在这里插入图片描述][20200917172410786.png_pic_center]已存在项目

以你之姓@/ 2022年12月08日 04:29/ 0 赞/ 183 阅读

相关 vue2+ts+vue-echart+echart+echarts-liquidfill.js: 画水球图

vue-echart 和 echart的安装参考上文链接 https://blog.csdn.net/u014686399?spm=1003.2018.

冷不防/ 2022年11月12日 11:52/ 0 赞/ 229 阅读

相关 vue2+ts+vue-echarts 画环形图

注意一下各位看清一下，是`vue-echarts`呀。这里是个坑，因为还是有v-echarts、vue-echarts-ts 等等，他们竟然不是一个东西。使用过程

小咪咪/ 2022年11月12日 08:25/ 0 赞/ 333 阅读

相关 vue中使用echarts

第一步：下载echarts npm install echarts --save 开发： main.js //引入echart： import

迈不过友情╰/ 2022年11月05日 08:39/ 0 赞/ 168 阅读

相关在vue3 中使用echarts

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

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

相关 Vue中使用Echarts

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

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

相关 vue中使用echarts

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

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

相关 vue3+ts中使用echarts5.0

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

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