echarts踩坑记录

最新推荐文章于 2024-04-01 14:30:29 发布

念念ovo

最新推荐文章于 2024-04-01 14:30:29 发布

阅读量299

点赞数

文章标签： vue echarts

本文链接：https://blog.csdn.net/weixin_52827704/article/details/116049057

版权

1.一个日期对应多个数据时，需要用到阶梯折线图

把x轴的数据设为相同，y轴数据不同即可
在这里插入图片描述

从后台请求到的数据：
在这里插入图片描述
处理后的数据：

渲染echarts代码

    initSentenceChart() {
      let sentenceChart = this.$echarts.init(this.$refs.sentenceTrends)
      sentenceChart.setOption({
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['读课文', '背课文'],
          left: 10,
        },
        color: ['#22CED4', '#FFC069'],
        xAxis: {
          type: 'category',
        },

        yAxis: {
          min: 0, //y轴的最小值
          type: 'value',
          axisLine: {
              show: true,
              lineStyle: {
                color: '#808080',
              },
            },
        },
        series: [
          {
            name: '读课文',
            data: this.checkSentenceData,
            type: 'line',
          },
          {
            name: '背课文',
            data: this.checkSentenceData1,
            type: 'line',
          },
        ],
      })
    },

最终展示：
在这里插入图片描述

2.设置平均值的坑

平均值是后台给的不能自己根据图表数值进行计算
echarts有一个markLine 可以定义average 平均值但是是根据每一个数据来显示的平均值对应的有series中的每条数据
在这里插入图片描述
但是项目需求不能根据某个数据来计算平均值要用后端返回的值，所以还是要改。
请求到的数据：

然后！就只能在自己在series里面单独写一个数据当做是平均值
还要自定义平均值线后面的文字
使用formatter 自定义
代码如下

        {
                name: '总计',
                type: 'line',  // 平均值
                data:[this.average2,this.average2,this.average2,this.average2,
                this.average2,this.average2,this.average2,this.average2,
                this.average2,this.average2,this.average2,this.average2,],
                itemStyle: {
                    opacity: 0
                },
                lineStyle: {
                    opacity: 0
                },
                smooth:true,
                markLine: {
                  lineStyle: {
                        type: 'solid', 
                    },
                    data: [
                        {
                            type: 'average',
                            //yAxis: this.average2,
                            name: '平均数',
                            label: {
                                normal: {
                                    // position: 'end',
                                    formatter: function(params){
                                       return '平均值:' +params.value  
                                       } 
                                }
                            }
                        }
                    ]
                }
            }

最终展示为：
在这里插入图片描述