vue3+ts中使用echarts5.0

深藏阁楼爱情的钟 2021-07-26 01:05 1487阅读 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 条评论，1487人围观）

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

相关阅读

相关 Vue中使用ts

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

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

相关 Vue 中使用ECharts

下载Echarts npm install echarts 组件中引入 // 局部引入 import echarts from 'echarts'

╰半橙微兮°/ 2022年12月06日 12:52/ 0 赞/ 178 阅读

相关 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 赞/ 241 阅读

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

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

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

相关 vue中使用echarts

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

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

相关 vue中使用echarts

一、下载包 npm install echarts -S 二、main.js中引入 import echarts from 'echarts' V

比眉伴天荒/ 2022年10月27日 13:48/ 0 赞/ 160 阅读

相关在vue3 中使用echarts

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

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

相关 Vue中使用Echarts

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

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

相关 vue中使用echarts

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

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

相关 vue3+ts中使用echarts5.0

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

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