uniapp小程序中引入Echarts

这篇具有很好参考价值的文章主要介绍了uniapp小程序中引入Echarts。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uni-app微信小程序引用echarts,与pc端不同,如果直接下载echarts包,会导致小程序打包过大。直接上干货!!!

步骤一:下载插件

下载插件

  1. 将插件导入到项目中,项目中会生成一个js_sdk文件夹;
  2. 将文件夹下的uni-ec-canvas移动至components文件夹下
    uniapp小程序使用echarts,uni-app,小程序,echarts

步骤二:引用

根据自己的文件引入

import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from '@/components/uni-ec-canvas/echarts'

在echarts官网中找自己想要的图标使用即可,此处以柱状图为例文章来源地址https://www.toymoban.com/news/detail-718522.html

<template>
    <view>
            <uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec">
            </uni-ec-canvas>
    </view>
</template>
 
<script>
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from '@/components/uni-ec-canvas/echarts'
let chart = null
export default {
        components: {
                uniEcCanvas
        },
        data() {
                return {
                        ec: {
                                lazyLoad: true
                        },
                        option: {
                                tooltip: {
                                        trigger: 'axis',
                                        axisPointer: { // 坐标轴指示器,坐标轴触发有效
                                                type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
                                        }
                                },
                                grid: {
                                        left: '40',
                                        right: '40',
                                        bottom: '3%',
                                        containLabel: true
                                },
                                xAxis: {
                                        type: 'category',
                                        axisTick: {
                                                show: false,
                                        },
                                        nameTextStyle: {
                                                color: '#666666'
                                        },
                                        axisLabel: {
                                                show: true,
                                                textStyle: {
                                                        color: '#666',
                                                        fontSize: '12',
                                                        fontWeight:'bold'
                                                }
                                        },
                                        axisLine: {
                                                lineStyle: {
                                                        color: '#666',
                                                        width: 1
                                                }
                                        },
                                        data: ["寿险", "重疾", "意外", "医疗", "年金"],
                                },
                                yAxis: {
                                        type: 'value',
                                        axisLine: {
                                                show: false, //y轴线消失

                                        },
                                        axisLabel: {
                                                show: true,
                                                textStyle: {
                                                        color: '#666',
                                                        fontSize: '11'
                                                }
                                        },

                                        axisTick: {
                                                show: false,
                                        },
                                },
                                series: [{
                                        barWidth: 20,
                                        type: 'bar',
                                        data: [20, 50, 40, 10, 20],
                                        itemStyle: {
                                                normal: {
                                                        //每根柱子颜色设置
                                                        color: function(params) {
                                                                const colorList = ["#FFC600", "#21A5FF", "#FF6000", "#00D69C",
                                                                        "#998BFF"
                                                                ];
                                                                return colorList[params.dataIndex];
                                                        }
                                                }
                                        },
                                        label: {
                                                show: true,
                                                position: 'top',
                                                formatter: '{c}万',
                                                color: '#666666',
                                                fontStyle: 'PingFang SC',
                                                fontWeight: 'bold',
                                                fontSize:'8'
                                        }
                                }]
                        },
                }
        },
        methods: {
                initChart(canvas, width, height, canvasDpr) {
                        console.log(canvas, width, height, canvasDpr)
                        chart = echarts.init(canvas, null, {
                                width: width,
                                height: height,
                                devicePixelRatio: canvasDpr
                        })
                        canvas.setChart(chart)
                        chart.setOption(this.option)
                        return chart
                },
        },
        onLoad() {
                setTimeout(() => {
                        console.log(this.$refs)
                }, 2000)
                this.$refs.canvas.init(this.initChart)
        },
}
</script>
<style>
.uni-ec-canvas {
        width: 100%;
        height: 500rpx;
        display: block;
        margin-top: 30rpx;
}
</style>

到了这里,关于uniapp小程序中引入Echarts的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【App端】uni-app使用echarts和百度地图api

    近期的app项目中想加一个功能,展示全国各地的某一数据统计情况,想来想去,用echarts做地图数据可视化直观且美观。于是就去研究了如何使用,其实在移动端使用echarts地图踩的bug挺多的,总结如下。 JavaScript API GL账号和获取密钥 1、获取SHA1:Android平台云端打包 - 公共测试

    2024年02月11日
    浏览(51)
  • uni-app小程序引入iconfont的三种方式详解(无需下载文件到项目)

    官网iconfont的引入方式有三种分别为: Unicode 、 Font class 、 Symbol , 其中已明确说明 Unicode、Font class 这两种引入方式 不支持多色 。 单色如何理解呐?具体请看效果对比图(左图为UI上传的图标样式,右边为我们使用这两种方式引入后不加任何样式的效果) 是不是很丑? 另外

    2024年02月09日
    浏览(81)
  • uni-app/vue 文字转语音朗读(附小程序语音识别和朗读)uniapp小程序使用文字转语音播报类似支付宝收款播报小程序语音识别和朗读)

    uni-app/vue 文字转语音朗读(小程序语音识别和朗读) 一、第一种方式:直接加语音包 固定的文本 先利用工具生成了 文本语音mp3文件,放入项目中,直接用就好了 这里用到的工具:知意配音 链接地址:https://peiyin.wozhiyi.com/newproduction.html 接下来,代码部分。 在min.js文件里加

    2024年02月07日
    浏览(60)
  • 【App端】uni-app使用百度地图api和echarts省市地图下钻

    近期的app项目中想加一个功能,展示全国各地的某一数据统计情况,想来想去,用echarts做地图数据可视化直观且美观。于是就去研究了如何使用,其实在移动端使用echarts地图踩的bug挺多的,总结如下。 JavaScript API GL账号和获取密钥 1、获取SHA1:Android平台云端打包 - 公共测试

    2024年02月11日
    浏览(46)
  • 使用vue2开发uni-app项目--引入uview-ui

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言 一、安装 1、安装uview-ui 2、安装scss支持 二、配置 1、在main.js中引入uView库 2、uni.scss文件中引入uView的全局SCSS主题文件  3、在APP.vue文件中引入uView基础样式 4、在pages.json中 配置easycom组件模式

    2024年02月04日
    浏览(63)
  • uni-app小程序实现音频播放,uniapp播放录音,uniapp简单实现播放录音

    复制到.vue文件即可预览效果 问题 :开发者工具中.onTimeUpdate方法可能会失效! 官方参考:https://uniapp.dcloud.net.cn/api/media/audio-context.html# 其他博客参考:https://blog.csdn.net/weixin_45328705/article/details/114091301 录音实现参考 :https://blog.csdn.net/weixin_43992507/article/details/129857780

    2024年02月12日
    浏览(73)
  • 【Uni-App】uniapp使用uview实现弹出键盘输入密码/验证码功能

    组件使用的是uview组件,Keyboard 键盘和MessageInput 验证码输入两个组件配合使用。 通过mode参数定义键盘的类型,v-model绑定一个值为布尔值的变量,我绑定的是showKeyboard变量,控制键盘的弹出与收起; mode = number (默认值)为数字键盘,此时顶部工具条中间的提示文字为\\\"数字键盘

    2023年04月16日
    浏览(66)
  • uniapp引入echarts

    作为前端在开发需求的时候经常会遇到将数据展示为图表的需求,之前一直用的HBuilder的图表插件uCharts,使用方法可以参考我的另一篇博客:uniapp 中使用图表(秋云uCharts图表组件) 但是最近发现uCharts很多功能都需要付费或者开通会员才能使用,对咱这些开发者很不友好,于

    2024年02月16日
    浏览(22)
  • 【uni-app项目如何引入 uView组件库】

    uView官方文档 第一步: 在公司创建完成uniapp项目后引入uView 第二步: 您如果是使用HBuilder X创建的uniapp项目,使用uView组件库的话需要在HBuilder X下载插件库 下载 uni_modules ,(如果这个看不懂可以看官方文档) (1) HBuilder X插件库中下载 uni_modules 现在是已经将 uView导入到项目中了

    2024年02月05日
    浏览(56)
  • uni-app引入地图map组件--APP开发

    需求场景:使用uni-app地图组件,实现APP开发 开发环境:Mac,HbuildX3.4.14 测试环境:iOS真机调试 一、流程 1、关于Uini-app的map组件:官方文档说明。map组件是原生组件,目前只针对原生APP开发,因此通过app-nvue实现,同时选择的地图服务商只能是高德地图。 2、创建高德地图应用

    2024年02月15日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包