uniapp中的echarts展示尖峰平谷

最新推荐文章于 2024-08-29 17:53:35 发布

码畜小仙女

最新推荐文章于 2024-08-29 17:53:35 发布

阅读量456

点赞数 8

文章标签： uni-app 前端

本文链接：https://blog.csdn.net/qq_42549017/article/details/136718014

版权

本文介绍了如何在UniApp中使用Echarts库创建图表，并添加markArea功能来区分充电量和放电量的数据区域。开发者分享了如何导入依赖、配置图表选项和处理数据以实现自定义标记区域。

摘要由CSDN通过智能技术生成

先放个图看看是不是你们要的效果，之前我们在uniapp中的图全部是用的秋云，以至于遇到这种需求时，两眼茫然，秋云是没有markArea属性的，所以没法做，如果有人用秋云做出来了，欢迎评论。。。

首先就是导入echarts

1.在uniapp中插入echarts

2.下载依赖包 npm install echarts

3.组件中引入import * as echarts from 'echarts'

然后就是展示图，代码如下

 <l-echart ref="fengRef" style="width: 100%;height: 100%;" @finished="chartsInit"></l-echart>


<script>
    import * as echarts from 'echarts'；
    export default {
       data() {
          return {
            optsArea: {
                color: ['#04c2af'],
                padding: [40, 30, 20, 20],
                // rotate: true,
                dataLabel: false, //是否显示数据文案  true表示显示，false表示不显示
                dataPointShape: true, //是否显示数据点数据图表
                dataPointShapeType: 'solid', //图形标识点显示类型 solid实心 hollow空心
                legend: {
                   bottom: '6%',
                },
                tooltip: {
                   trigger: 'axis',
                   axisPointer: {
                      type: 'shadow'
                   },
                   formatter: '{a}  {b}：{c0}kWh',
                   itemStyle: {
                       color: 'black'
                   }
                },
                xAxis: {
                   type: "category",
                   disableGrid: true,
                   boundaryGap: 'justify',
                   labelCount: 5,
                   data: [],
                },
                yAxis: {
                   gridType: "dash",
                   dashLength: 2,
                   showTitle: true,
                },
                extra: {
                   interval: true,
                   column: {
                      type: "group",
                      width: 10,
                      activeBgColor: "#000000",
                      activeBgOpacity: 0.08
                   },
               
                },
                series: [
                   {
                      name: '充电量',
                      data: [120, 200, 150, 80, 70, 110, 130],
                      type: "line",
                      color: '#1D73E6',
                      // 添加markArea组件
                      markArea: {
                         // 设置markArea的样式
                         itemStyle: {
                            color: "rgba(255, 173, 177, 0.4)",
                         },
                         // 设置markArea的范围，可以是具体的值或百分比
                         data: [
                            [
                                {
                                   name: "Area A",
                                   xAxis: "A",
                                },
                                {
                                   xAxis: "C",
                                },
                            ],
                            [
                                {
                                   name: "Area B",
                                   xAxis: "E",
                                },
                                {
                                    xAxis: "G",
                                },
                            ],
                         ],
                      },
                   },
                   {
                      name: '放电量',
                      data: [120, 200, 150, 80, 70, 110, 130],
                      type: "line",
                      color: '#04c2af',
                      // 添加markArea组件
                      markArea: {
                         // 设置markArea的样式
                         itemStyle: {
                            color: "rgba(255, 173, 177, 0.4)",
                         },
                         // 设置markArea的范围，可以是具体的值或百分比
                         data: [
                            [
                                {
                                   name: "Area A",
                                   xAxis: "A",
                                },
                                {
                                   xAxis: "C",
                                },
                            ],
                            [
                                {
                                   name: "Area B",
                                   xAxis: "E",
                                },
                                {
                                    xAxis: "G",
                                },
                            ],
                         ],
                      },
                   },
               },
            ],
         },
    methods: {
      async chartsInit() {
         // chart 图表实例不能存在data里
         const chart = await this.$refs.fengRef.init(echarts);
         chart.setOption(this.optsArea);
    },

数据处理

const pfvList = this.sameValueConcat(res);
            const markAreaList = [];
            const pfvListLen = pfvList.length - 1;
            pfvList.forEach((it, i) => {
               markAreaList.push([
                  {
                     name: it.name,
                     xAxis: moment(it.children[0].dateTime).format('HH:mm'),
                  },
                  {
                     xAxis:
                        pfvListLen == i
                           ? moment(
                              it.children[it.children.length - 1].dateTime,
                           ).format('HH:mm')
                           : moment(
                              it.children[it.children.length - 1].dateTime,
                           )
                              .add(60, 'minutes')
                              .format('HH:mm'),
                  },
               ]);
            });
            this.optsArea.series.forEach((it) => {
               it.markArea = {
                  silent: true,
                  itemStyle: {
                     normal: {
                        opctity: 0.3,
                        borderWidth: 2,
                        borderColor: '#D6DCEF',
                        borderType: 'dashed',
                        color: 'transparent',
                     },
                  },
                  label: {
                     color: '#657797',
                  },

                  data: [...markAreaList],
                  z: 0,
               };
            });


sameValueConcat(data) {
         const result = [];
         let children = [];
         let start = true;

         for(let i = 0; i < data.length; i++) {
            if(start) {
               children.push(data[i]);
               start = false;
            }

            if(data[i].pfvType != data[i + 1]?.pfvType) {
               children.push(data[i]);
               result.push({
                  name: data[i].pfvType,
                  children,
               });
               children = [];
               start = true;
            }
         }

         return result;
      },