uniapp app中使用柱状图 折线图 圆环图和饼图

实现思路

借助echarts.min.js 搭配l-echart进行配置

废话不多说上代码后自己百度了解配置项的意思就好

下面代码是折线图的 ,柱状图和它一摸一样,只需要把line换成bar就好

javascript 复制代码
<template>
  <l-echart ref="chart"></l-echart>
</template>
<script>
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min.js'
export default {
  props: {
		// 以下注释部分是从父组件传递过来的options 这仅仅是一个示例 可以很好的展示ui效果
    options: {
      type: Object,
      default: () => {
        return null
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  watch: {
    options: {
      handler(n) {
        if (n) {
          this.$nextTick(() => {
            this.initChart()
          })
        }
      },
      deep: true
    }
  },
  methods: {
    initChart() {
      const {
        labelX,
        data1,
        data2,
        legends,
        tipLegends,
        legendIcon,
        legendWidth,
        legendColor,
        gridLeft,
        gridRight,
        axisColor,
        splitColor,
        lineColor1,
        lineColor2,
        formatterAfterTextArr
        // labels
      } = this.options

      const series = [
        {
          type: 'line',
          name: (legends && legends[0].name) || tipLegends,
          data: data1,
          symbolSize: 6,
          smooth: true,
          areaStyle: {
            color: 'rgba(' + (lineColor1 || '60, 127, 252') + ', 0.2)'
          },
          lineStyle: {
            color: 'rgba(' + (lineColor1 || '60, 127, 252') + ', 1)'
          },
          itemStyle: {
            color: 'rgba(' + (lineColor1 || '60, 127, 252') + ', 1)'
          }
        }
      ]
      if (data2) {
        series.push({
          type: 'line',
          name: legends && legends[1].name,
          data: data2,
          symbolSize: 6,
          smooth: true,
          areaStyle: {
            color: 'rgba(' + (lineColor2 || '254, 189, 145') + ', 0.2)'
          },
          lineStyle: {
            color: 'rgba(' + (lineColor2 || '254, 189, 145') + ', 1)'
          },
          itemStyle: {
            color: 'rgba(' + (lineColor2 || '254, 189, 145') + ', 1)'
          }
        })
      }
      this.$refs.chart.init(echarts, (chart) => {
        this.chart = chart
        this.chart.setOption({
          animation: false,
          tooltip: {
            trigger: 'axis',
            // 使用mousemove时,左右滑动会导致图表消失
            triggerOn: 'click',
            formatter:
              formatterAfterTextArr && formatterAfterTextArr.length > 0
                ? function (params) {
                    // x轴文字
                    var result = params[0].axisValue + '\n'
                    params.forEach(function (item) {
                      /**
                       * marker:图例样式;
                       * seriesName:series中每一项的name;
                       * value:data数据中value字段
                       * formatterAfterTextArr: value之后需要补充的文字,数组格式
                       * seriesIndex: series数据索引,当有多条series数据时,会自动获取当前选中索引
                       */
                      result += `${item.marker}${item.seriesName}:${item.value}${formatterAfterTextArr[item.seriesIndex]}`
                    })
                    return result
                  }
                : null
          },
          legend: legends && {
						top: '5%', // 控制 板块控制器的位置
						right: 'center',
            data: legends,
            icon: legendIcon || 'roundRect',
            itemWidth: legendWidth || 14,
            itemHeight: 8,
            itemGap: 24, //设置两个legend之间的间距
            textStyle: {
              fontSize: 12,
              color: legendColor || '#69748A',
              padding: [3, 0, 0, 0],
              rich: {}
            }
          },
          grid: {
            left: gridLeft || '5%',
            top: legends ? '20%' : '10%',
            right: gridRight || '8%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false, // 两端空白
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                color: axisColor || '#333333',
                fontSize: 12,
								margin: 10
              },
              data: labelX || ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            }
          ],
          yAxis: [
            {
              type: 'value',
              minInterval: 1,
              axisTick: {
                show: false
              },
              axisLabel: {
                color: axisColor || '#333333',
                fontSize: 12,
								margin: 10
              },
              axisLine: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed',
									dashOffset: 20, // 设置虚线的起始偏移量
									gap: 20, // 设置虚线间的距离
                  color: [splitColor || '#ccc']
                },
              },
              splitArea: { show: false }
            }
          ],
          series: series
        })
      })
    }
  }
}
</script>

饼图和柱状图也基本一样 稍微改改就好,很简单。大家可以自己搜索,我这里放的是四个之中相对复杂的,也是摸索了一整子,下面附上效果图,希望能帮到大家。

相关推荐
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
尚学教辅学习资料11 小时前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie23411 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
RestCloud18 小时前
如何理解ETLCloud在iPaas中的关键角色
etl·数据可视化·数据集成·数据传输·ipaas·集成工具
qq229511650219 小时前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
AIoT科技物语1 天前
免费,基于React + ECharts 国产开源 IoT 物联网 Web 可视化数据大屏
前端·物联网·react.js·开源·echarts
橙某人1 天前
📊基于Vue对Echarts5进行基础封装-按需引入
前端·vue.js·echarts
qq22951165021 天前
微信小程序uniapp基于Android的流浪动物管理系统 70c3u
微信小程序·uni-app
qq22951165021 天前
微信小程序 uniapp+vue老年人身体监测系统 acyux
vue.js·微信小程序·uni-app
摇头的金丝猴2 天前
uniapp vue3 使用echarts-gl 绘画3d图表
前端·uni-app·echarts