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_9159184112 小时前
详解iOS App上架至App Store的全流程步骤与注意事项
android·macos·ios·小程序·uni-app·cocoa·iphone
anyup13 小时前
终于在今天入选了 Gitee GVP,这真值得庆祝~
前端·uni-app·开源
中科致研zkzhiyan15 小时前
锚定评委评审视角,构建科研重点项目申报答辩PPT闭环逻辑框架
信息可视化·powerpoint·ppt
Smile_ping15 小时前
tooltip在真机上出现图形阴影?
echarts·tooltip图形阴影设置
金融小白数据分析之路17 小时前
绍兴市镇街echarts 制作
前端·数据库·echarts
虚惊一场19 小时前
撤销为什么只需要 pop:用事件重放实现离线台球计分
微信小程序·uni-app
虚惊一场19 小时前
从一个小程序到一座工具箱:uni-app 分包与 Flask 微服务实践
微信小程序·uni-app
Cry丶20 小时前
【已解决】adb devices 能识别手机,但 HBuilderX 搜索不到设备的避坑指南
android·adb·uni-app·hbuilderx·真机调试
paopaokaka_luck2 天前
基于Springboot3+Vue3的高校选课系统(AI选课助手、协同过滤算法、分享到微博、扣扣、Echarts图形化分析)
网络·spring boot·网络协议·echarts
想你依然心痛2 天前
用MySQL玩转数据可视化:从SQL查询到动态图表的完整实战
sql·mysql·信息可视化