uniapp中怎么引入echarts(最简单)

目录

引言

echarts.vue 文件代码

echarts-config 文件代码

在需要引入echarts图表的页面(.vue)中进行导入该文件(echarts.vue)

使用该组件(echarts)

引言

在uniapp中需要引入echarts时的时候,需要引入两个配置文件.分别是 echarts.vue  以及  echarts-config  放在你项目中需要的目录下,

echarts.vue 文件代码

<template><view class="content"><view:prop="optionData":moduleParamProp="moduleParam":change:moduleParamProp="echarts.moduleParamUp":change:prop="echarts.updateEcharts":id="moduleParam.id"class="echarts"></view></view>
</template><script>const style = {backgroundColor: 'rgba(145,215,255, .3)',dataBackground: {lineStyle: { color: 'rgba(145,215,255, .3)' },areaStyle: { color: 'rgba(145,215,255, .5)' },},selectedDataBackground: {lineStyle: { color: 'rgba(145,215,255, .6)' },areaStyle: { color: 'rgba(145,215,255, .8)' },},borderColor: 'rgb(145,215,255, .1)',handleStyle: {color: 'rgba(145,215,255, .5)',borderColor: 'rgba(145,215,255, .7)',},moveHandleStyle: {color: 'rgba(145,215,255, .2)',borderColor: 'rgba(145,215,255, .3)',},fillerColor: 'rgba(145,215,255, .1)',};import * as echarts from 'echarts';import echartsConfig from '@/common/echarts-config.js';export default {data() {return {};},mounted() {},props: {moduleParam: {type: Object,default: () => {id: 'myCharts';width: '100%';height: '300rpx';},},optionData: {type: Object,default: {tooltip: {trigger: 'axis',textStyle: {color: '#fff',},extraCssText:'padding: 10px; max-width: 60%; max-height:80%; overflow-y: auto; background: rgba(0, 64, 193, 0.7); border: none; color: #fff; border:none; box-shadow: 0 0 5px 1px rgba(147, 235, 248, 1)',},legend: {show: true,textStyle: { color: '#FFFDFE' },},grid: {left: '3%',right: '16%',bottom: '20%',containLabel: true,},toolbox: {show: false,},xAxis: {type: 'value',name: '时间(s)',splitLine: {show: false,},axisLine: {lineStyle: {color: '#B2CBDA',},},max: 'dataMax',},yAxis: {type: 'value',name: 'm/s²',splitLine: {show: false,},axisLine: {lineStyle: {color: '#B2CBDA',},},},dataZoom: [{show: true,bottom: '10%',realtime: true,start: 0,end: 30,height: 10,...style,},{type: 'inside',realtime: true,start: 0,end: 30,...style,},],series: [{name: '',type: 'line',stack: 'Total',lineStyle: {color: '#44F8FF',},showSymbol: false,data: [],},],},},},onLoad() {},methods: {},};
</script><script module="echarts" lang="renderjs">import * as echarts from "echarts"import echartsConfig from '@/common/echarts-config.js'let myChartexport default {data(){return{clickData:null}},watch: {"optionData": {handler(newV) {// console.info('watcher : ', newV)// this.updateEcharts(newV)},// 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能deep: true,}},mounted() {this.$nextTick(() => {if (typeof window.echarts === 'function') {this.initEcharts()} else {// 动态引入较大类库避免影响页面展示const script = document.createElement('script')// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算script.src = 'static/echarts.js'script.onload = this.initEcharts.bind(this)document.head.appendChild(script)}})},methods: {initEcharts(){this.$nextTick(() => {var dom = document.getElementById(this.moduleParam.id)echarts.dispose(dom)myChart = echarts.init(dom)// console.info("myChart : ", myChart)// 观测更新的数据在 view 层可以直接访问到myChart.setOption(this.optionData)})// // 点击传参// myChart.on('click', params => {// 	this.clickData = params// })},updateEcharts(newValue, oldValue, ownerInstance, instance) {this.$nextTick(() => {// 监听 service 层数据变更var dom = document.getElementById(this.moduleParam.id)echarts.dispose(dom)myChart = echarts.init(dom)// console.info('myChart : ', myChart)if(myChart._dom !== null) {myChart.setOption(newValue)}})},moduleParamUp(newvalue,oldvalue){},onClick(event, ownerInstance) {ownerInstance.callMethod('onViewClick',{value:this.clickData.value,name:this.clickData.name,dataIndex:this.clickData.dataIndex,seriesName:this.clickData.seriesName})}}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.echarts {/* margin-top: 100px; */width: 100%;height: 250px;}
</style>

echarts-config 文件代码

// 通用配置项
module.exports = {"color": ["#91cc75","#348739","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc"],"backgroundColor": "rgba(0, 0, 0, 0)","textStyle": {},"title": {"textStyle": {"color": "#464646"},"subtextStyle": {"color": "#6E7079"}},"line": {"itemStyle": {"borderWidth": 1},"lineStyle": {"width": 2},"symbolSize": 4,"symbol": "emptyCircle","smooth": false},"radar": {"itemStyle": {"borderWidth": 1},"lineStyle": {"width": 2},"symbolSize": 4,"symbol": "emptyCircle","smooth": false},"bar": {"itemStyle": {"barBorderWidth": 0,"barBorderColor": "#ccc"}},"pie": {"itemStyle": {"borderWidth": 0,"borderColor": "#ccc"}},"scatter": {"itemStyle": {"borderWidth": 0,"borderColor": "#ccc"}},"boxplot": {"itemStyle": {"borderWidth": 0,"borderColor": "#ccc"}},"parallel": {"itemStyle": {"borderWidth": 0,"borderColor": "#ccc"}},"sankey": {"itemStyle": {"borderWidth": 0,"borderColor": "#ccc"}},"funnel": {"itemStyle": {"borderWidth": 0,"borderColor": "#ccc"}},"gauge": {"itemStyle": {"borderWidth": 0,"borderColor": "#ccc"}},"candlestick": {"itemStyle": {"color": "#eb5454","color0": "#47b262","borderColor": "#eb5454","borderColor0": "#47b262","borderWidth": 1}},"graph": {"itemStyle": {"borderWidth": 0,"borderColor": "#ccc"},"lineStyle": {"width": 1,"color": "#aaa"},"symbolSize": 4,"symbol": "emptyCircle","smooth": false,"color": ["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc"],"label": {"color": "#eee"}},"map": {"itemStyle": {"normal": {"areaColor": "#eee","borderColor": "#444","borderWidth": 0.5},"emphasis": {"areaColor": "rgba(255,215,0,0.8)","borderColor": "#444","borderWidth": 1}},"label": {"normal": {"textStyle": {"color": "#000"}},"emphasis": {"textStyle": {"color": "rgb(100,0,0)"}}}},"geo": {"itemStyle": {"normal": {"areaColor": "#eee","borderColor": "#444","borderWidth": 0.5},"emphasis": {"areaColor": "rgba(255,215,0,0.8)","borderColor": "#444","borderWidth": 1}},"label": {"normal": {"textStyle": {"color": "#000"}},"emphasis": {"textStyle": {"color": "rgb(100,0,0)"}}}},"categoryAxis": {"axisLine": {"show": true,"lineStyle": {"color": "#6E7079"}},"axisTick": {"show": true,"lineStyle": {"color": "#6E7079"}},"axisLabel": {"show": true,"textStyle": {"color": "#6E7079"}},"splitLine": {"show": false,"lineStyle": {"color": ["#E0E6F1"]}},"splitArea": {"show": false,"areaStyle": {"color": ["rgba(250,250,250,0.2)","rgba(210,219,238,0.2)"]}}},"valueAxis": {"axisLine": {"show": false,"lineStyle": {"color": "#6E7079"}},"axisTick": {"show": false,"lineStyle": {"color": "#6E7079"}},"axisLabel": {"show": true,"textStyle": {"color": "#6E7079"}},"splitLine": {"show": true,"lineStyle": {"color": ["#E0E6F1"]}},"splitArea": {"show": false,"areaStyle": {"color": ["rgba(250,250,250,0.2)","rgba(210,219,238,0.2)"]}}},"logAxis": {"axisLine": {"show": false,"lineStyle": {"color": "#6E7079"}},"axisTick": {"show": false,"lineStyle": {"color": "#6E7079"}},"axisLabel": {"show": true,"textStyle": {"color": "#6E7079"}},"splitLine": {"show": true,"lineStyle": {"color": ["#E0E6F1"]}},"splitArea": {"show": false,"areaStyle": {"color": ["rgba(250,250,250,0.2)","rgba(210,219,238,0.2)"]}}},"timeAxis": {"axisLine": {"show": true,"lineStyle": {"color": "#6E7079"}},"axisTick": {"show": true,"lineStyle": {"color": "#6E7079"}},"axisLabel": {"show": true,"textStyle": {"color": "#6E7079"}},"splitLine": {"show": false,"lineStyle": {"color": ["#E0E6F1"]}},"splitArea": {"show": false,"areaStyle": {"color": ["rgba(250,250,250,0.2)","rgba(210,219,238,0.2)"]}}},"toolbox": {"iconStyle": {"normal": {"borderColor": "#999"},"emphasis": {"borderColor": "#666"}}},"legend": {"textStyle": {"color": "#333"}},"tooltip": {"axisPointer": {"lineStyle": {"color": "#ccc","width": 1},"crossStyle": {"color": "#ccc","width": 1}}},"timeline": {"lineStyle": {"color": "#DAE1F5","width": 2},"itemStyle": {"normal": {"color": "#A4B1D7","borderWidth": 1},"emphasis": {"color": "#FFF"}},"controlStyle": {"normal": {"color": "#A4B1D7","borderColor": "#A4B1D7","borderWidth": 1},"emphasis": {"color": "#A4B1D7","borderColor": "#A4B1D7","borderWidth": 1}},"checkpointStyle": {"color": "#316bf3","borderColor": "fff"},"label": {"normal": {"textStyle": {"color": "#A4B1D7"}},"emphasis": {"textStyle": {"color": "#A4B1D7"}}}},"visualMap": {"color": ["#bf444c","#d88273","#f6efa6"]},"dataZoom": {"handleSize": "undefined%","textStyle": {}},"markPoint": {"label": {"color": "#eee"},"emphasis": {"label": {"color": "#eee"}}}
}

在文件里面有关于这两个文件的路径,根据自己的项目的结构目录进行配置

在需要引入echarts图表的页面(.vue)中进行导入该文件(echarts.vue)

import echarts from '@/components/echarts/echarts.vue';export default {components: {echarts,},data() {return{ }}}


使用该组件(echarts)

	<echarts :moduleParam="{ id: '自定义' }" :optionData="自定义的Option" ></echarts>

其中这两个参数是必传的,第一个参数是为了让echarts 识别到你这个组件,并且要唯一, 第二个参数是图表的样式,详情可以去看echarts官网给出的样例

到此,echarts就引入成功!  如果有啥问题可以在评论区进行@我,我会帮你们一一解答

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/779853.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

XXE漏洞知识及ctfshow例题

XXE漏洞知识及ctfshow例题

XXE漏洞相关知识 XXE全称为XML Enternal Entity Injection 中文叫xml外部实体注入 什么是xml 简单了解XML&#xff1a; &#xff08;xml和html的区别可以简易的理解成&#xff1a;xml是用来储存数据和传输数据的而html是用来将数据展现出来&#xff09; XML 指可扩展标记语…
阅读更多...
Leetcode 680. 验证回文串 II

Leetcode 680. 验证回文串 II

给你一个字符串 s&#xff0c;最多 可以从中删除一个字符。 请你判断 s 是否能成为回文字符串&#xff1a;如果能&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;s “aba” 输出&#xff1a;true 示例 2&#xff1a…
阅读更多...
vue3封装Element导航菜单

vue3封装Element导航菜单

1. 导航外层布局 AsideView.vue <template><el-menu:default-active"defaultActive"class"my-menu":collapse"isCollapse":collapse-transition"false"open"handleOpen"close"handleClose"><menu…
阅读更多...
springmvc实现文件上传功能

springmvc实现文件上传功能

第一&#xff1a; RequestMapping("/testUp") public String testUp(MultipartFile photo, HttpSession session) throws IOException {//获取上传的文件的文件名String fileName photo.getOriginalFilename();//获取上传的文件的后缀名String suffixName fileName…
阅读更多...
Mysql or与in的区别

Mysql or与in的区别

创建一个表格 内涵一千万条数据 这张表中&#xff0c;只有id有建立索引&#xff0c;且其余都没有 测试1&#xff1a;使用or的情况下&#xff0c;根据主键进行查询 可以看到根据主键id进行or查询 花费了30-114毫秒&#xff0c;后面30多毫秒可能是因为Mysql的Buffer Pool缓冲池的…
阅读更多...
JAVA面试大全之架构篇

JAVA面试大全之架构篇

目录 1、架构基础 1.1、如何理解架构的演进？ 1.2、如何理解架构的服务化趋势？ 1.3、架构中有哪些技术点？ 2、缓存
阅读更多...
#设计模式#3.1用做松鼠桂鱼来理解抽象工厂（对象创建型模式）

#设计模式#3.1用做松鼠桂鱼来理解抽象工厂（对象创建型模式）

概念&#xff1a;xx工厂&#xff0c;xx产品 区分 工厂是动作&#xff0c;产品是结果&#xff08;菜品&#xff09; 概念&#xff1a;抽象xx&#xff0c;具体xx 区分 抽象产品&#xff1a;“中式菜品” 具体产品&#xff1a;“麻婆豆腐”、“宫保鸡丁” 抽象工厂&#xff1a;“…
阅读更多...
ubuntu制作deb安装包

ubuntu制作deb安装包

这篇文章很好 https://blog.csdn.net/weixin_51495377/article/details/132797013 使用脚本来控制的好处是比较灵活与功能强大 这里附上我的脚本 #!/bin/sh set -e echo "Installing My pd_sns Application..." cp -r ../application/lib/cartographer_ros/* /home…
阅读更多...
大模型重塑电商，淘宝、百度、京东讲出新故事

大模型重塑电商，淘宝、百度、京东讲出新故事

配图来自Canva可画 随着AI技术日渐成熟&#xff0c;大模型在各个领域的应用也越来越深入&#xff0c;国内互联网行业也随之进入了大模型竞赛的后半场&#xff0c;开始从“百模大战”转向了实际应用。大模型从通用到细分垂直领域的跨越&#xff0c;也让更多行业迎来了新的商机。…
阅读更多...
对象新增属性为什么不更新？

对象新增属性为什么不更新？

data () {return {obj: {a: 1}} }methods: {update () {this.obj.b 2} } 上面的伪代码&#xff0c;当我们执行 update 更新 obj 时&#xff0c;我们预期视图是要随之更新的&#xff0c;实际是并不会 这个其实很好理解&#xff0c;我们先要明白 vue 中 data init 的时机&am…
阅读更多...
P1629 邮递员送信

P1629 邮递员送信

题目描述 有一个邮递员要送东西&#xff0c;邮局在节点 1。他总共要送 n−1 样东西&#xff0c;其目的地分别是节点 2 到节点 n。由于这个城市的交通比较繁忙&#xff0c;因此所有的道路都是单行的&#xff0c;共有 m 条道路。这个邮递员每次只能带一样东西&#xff0c;并且运…
阅读更多...
【Vue3源码学习】— CH2.6 effect.ts：详解

【Vue3源码学习】— CH2.6 effect.ts：详解

effect.ts&#xff1a;详解 1. 理解activeEffect1.1 定义1.2 通过一个例子来说明这个过程a. 副作用函数的初始化b. 执行副作用函数前c. 访问state.countd. get拦截器中的track调用e. 修改state.count时的set拦截器f. trigger函数中的依赖重新执行 1.3 实战应用1.4 activeEffect…
阅读更多...
LLM推理入门指南②：深入解析KV缓存

LLM推理入门指南②：深入解析KV缓存

在本系列文章《LLM推理入门指南①&#xff1a;文本生成的初始化与解码阶段》中&#xff0c;作者对Transformer解码器的文本生成算法进行了高层次概述&#xff0c;着重介绍了两个阶段&#xff1a;单步初始化阶段&#xff0c;即提示的处理阶段&#xff0c;和逐个生成补全词元的多…
阅读更多...
FreeRTOS作业day1

FreeRTOS作业day1

使用定时器2让黄灯闪烁 核心代码 man.c HAL_TIM_Base_Start_IT(&htim1);//以中断的方式打开定时器1&#xff0c;定时器开始工作计数&#xff0c;当时间到达500ms后&#xff0c;执行中断回调函数 HAL_TIM_Base_Start_IT(&htim2);//以中断的方式打开定时器2&#xff0…
阅读更多...
pytorch中torch.stack()用法虽简单，但不好理解

pytorch中torch.stack()用法虽简单，但不好理解

函数功能 沿一个新维度对输入一系列张量进行连接&#xff0c;序列中所有张量应为相同形状&#xff0c;stack 函数返回的结果会新增一个维度。也即是把多个2维的张量凑成一个3维的张量&#xff1b;多个3维的凑成一个4维的张量…以此类推&#xff0c;也就是在增加新的维度上面进…
阅读更多...
浪潮信息AIStation与潞晨科技Colossal-AI 完成兼容性认证！

浪潮信息AIStation与潞晨科技Colossal-AI 完成兼容性认证！

为进一步提升大模型开发效率&#xff0c;近年来&#xff0c;浪潮信息持续加强行业合作&#xff0c;携手业内头部&#xff0c;全面进攻大模型领域。日前&#xff0c;浪潮信息AIStation智能业务创新生产平台与潞晨科技Colossal-AI大模型开发工具完成兼容性互认证。后续&#xff0…
阅读更多...
如何使用 RabbitMQ 进行消息的发送和接收

如何使用 RabbitMQ 进行消息的发送和接收

1、创建连接工厂&#xff1a; ConnectionFactory factory new ConnectionFactory(); factory.setHost("localhost"); // 设置 RabbitMQ 服务器的主机地址 Connection connection factory.newConnection(); // 创建连接 Channel channel connection.createChannel…
阅读更多...
性能测试VS负载测试VS压力测试

性能测试VS负载测试VS压力测试

性能测试 性能测试的目的不是去找bugs,而是排除系统的瓶颈，以及为以后的回归测试建立一个基准。而性能测试的操作，实际上就是一个非常小心受控的测量分析过程。在理想的情况下，被测软件在这个时候已经是足够稳定了，所以这个过程得以顺利的进行。 一组清晰已定义好的…
阅读更多...
FFmpeg将绿幕视频处理成透明视频播放

FFmpeg将绿幕视频处理成透明视频播放

怎么在网页端插入透明视频呢&#xff0c;之前在做Web3D项目时&#xff0c;使用threejs可以使绿幕视频透明显示在三维场景中&#xff0c;但是在网页端怎么让绿幕视频透明显示呢&#xff1f; 如图上图&#xff0c;视频背景遮挡住后面网页内容 想要如下图效果 之前有使用过ffmpeg…
阅读更多...
机器人码垛机:智能仓储系统的重要组成部分

机器人码垛机:智能仓储系统的重要组成部分

随着科技的飞速进步&#xff0c;机器人技术已经渗透到了许多行业领域&#xff0c;其中&#xff0c;仓储业尤为显著。机器人码垛机作为智能仓储系统的重要组成部分&#xff0c;不仅提高了码垛效率&#xff0c;还降低了人工成本和安全风险。然而&#xff0c;在其广泛应用的同时&a…
阅读更多...
最新文章

Copyright @ 2022~2023