The uni-app WeChat applet refers to echarts, which is different from the PC version. If you download the echarts package directly, the applet package will be too large. Go straight to the real stuff! ! !
Step 1: Download the plugin
- Import the plug-in into the project, and a js_sdk folder will be generated in the project;
- Move the uni-ec-canvas under the folder to the components folder
Step 2: Quote
Import according to your own files
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from '@/components/uni-ec-canvas/echarts'
Just find the icon you want on the echarts official website and use it. Here we take the histogram as an example.
<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>