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

相关推荐
Cherry的跨界思维1 小时前
【AI测试全栈:Vue核心】19、Vue3+ECharts实战:构建AI测试可视化仪表盘全攻略
前端·人工智能·python·echarts·vue3·ai全栈·ai测试全栈
曼荼罗poisonous2 小时前
uniapp打包出现Manifest.json文件配置错误
uni-app
AC赳赳老秦2 小时前
前端可视化组件开发:DeepSeek辅助Vue/React图表组件编写实战
前端·vue.js·人工智能·react.js·信息可视化·数据分析·deepseek
kong79069283 小时前
Pandas简介
信息可视化·数据分析·pandas
爱喝可乐的老王4 小时前
数据分析实践--数据解析购房关键
信息可视化·数据分析·pandas·matplotlib
叫我:松哥5 小时前
基于 Flask 的音乐推荐与可视化分析系统,包含用户、创作者、管理员三种角色,集成 ECharts 进行数据可视化,采用混合推荐算法
开发语言·python·信息可视化·flask·echarts·pandas·推荐算法
qq_12498707535 小时前
基于Hadoop的黑龙江旅游景点推荐系统的设计与实现(源码+论文+部署+安装)
大数据·hadoop·分布式·python·信息可视化
2501_915921436 小时前
如何将 iOS 应用的 IPA 文件安装到手机进行测试
android·ios·智能手机·小程序·uni-app·iphone·webview
2501_916008896 小时前
不连 Xcode,也能把 iPhone App 的实时日志看清楚
android·ios·小程序·https·uni-app·iphone·webview