背景
这几天写小程序需要用到echarts，又因为我用uni-app开发，因此研究了好久uni-app引用echarts，遇到了也最终解决了好多bug，我感觉大家应该在使用的时候应该都会遇到，因此专门来写一篇博客，希望可以给大家提供一点帮助！！
第一次写，保证超详细！！！
正文
一、uni-app引用echarts
原生开发和uni-app开发需要引用的echarts不同，我们着重讲uni-app开发，原生的大家另行研究吧。
首先，要去下载插件（用hbuilder编辑器下载特别方便）
echarts-for-wx - DCloud 插件市场
使用HBuilder导入之后，会生成一个js_sdk目录
其次，只需要将js_sdk下的uni-ec-canvas目录复制到components目录下面就成功引入了
之后，在pages中建立页面并复制如下代码就可以展示图表了
（我这里建立的是test）
<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>
// 这里一定要注意 设置该组件宽高 以及display:block来确保canvas初始化的时候是有宽高的
<style>
.uni-ec-canvas {
width: 100%;
height: 500rpx;
display: block;
margin-top: 30rpx;
}
</style>运行到开发者工具就可以看到了（记得在pages.json中设置启动页）
如下是运行页面
二、解决echarts.js文件过大的问题
首先，要去echarts官网自定义构建并下载文件ECharts 在线构建 (apache.org)
下载的是echarts.min.js文件
其次就是替换文件了
将项目中的echarts.js替换成echarts.min.js文件
并修改导入的文件
有两个文件要修改
一是uni-ec-canvas.vue，二是我们建立的test.vue
将echarts.js修改成echarts.min.js
修改完之后大家肯定会发现，为啥报错了！！
别急，下面我们接着来
我们打开echarts.min.js
搜索字符串 t.addEventListener
搜索到之后，在 t.addEventListener后面添加 ?.
保存编译之后就好啦！
但是！！！！！！
大伙有时候会出现，即便我们使用了echarts.min.js，编译时压缩js脚本，主包还是太大了！！！
这时候就得发行代码了。。。
之后选择微信小程序发行就可以了
如果还是不行！！！
那我们就得用最后一招了！！！
分包！！！！
马上到凌晨两点了。。。有空再更吧。。。
可移步查看我在小程序中的应用文章来源：https://www.toymoban.com/news/detail-495867.html
记账小程序 微信小程序 源码 uniapp vue3_没糖de药房的博客-CSDN博客文章来源地址https://www.toymoban.com/news/detail-495867.html
到了这里，关于uni-app使用echarts并解决echarts文件过大的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
