uni-app微信小程序引用echarts，与pc端不同，如果直接下载echarts包，会导致小程序打包过大。直接上干货！！！
步骤一：下载插件
下载插件
- 将插件导入到项目中，项目中会生成一个js_sdk文件夹；
- 将文件夹下的uni-ec-canvas移动至components文件夹下
步骤二：引用
根据自己的文件引入
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from '@/components/uni-ec-canvas/echarts'
在echarts官网中找自己想要的图标使用即可，此处以柱状图为例
<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>
