ECharts基础使用方法 ---vue

news/2024/9/28 21:12:19/
1.安装依赖文件

仔细看项目" README.md " 描述,确定用什么安装

npm

npm install echarts --save //官网推荐使用

pnpm

pnpm install echarts --save

其他也是

在项目根目录,打开当前目录命令控制栏,输入以上命令并运行

 安装成功后去看 " package.json " 查看是否安装成功,成功如下图所示:

2.书写配置

 template 部分类容

<template><div id="main" style="width: 600px;height:400px;"></div>
</template>

script 部分类容

javascript">import * as echarts from 'echarts'; //在哪里使用就在那里导入export default {
//mounted用于dom挂载mounted(){    // 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 绘制图表myChart.setOption({title: {text: 'ECharts 入门示例'},tooltip: {},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]});}
}
3.效果展示

-------------------------- 


http://www.ppmy.cn/news/1530788.html

相关文章

MySQL的登录、访问、退出

一、登录&#xff1a; 访问MySQL服务器对应的命令&#xff1a;mysql.exe ,位置&#xff1a;C:\Program Files\MySQL\MySQL Server 8.0\bin &#xff08;mysql.exe需要带参数执行&#xff0c;所以直接在图形界面下执行该命令会自动结束&#xff09; 执行mysql.exe命令的时候出…

如何在 UniApp 中实现地图的视野自适应?

推荐学习文档 golang应用级os框架&#xff0c;欢迎stargolang应用级os框架使用案例&#xff0c;欢迎star案例&#xff1a;基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总想学习更多golang知识&#xff0c;这里有免费的golang学习笔…

基于springboot vue 大学生竞赛管理系统设计与实现

博主介绍&#xff1a;专注于Java vue .net php phython 小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟 我的博客空间发布了1000毕设题目 方便大家学习使用 感兴趣的…

【Unity基础】Unity中跨平台使用SQLite(一)

一、概述 游戏中数据存储方案众多&#xff0c;在进行选择时&#xff0c;除了要考虑数据类型外&#xff0c;还要考虑对于跨平台的支持。 对于数据存储方案将在单独文章里介绍&#xff0c;下面只是总结了不同方案的特点。 方法跨平台支持读写能力适合场景特点Resources优秀只读…

网站自动识别使用设备

现在有一个需求是&#xff0c;写了两组页面&#xff0c;进行渲染&#xff0c;一组是pc端&#xff0c;另外一组是移动端&#xff0c;要自动匹配当前设备进行渲染 解决方案 1.通过 navigator.userAgent来判断当前的设备 例子 <script>document.write("用户代理: &…

专题七_分治_快排_归并_算法专题详细总结

目录 分治 一、分治思想的概念 二、分治思想的步骤 1. 颜⾊分类&#xff08;medium&#xff09; 解析&#xff1a; 2. 快速排序&#xff08;medium&#xff09; 解析&#xff1a; 总结&#xff1a; 3. 快速选择算法&#xff08;medium&#xff09; 解析&#xff1a; …

Ai产品经理

从通用类产品经理转行到智能硬件产品经理&#xff0c;虽然都是产品经理&#xff0c;但是即跨越行业也跨越了职业类别。通用类的产品经理工作一般都会完整的经历市场调研、用户研究、产品策略、商业模式、营销、运营以及其他一系列相关的产品管理。转型到智能硬件行业&#xff0…

LVS与nginx的区别

文章目录 一、优势比较二、配置复杂度三、工作层次 一、优势比较 性能: LVS&#xff1a;LVS是专门为高性能设计的&#xff0c;它使用内核级别的数据包处理能力&#xff0c;能够提供非常高的吞吐量和低延迟。Nginx&#xff1a;Nginx也具有出色的性能&#xff0c;特别是在处理静态…