uniapp小程序echarts插件----秋云 ucharts echarts 高性能跨全端图表组件
首先下载地址如下秋云 ucharts echarts 高性能跨全端图表组件,如果是用uni_modules的形式引入的话,可以在页面上直接使用,不用再import引入,下面是一个示例,切记此插件和scroll-view不可以同时使用,不然会出现图表随滚动条滚动的情况
<template>
<view style="height:300px">
<qiun-data-charts style="height:100%" type="column" :loadingType="0" :eopts="columneopts" :opts="options"
:chartData=" chartsDataColumn1" :echartsH5="true" :echartsApp="true" @complete="complete" />
</view>
</template>
<script>
export default {
data() {
return {
columneopts: {
xAxis: {
axisLabel: {
color: '#666666'
}
},
seriesTemplate: {
itemStyle: {
normal: {
barBorderRadius: [30, 30, 0, 0]
},
},
barMaxWidth: 20
},
grid: {
left: 10,
right: 10
},
},
options: {
yAxis: {
show: false
},
legend: {
show: false
},
radiusAxis: {
nameTextStyle: {
barBorderRadius: [20, 20, 0, 0],
}
},
extra: {
column: {
"width": 20,
barBorderRadius: [30, 30, 0, 0]
},
bar: {
linearType: 'custom',
barBorderCircle: true
}
},
seriesTemplate: {
itemStyle: {
normal: {
barBorderRadius: "[30, 30, 0, 0]"
}
}
}
},
chartsDataColumn1: {},
}
},
onLoad() {
this.getEcharts()
},
methods:{
complete(e) {
console.log("渲染完成事件", e);
},
getEcharts() {
this.chartsDataColumn1.series = [];
this.chartsDataColumn1 = {
categories: ["专属粉丝", "普通粉丝", "潜在粉丝"],
series: [{
name: "粉丝数量",
data: [34, 12, 1],
color: '#FF7979',
style: "curve"
}],
}
}
},
}
</script>