uni-app:通过ECharts实现数据可视化-如何引入项目

效果

引入文件位置

代码

html 复制代码
<template>
  <view id="myChart"></view>
</template>
<script>
import echarts from '@/static/js/echarts.js'  // 引入文件
export default {
	mounted() {
	    // 初始化ECharts
	    const myChart = echarts.init(document.getElementById('myChart'))
	
	    // 进行图表的配置和数据处理
	    myChart.setOption({
	      title: {
	        text: 'ECharts 入门示例'
	      },
	      tooltip: {},
	      xAxis: {
	        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
	      },
	      yAxis: {},
	      series: [
	        {
	          name: '销量',
	          type: 'bar',
	          data: [5, 20, 36, 10, 10, 20]
	        }
	      ]
	    })
	  },
	  data() {
		return {
			
		}
	  },
	methods: {}
}
</script>
<style>
	#myChart {
	  width: 400px;
	  height: 300px;
	}
</style>

echarts.js下载地址:

获取 ECharts - 入门篇 - Handbook - Apache ECharts

相关推荐
中科致研zkzhiyan7 小时前
大学教授职称晋升汇报 PPT 设计指南
信息可视化·powerpoint·ppt
迪康Defender19 小时前
终端安全行为分析:审计日志如何转化为业务报表?落地实践与避坑指南
运维·经验分享·安全·信息可视化·自动化·安全威胁分析·运维开发
paopaokaka_luck19 小时前
剧本杀预约管理系统(AI客服、 webSocket在线沟通、协同过滤算法推荐、Echarts多维分析、 QQ邮箱通知、 腾讯地图导航、四角色协作)
websocket·网络协议·echarts
hhb_6181 天前
一键生成数据看板,ECharts实战演示
前端·javascript·echarts
Elastic 中国社区官方博客1 天前
Kibana:创建包含时间序列图表的仪表板
大数据·elasticsearch·搜索引擎·信息可视化·全文检索·kibana
余丁,微生信1 天前
《Nature Genetics》树图实操:五步把基因和功能分类缩进一张图
信息可视化·论文插图·生信分析·科研绘图·科学科普·nature genetics·树图
小蒜学长2 天前
基于SpringBoot+uni-app的闪洁家政系统的设计与实现(代码+数据库+LW)
java·spring boot·后端·uni-app·家政服务
anyup_前端梦工厂2 天前
uni-app 模板 Starter 一键清理 Skill 发布
前端·人工智能·uni-app
m0_587383002 天前
GogoAI自助健身门店解决方案核心技术实现与落地部署全流程实操指南
运维·spring boot·信息可视化·架构·需求分析
anyup_前端梦工厂2 天前
将uni-app工程迁移uni-app x,AI 能帮我们做什么?
前端·人工智能·uni-app