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

相关推荐
paopaokaka_luck4 小时前
智慧电玩店管理系统(空闲机台随机分配、游玩时长概率模拟、积分自动结算、积分兑换闭环、 ECharts经营分析、 腾讯地图选址)
java·人工智能·mysql·echarts·推荐算法
一渊之隔5 小时前
uniapp BLE 开发踩坑:小米手机数据接收截断问题排查全记录
智能手机·uni-app
阿俊-全栈开发6 小时前
LikeShop 单商户标准版 UniApp 端二开:页面组件复用与自定义主题适配
uni-app·likeshop开源商城·likeshop单商户标准版·多商户源码
2601_965449086 小时前
我用AI给开源项目做了个官网宣传片,流程全公开
信息可视化·自动化·音视频
城数派9 小时前
1981-2023年中国逐日归一化植被指数NDVI栅格数据
人工智能·信息可视化
瓶瓶持续学习中11 小时前
数字孪生到空间智能,5家厂商的技术路线有何不同?
大数据·人工智能·信息可视化·架构
2601_9654490812 小时前
新闻视频自动化:从采集、清洗到成片的工程化实践
信息可视化·自动化·音视频
半生过往12 小时前
uni-app多端项目工作笔记
笔记·uni-app
总要学点什么12 小时前
第75篇:右键菜单控件——把一张会做事的菜单钉在鼠标落下的那点
前端·信息可视化·echarts·cesium·空间分析
paopaokaka_luck12 小时前
美食推荐系统(协同过滤算法推荐、AI助手、HanLP中文分词、 ECharts可视化分析、菜谱学习与话题交流)
java·spring boot·mysql·tomcat·echarts