1、准备工作

首先在echarts官方选择好自己需要使用的图表，并配置完成
新建一个vue文件

2、正式配置

HTML代码段：
注意id内的命名与下述getElementById一致

<template><div id="main" style="width:50%;height:376px"></div>
</template>

SCRIPT代码段：
注意mounted内的函数名与下述methods函数名一致

export default {mounted(){this.drawChart()  },
}

建立methods：{}，内嵌函数drawChart()

methods: {drawChart() {let myChart = this.$echarts.init(document.getElementById("main"));let option;{此处为代码粘贴处}}myChart.setOption(option);
}

以上都是所有图表必须的内容，接着这里终于可以使用上我们在echarts官方选择好自己需要使用的图表

配置好的图表，复制“代码编辑”-“JS”内的所有内容，粘贴至上述描述的位置
运行，成功！

关于一个图表组件需要使用两次及以上，可参考在 vue 中使用 echarts 的详细步骤

Vue中使用echarts的超详细步骤相关推荐

Vue中引入echarts的步骤，折线图、柱状图、饼图的常用配置项
vue中引入echarts 一.安装echarts 二.引入echarts 1.全局引入 2.局部引入三.vue中使用echarts 1.准备好函数 2.准备一个容器来放echarts 3.初始化容 ...
如何发布自己的npm包（超详细步骤，博主都在用）
发布自己的npm超详细步骤前沿: 从去年毕业,vue掌握的还算熟练应用了,做过的vue项目也有十几个了吧,每次做项目的时候,有些组件老是使用,拷贝来拷贝去的使用.我就想把这些组件封装到一起,以后做项 ...
vue中使用ECharts实现中国地图配置详解（配官方配置地址）
前言: 1.实现自定义左下角的视觉映射组件(包括自定义颜色.文字.图元大小) 2.实现自定义悬浮提示框如下图所示: 实现步骤: 一.在vue中安装echarts 1.npm install echa ...
vue中使用Echarts渲染四川地图
第一步:先创建vue项目(此处省略,详细步骤自行查找资料) 第二步:新建终端,下载echarts相关包: 在终端执行: npm install echarts --save 第三步:下载需要的地图js ...
大数据基础学习三：Ubuntu下安装VMware Tools超详细步骤及需要注意的问题（以ubuntu-18.04.3、Mware Workstation 15.1.0 Pro为例）
大数据基础学习三:Ubuntu下安装VMware Tools超详细步骤及需要注意的问题 (以ubuntu-18.04.3.Mware Workstation 15.1.0 Pro for Window ...
mysql连接idea详细教程_idea配置连接数据库的超详细步骤
学习时,使用IDEA的时候,需要连接Database,连接时遇到了一些小问题,下面记录一下操作流程以及遇到的问题的解决方法. 一. 连接操作简介:介绍如何创建连接,具体连接某个数据库的操作流程. 1 ...
苹果手机mov文件如何复制到电脑_如何在手机上访问电脑上的文件（超详细步骤） iPhone版...
之前分享了如何在两台电脑上共享文件,如需访问可点击如下链接: Town-Tree:如何在两台电脑之间共享文件(超详细步骤)zhuanlan.zhihu.com 如何在安卓手机上访问电脑上的文件,可点 ...
三、Hive数据仓库应用之Hive数据操作语言（超详细步骤指导操作，WIN10，VMware Workstation 15.5 PRO，CentOS-6.7）
Hive远程模式部署参考: 一.Hive数据仓库应用之Hive部署(超详细步骤指导操作,WIN10,VMware Workstation 15.5 PRO,CentOS-6.7) Hive数据定义语言 ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...

Vue中使用echarts的超详细步骤

1、准备工作

2、正式配置

Vue中使用echarts的超详细步骤相关推荐

最新文章

热门文章