网站的主题有哪些,长春建设局网站处长,上海装饰公司10排名,上海天华建筑设计有限公司待遇我们常常在项目中使用图表来表示数据#xff0c;而目前最常用的图标就是echarts#xff0c;接下来我们就开始学习在vue中使用echarts图标。 一、准备一个vue项目#xff08;一般通过vite来构建#xff0c;而不是vue-cli#xff09; 1.找到打开vite官网
2. 运行创建命令
… 我们常常在项目中使用图表来表示数据而目前最常用的图标就是echarts接下来我们就开始学习在vue中使用echarts图标。 一、准备一个vue项目一般通过vite来构建而不是vue-cli 1.找到打开vite官网
2. 运行创建命令
yarn create vite3. 执行yarn install安装项目依赖之后执行行yarn dev运行项目 二、添加echarts依赖 1. 搜索echarts官网 2. 添加依赖
yarn add echarts 三、写一个在vue中使用echarts的基本案例
templatediv idmain/div
/templatescript setup
import * as echarts from echarts;
import {onMounted} from vue;
onMounted((){var chartDom document.getElementById(main);var myChart echarts.init(chartDom);var option;option {xAxis: {type: category,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]},yAxis: {type: value},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: bar}]};option myChart.setOption(option);
});/scriptstyle scoped
#main {width: 50vw;height: 50vh;
}
/style目前还存在一些问题获取DOM节点、通常请求数据是异步的下一篇重点讲解
