首先去npm 官网搜索 echarts-for-vue

在终端下载npm-i-echarts-for-vue 下载完成后

下载完成后在 scr/min.js文件下引入


//其中import { createApp, } from 'vue'; 这段 已经自动生成 只需要引入h函数
import { createApp, h } from 'vue';//下面两句是全局引入echarts
import { plugin } from 'echarts-for-vue';
import * as echarts from 'echarts';//最后挂载到全局  这边有两种写法
//这是第一种const app = createApp(App);
app.use(plugin, { echarts, h });     //下面这个是自己尝试的第二种
createApp(App).use(plugin, { echarts, h }).use(router).mount('#app')

3.在要使用文件中的视图模块引入一下片段


<template>
//这里要使用一个块级标签包着 设置一个高度  否则 图表会不显示或者 挤在一起<div style="height: 650px"><ECharts ref="chart" :option="data.option" /></div>
</template>

4. 在script逻辑模块引入

   import { createComponent } from 'echarts-for-vue';import * as echarts from 'echarts';

5.在浏览器搜索echarts官网

点击示例进入后这里面有各式各样的图标其中包含地图随意点击一个

将代码格式切换到TS

6.定义一个option 对象

option = {xAxis: {type: 'category',
//    这个data 是X轴上的数据data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{
//    这个是Y轴上的额数据data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]
};

vue3 Echarts 绘图工具的使用相关推荐

基于Django实现Linux运维管理平台的整个实现过程和各种API接口调用以及Echarts绘图项目介绍（一）记录点滴生活
基于Django实现Linux运维管理平台整个实现过程和各种API接口调用以及Echarts绘图的使用介绍项目内容涉及技术直通车: 我的项目仓库:MyGitHub https://github.co ...
GraphViz 使用教程-用代码生成有向图。并介绍流程图、时序图等绘图工具
GraphViz 图形工具使用教程综合篇 GraphViz简述 GraphViz基本元素生成一个有向图 node属性.edit属性和subgraph的使用如何安装GraphViz GraphViz ...
Echarts绘图技术总结
Echarts是百度发布的一种绘图工具,通过Echarts,我们可以绘制各种图形:包括折线图(Line).条形图(Bar).饼图(Pie).散点图(Scatter).地图(Map)等.今天我们来谈谈如 ...
＜笔记1＞matplotlib绘图工具笔记
matplotlib绘图工具笔记 python中有许多非常方便的可视化工具,例如matplotlib,seaborn等.在这里主要总结matplotlib的简单绘图方法. 设置图形的大小和中文显示,图 ...
HTML5 canvas 在线画笔绘图工具（三）
组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之 ...
编程软件python图片-python Plotly绘图工具的简单使用
1.plotly库的相关介绍 1)相关说明 plotly是一个基于javascript的绘图库,plotly绘图种类丰富,效果美观: 易于保存与分享plotly的绘图结果,并且可以与Web无缝集成: ...
python 画柱状图-python使用Plotly绘图工具绘制柱状图
本文实例为大家分享了python使用Plotly绘图工具绘制柱状图的具体代码,供大家参考,具体内容如下使用Plotly绘制基本的柱状图,需要用到的函数是graph_objs 中 Bar函数通过参数 ...
用python画太阳花-python 简单的绘图工具turtle使用详解
目录 1. 画布(canvas) 1.1 设置画布大小 2. 画笔 2.1 画笔的状态 2.2 画笔的属性 2.3 绘图命令 3. 命令详解 4. 绘图举例 4.1 太阳花 4.2 绘制小蟒蛇 4.3 ...
python绘制饼图-Python使用Plotly绘图工具，绘制饼图
今天我们来学习一下如何使用Python的Plotly绘图工具,绘制饼图使用Plotly绘制饼图的方法,我们需要使用graph_objs中的Pie函数函数中最常用的两个属性values,用于赋值给需 ...

vue3 Echarts 绘图工具的使用

首先去npm 官网搜索 echarts-for-vue

在终端下载npm-i-echarts-for-vue 下载完成后

下载完成后在 scr/min.js文件下引入

3.在要使用文件中的视图模块引入一下片段

4. 在script逻辑模块引入

5.在浏览器搜索echarts官网

6.定义一个option 对象

vue3 Echarts 绘图工具的使用相关推荐

最新文章

热门文章

vue3 Echarts 绘图工具的使用

首先去npm 官网 搜索 echarts-for-vue

在终端下载npm-i-echarts-for-vue 下载完成后

下载完成后在 scr/min.js文件下引入

3.在要使用文件中的 视图模块引入一下片段

4. 在script逻辑模块引入

5.在浏览器搜索echarts官网

6.定义一个option 对象

vue3 Echarts 绘图工具的使用相关推荐

最新文章

热门文章

首先去npm 官网搜索 echarts-for-vue

3.在要使用文件中的视图模块引入一下片段