uniapp中使用echarts在一页中摆放多个图表
开发项目的移动端,运用uniapp+echarts,一开始查了很多资料,很多推荐用ucharts,但是运用了后感觉ucharts不如echarts多样,而且web端选择也是echarts,所以还是回归了;很多还显示echarts只能在一页显示一张图,给出了解决办法,但是尝试了达不到效果;最终,运用封装组件的方法完成设计。
例如:/pages/index包下
创建components包用来放我们的图表的局部组件,echarts相关的全局组件自行下载即可。
如:饼图-piechart
<!--
* @FileDescription: 饼图
* @Author: 我在吃大西瓜呢
* @Date: 2022.08.11
-->
<template>
<view :class="className" :style="{height:height,width:width}" />
</template>
<script>
import * as echarts from 'echarts'
export default {
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '450rpx'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el)
this.chart.setOption({
// 饼图配色
color: [
'#78E65B',
'#FD8B7C'
],
// 提示框
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}'
},
// 图例
legend: {
padding: [10,50,10,0],
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: 'white',
fontSize: '12'
}
},
// 系列
series: [
{
name: '能量',
type: 'pie',
//设置图表大小位置
radius: ['20%', '70%'],
center: ['50%', '60%'],
roseType: 'radius',
// 图形的文字标签
label: {
fontSize: 10
},
// 链接图形和文字的线条
labelLine: {
// length 链接图形的线条
length: 6,
// length2 链接文字的线条
length2: 8
},
data: [
{ value: 20, name: 'A)' },
{ value: 26, name: 'B' }
]
}
]
})
}
}
}
</script>
如:柱状图-barchart
<!--
* @FileDescription: 竖柱状图
* @Author: 我在吃大西瓜呢
* @Date: 2022.08.11
-->
<template>
<view :class="className" :style="{height:height,width:width}" />
</template>
<script>
import * as echarts from 'echarts'
export default {
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '450rpx'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el)
this.chart.setOption({
// 提示框
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
// 直角坐标系底板
grid: {
left: '5%',
top: '30px',
right: '5%',
bottom: '5%',
containLabel: true
},
// 设置x轴
xAxis: [
{
type: 'category',
data: [
'A',
'B'
],
axisTick: {
alignWithLabel: true
},
axisLabel: {
color: 'white',
fontSize: '12'
},
axisLine: {
show: false
}
}
],
// 设置y轴
yAxis: [
{
type: 'value',
min: 0,
max: 100,
axisLabel: {
color: 'white',
fontSize: 12
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)',
width: 2
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
}
}
],
// 系列
series: [
{
name: '能量',
type: 'bar',
barWidth: '35%',
data: [50, 80],
itemStyle: {
normal: {
// 设置柱子颜色
color: function(params) {
var colorList = ['#9AEF88', '#C76489']
return colorList[params.dataIndex]
},
// 修改柱子圆角
barBorderRadius: 5
}
}
}
]
})
}
}
}
</script>
在index.vue页面中
<template>
<view class="viewimg">
<!--下面用到了colorUI组件,自行导入即可-->
<!--柱状图-->
<view class="cu-bar bg-white">
<view class="action sub-title">
<text class="text-xl text-bold text-blue text-shadow">柱状图</text>
<text class="text-ABC text-blue">BarChart</text>
</view>
</view>
<view class="content" style="height: 250px;">
<vertical-bar-chart></vertical-bar-chart>
</view>
<!--饼图-->
<view class="cu-bar bg-white">
<view class="action sub-title">
<text class="text-xl text-bold text-blue text-shadow">饼图</text>
<text class="text-ABC text-blue">PieChart</text>
</view>
</view>
<view class="content" style="height: 250px;">
<pie-chart></pie-chart>
</view>
</view>
</template>
<script>
import PieChart from './components/PieChart.vue'
import BarChart from './components/BarChart.vue'
export default {
components: {
PieChart,
BarChart
},
onLoad() {},
methods: {}
}
</script>
<style>
.viewimg {
height: 100%;
background-image: linear-gradient(to right , #081446, #0A2BAD);
}
</style>
以此类推,这样就可以展示多个图表在同一页中啦~