折线图实现数据预测功能

需求梳理

功能点:

• 实现当前数据与预测数据对比
• 实现y轴最小值动态赋值
• 解决数据刷新重新绘制
• tooltip自定义
• 预测数据如何设置
• 实现容器自适应

代码实现

js代码

 let linesOption = {
            title: {
                text: '折线图堆叠'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params, ticket, callback) { // tooltip自定义处理
                        var htmlStr = '';
                        var valMap = {};
                        for(var i=0;i';//x轴的名称
                            }
                            htmlStr +='
';
                            //为了保证和原来的效果一样，这里自己实现了一个点的效果
                            htmlStr += '';

                            //圆点后面显示的文本
                            if(xName == "预估"){
                                htmlStr += '预估'+seriesName + '：' + value;
                            }else{
                                htmlStr += seriesName + '：' + value;
                            }

                            htmlStr += '
';
                            valMap[seriesName] = value;
                        }
                        console.log(htmlStr)
                        return htmlStr;
                    }
            },
            legend: {
                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value',
                min:Math.min(...list)
            },
            series: [
                {
                    name: '邮件营销',
                    type: 'line',
                    data: [120, 132, 101, 134, 90, 230, 210],
                    symbol:'circle',
                    symbolSize:8,
                },
                {
                    name: '联盟广告',
                    type: 'line',
                    data: [220, 182, 191, 234, 290, 330, 310],
                    symbol:'circle',
                    symbolSize:8,
                },
                {
                    name: '视频广告',
                    type: 'line',
                    data: [150, 232, 201, 154, 190, 330, 410],
                    symbol:'circle',
                    symbolSize:8,
                },
                {
                    name: '直接访问',
                    type: 'line',
                    data: [320, 332, 301, 334, 390, 330, 320],
                    symbol:'circle',
                    symbolSize:8,
                },
                {
                    name: '搜索引擎',
                    type: 'line',
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    symbol:'circle',
                    symbolSize:8,
                },
                 {
                    name: '邮件营销',
                    type: 'line',
                    data: ['-', '-', '-', '-', '-', '-', 210,350],
                    symbol:'circle',
                    symbolSize:8,
                    lineStyle:{
                        normal:{
                            type:'dotted'
                        }
                    }
                },
                {
                    name: '联盟广告',
                    type: 'line',
                    data: ['-', '-', '-', '-', '-', '-', 310,600],
                    symbol:'circle',
                    lineStyle:{
                        normal:{
                            type:'dotted'
                        }
                    }
                },
                {
                    name: '视频广告',
                    type: 'line',
                    data: ['-', '-', '-', '-', '-', '-', 410,100],
                    symbol:'circle',
                    symbolSize:8,
                    lineStyle:{
                        normal:{
                            type:'dotted'
                        }
                    }
                },
                {
                    name: '直接访问',
                    type: 'line',
                    data: ['-', '-', '-', '-', '-', '-', 320,203],
                    symbol:'circle',
                    symbolSize:8,
                    lineStyle:{
                        normal:{
                            type:'dotted'
                        }
                    }
                },
                {
                    name: '搜索引擎',
                    type: 'line',
                    data: ['-', '-', '-', '-', '-', '-', 1320,450],
                    symbol:'circle',
                    symbolSize:8,
                    lineStyle:{
                        normal:{
                            type:'dotted'
                        }
                    }

                }
            ]
        };
        this.linesOptionChart = this.$echarts.init(this.$refs.linesOptionChart) // 图标数据初始化
        this.linesOptionChart.setOption(linesOption,true)// true表示页面数据变更  页面重新绘制

html实现

自适应实现

data(){
  return {
      linesOptionChart:null
  }
},
mouned(){

     window.addEventListener("resize", () => {
            // 如果有多个echarts，就在这里执行多个echarts实例的resize方法,不过一般要做组件化开发，即一个.vue文件只会放置一个echarts实例
            this.linesOptionChart.resize()
        });
},
methods(){
    this.linesOptionChart= .....// 此处接文章顶部js处理代码  调用接口赋值
},
beforeDestroy() {
        /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
        容易导致内存泄漏和额外CPU或GPU占用哦*/
        window.removeEventListener("resize", () => {\
            this.linesOptionChart.resize()
        });
    },

效果

效果图

实现y轴最小值动态赋值

实现思路:

循环遍历 series数组中的data 使用Math.min(...data) 放入预先定义的数组list中 最终获取list中的最小值 即为所有折线数据中的最小值

  let list =[]
  series.map(item=>{
      if(item.data.indexOf('-')>-1){
              let dataList = []
              item.data.find('-').length&&(item.data(val=>{
             if(val==='-'){
                 dataList.push(0)
              }else{
                dataList.push(val)
              }
          }))
           list.push(Math.min(...dataList))
      }else{
           list.push(Math.min(...item.data) )
       }
  })

.....
 yAxis: {
      type: 'value',
      min:Math.min(...list)
 },