uniapp中使用echarts在一页中摆放多个图表

本文主要是介绍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>

以此类推，这样就可以展示多个图表在同一页中啦~

这篇关于uniapp中使用echarts在一页中摆放多个图表的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！