uniapp微信小程序使用echarts
uni组件中无法引入uni-ec-canvas,或者引入uni-ec-canvas后也没有此依赖包,此时我们可以写组件来引用渲染。
1、引入组件
在pages.json中引入该组件
"usingComponents": {
"ec-canvas": "../../components/ec-canvas/ec-canvas"
},
在要使用echarts图的页面引入组件
详细代码如下
<template>
<view class="body">
<u-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec">
</u-ec-canvas>
</view>
</template>
<script>
import uEcCanvas from '../components/uni-ec-canvas/test-ec.vue'
import * as echarts from '../components/uni-ec-canvas/echarts.js'
let chart = null
export default {
components: {
uEcCanvas
},
mounted() {
this.getData()
},
onUnload() {
echarts.dispose(this.$refs.canvas);
},
methods: {
initChart(canvas, width, height, canvasDpr) {
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: canvasDpr,
resize: true
})
let option = {
xAxis: {
type: 'category',
data: this.xdata,
axisLabel: {
rotate: -45, // 设置 x 轴标签旋转角度为 -45 度
}
},
yAxis: [
{
type: 'value',
name: "℃",
// min: 10
},
{
type: 'value',
name: "湿度",
}
],
series: [
{
name: "温度",
data: this.ydata,
type: 'line',
smooth: true,
itemStyle: {
normal: {
color: "#00aaff"
}
},
areaStyle: {
color: 'rgba(0, 170, 255, 0.2)'
}
},
{
name: "湿度",
data: this.y2data,
type: 'line',
smooth: true,
itemStyle: {
normal: {
color: "#ff0000" // 设置第二条线的颜色
}
},
areaStyle: {
color: 'rgba(255, 0, 0, 0.2)' // 设置第二条线的区域颜色
},
yAxisIndex: 1 // 将第二条线的 y 轴设置为右边的 y 轴
}
],
legend: {
data: ['温度', '湿度'] // 设置图例名称
},
tooltip: {
trigger: 'axis', // 设置触发类型为坐标轴触发
// axisPointer: {
// type: 'cross' // 设置指示器类型为十字准星
// },
showContent: true, // 显示 Tooltip 内容
showDelay: 0, // 鼠标移入后立即显示
hideDelay: 0, // 鼠标移出后立即隐藏
triggerOn: 'click', // 设置触发方式为点击
hideOn: 'mouseout', // 鼠标移出时隐藏 Tooltip
formatter: function(params) {
return `时间: ${params[0].name}
${params[0].seriesName}: ${params[0].value}
${params[1].seriesName}: ${params[1].value}`
}
},
dataZoom: [
{
type: 'slider',
show: true,
start: 0,
end: 10 / this.xdata.length * 100, // 默认显示最后10条数据
handleSize: 8,
height: 2,
top: '90%'
},
{
type: 'inside',
start: 0,
end: 10 / this.xdata.length * 100, // 默认显示最后10条数据
height: 2
}
]
}
canvas.setChart(chart)
chart.setOption(option)
return chart
},
}
2、echarts.js包太大,小程序不能上传
echarts的包太大,我们可以在echarts的构建工具中选择自己需要的吗,模版工具进行打包
下载后替换文件中的echarts.js文件,并将自己下载的文件替换成echarts.js文件名,否则引入会找不到文件。
3、上传代码时,包还是太大,怎么解决
如果到最后,包文件超过2M,无法上传
我们可以尝试:
1.分包
2.静态文件,例如图片等,使用网络地址
3.在上传代码时,勾选“自动压缩脚本文件”