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

相关推荐
2301_8227032018 分钟前
Flutter 框架跨平台鸿蒙开发 - 梦境场景重现应用
flutter·华为·信息可视化·开源·harmonyos·鸿蒙
Fate_I_C1 小时前
uniappx 鸿蒙运行包制作失败
华为·uni-app·uniapp·harmonyos
没有梦想的咸鱼185-1037-16632 小时前
AI大模型支持下的顶刊绘图|散点图、气泡图、柱状图、热力图、柱状图、热力图、箱线图、热力图、云雨图、韦恩图、瀑布图、神经网络图、时间序列或分布展示
人工智能·神经网络·arcgis·信息可视化·数据分析·r语言·ai写作
李昊哲小课2 小时前
Pandas数据分析 - 第十一章:数据可视化
信息可视化·数据挖掘·数据分析·pandas·matplotlib
AI体验君2 小时前
2026年AI数据大屏实用指南,简化数据可视化制作
人工智能·信息可视化
chQHk57BN2 小时前
跨平台前端开发:用Flutter和UniApp一次编写多端运行
flutter·uni-app
q_35488851532 小时前
计算机毕业设计:Python智慧水文监测与流量预测系统 Flask框架 多元线性回归 数据分析 可视化 水网 流量预测 水位预测(建议收藏)✅
大数据·python·信息可视化·数据挖掘·flask·线性回归·课程设计
新知图书4 小时前
Power BI Desktop连接数据源
信息可视化·数据分析·power bi·商务数据分析·商业数据分析
_院长大人_15 小时前
Vue + ECharts 实现价格趋势分析图
前端·vue.js·echarts
自然 醒16 小时前
uni-app开发微信小程序,如何使用towxml去渲染md格式和html标签格式的内容?
微信小程序·uni-app·html