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

相关推荐
2501_915909065 小时前
iOS 反编译防护工具全景解析 从底层符号到资源层的多维安全体系
android·安全·ios·小程序·uni-app·iphone·webview
檐下翻书1736 小时前
互联网企业组织结构图在线设计 扁平化架构模板
论文阅读·人工智能·信息可视化·架构·流程图·论文笔记
lvha6 小时前
uniapp BLE低功耗蓝牙插件 支持安卓 iOS 鸿蒙NEXT 微信小程序
uni-app·蓝牙
派可数据BI可视化7 小时前
你知道 BI 是什么吗?关于 BI 系统的概述
大数据·信息可视化·数据分析
打码人的日常分享8 小时前
IPD项目质量体系管理方案
大数据·运维·人工智能·信息可视化·1024程序员节
打码人的日常分享10 小时前
云计算大数据系统建设方案,私有云建设方案
运维·网络·安全·信息可视化·架构·云计算
红队it11 小时前
【Tensorflow】基于卷积神经网络(CNN)交通标志图像识别系统(完整系统源码+数据库+开发笔记+详细部署教程+启动教程)✅
python·深度学习·pycharm·cnn·毕业设计·tensorflow·echarts
数据皮皮侠11 小时前
上市公司战略性新兴产业专利数据库(2003-2024)
数据库·人工智能·信息可视化·区块链·微信开放平台
Redundantº11 小时前
Uniapp 适配安卓与 iOS 的 PDF、DOC 文件上传
android·ios·pdf·uni-app·webview
Harry技术12 小时前
UniApp H5 代理失效的终极替代方案
uni-app