github地址:https://github.com/yah0130/echarts-wx-uniapp
插件地址:echarts-for-wx - DCloud 插件市场
具体流程参考github或者插件文档
效果图
主要代码:
<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 '@/pagesIndex/components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from '@/pagesIndex/components/uni-ec-canvas/echarts'
let chart = null
export default {
components: {
uniEcCanvas
},
data() {
return {
ec: {
lazyLoad: true
},
option: {
legend: {
top: '0%',
left: 'center',
itemWidth: uni.upx2px(16), // 图例标记的图形宽度。
itemHeight: uni.upx2px(16), // 图例标记的图形高度。
itemGap: uni.upx2px(22), // 图例每项之间的间隔。
textStyle: {
color: "#000", // 文字的颜色。
fontFamily: "sans-serif", // 文字的字体系列。
fontSize: uni.upx2px(12), // 文字的字体大小。
lineHeight: uni.upx2px(0), // 行高。
},
},
//柱子颜色设置
color: ['#78ce5e', '#fffd5e', '#F88421', '#42B1FF', '#FF5C50', '#B424D5', '#B89775', '#7D4E44',
'#60AACD', '#97D6F4', '#3E6374', '#812890', '#E66520', '#D2D117', '#60594D', '#FF2C51',
'#24C91D'
],
series: [{
name: 'Access From',
type: 'pie',
// radius: '70%',
radius: ['30%', '65%'],
avoidLabelOverlap: false,
data: [
{ value: 1048, name: '10.80%' },
{ value: 735, name: '20.80%' },
{ value: 580, name: '5.80%' },
{ value: 1048, name: '30.80%' },
{ value: 735, name: '40.80%' },
{ value: 580, name: '50.80%' },
{ value: 1048, name: '60.80%' },
{ value: 735, name: '70.80%' },
{ value: 580, name: '80.90%' },
{ value: 1048, name: '10.90%' },
{ value: 735, name: '20.89%' },
{ value: 580, name: '5.90%' },
{ value: 1048, name: '30.90%' },
{ value: 735, name: '40.90%' },
{ value: 580, name: '50.90%' },
{ value: 1048, name: '60.90%' },
],
label: {
align: 'center',
normal: {
formatter: '{c}万',
// position:'inner', //标签的位置
color: '#000',
textStyle: {
fontSize: uni.upx2px(10),
},
},
},
labelLine: {
normal: {
length: 5,
length2: 6
},
}
}]
}
}
},
onLoad() {
this.$nextTick(() => {
this.$refs.canvas.init(this.initChart)
})
},
methods: {
initChart(canvas, width, height, canvasDpr) {
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: canvasDpr
})
canvas.setChart(chart)
chart.setOption(this.option)
console.log('setOption')
return chart
},
}
}
</script>
<style lang="scss">
.uni-ec-canvas {
width: 50%;
height: 500rpx;
display: block;
}
</style>