Echarts--动态设置图例和数据(折线)

最新推荐文章于 2023-10-09 15:00:46 发布

深海有鱼呀

最新推荐文章于 2023-10-09 15:00:46 发布

阅读量2.4k

点赞数 1

分类专栏：可视化

本文链接：https://blog.csdn.net/weixin_42069147/article/details/102924840

版权

可视化专栏收录该内容

17 篇文章 0 订阅

订阅专栏

折线图（初次写法）

window.JQ("#information").css('width',window.JQ("#header").width())
        this.myChart5 = window.Echarts.init(document.getElementById('information'));
        let time=this.timelist
        let data1=this.in1
        let data2=this.in2
        let data3=this.in3
        let data4=this.in4
        let data5=this.in5
        let data6=this.in6

        this.myChart5.setOption( {
            tooltip: {
                trigger: 'axis',
                formatter: function(data){
                    // console.log(data)
                    var str=''
                    for(var i=0;i<data.length;i++){
                        str+=data[i].seriesName+"："+data[i].value+'%'+'</br>'
                    }
                      return str     
               }
            },
            legend: {
                     icon: "circle",  
                     left:'center',
                     itemGap:15,
                     itemWidth:8,                               //图例标记的图形宽度
                     itemHeight:8,
            },
            color: ['#1890FF','#2FC25B','#37CCCC','#FBD438','#F3647C','#C95FF2'],   
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data:   ['11211','44444','4545'],// time,
                nameTextStyle:{
                         color: '#000000'
                     },
                     axisLine:{                 
                            show:true,           
                            onZero:true,           
                            lineStyle:{
                                color:'#BFBFBF'
                            }
                    },
            },
             yAxis: {
                type: 'value',
                splitLine:{                 //坐标轴在 grid 区域中的分隔线。
                    show:true,
                    lineStyle:{
                     type:'dashed'
                    }
                },
                axisLine:{                
                        show:false
                    },
                 axisTick :{
                        show:false
                    },
                axisLabel: {
                    show: true,
                    interval: 'auto',
                    formatter: '{value}%'
                },
                show: true
            },
            series: [
                {
                    name:'头部数据',
                    type:'line',
                    stack: '占比1',
                    symbolSize: 8,//拐点大小  
                    data: data1,
                    lineStyle:{ 
                    color:'#1890FF' //改变折线颜色
                    } 
                },
                {
                    name:'Top',
                    type:'line',
                    stack: '占比2',
                    symbolSize: 8,//拐点大小   
                    data:data2,
                    lineStyle:{ 
                    color:'#2FC25B' //改变折线颜色
                    } 
                },
                {
                    name:'second',
                    type:'line',
                    stack: '占比3',
                    symbolSize: 8,//拐点大小   
                    data:data3,
                    lineStyle:{ 
                    color:'#37CCCC' //改变折线颜色
                    } 
                },
                {
                    name:'Third',
                    type:'line',
                    stack: '占比4',
                    symbolSize: 8,//拐点大小  
                    data:data4,
                    lineStyle:{ 
                    color:'#FBD438' //改变折线颜色
                    } 
                },
                 {
                    name:'forth',
                    type:'line',
                    stack: '占比5',
                    symbolSize: 8,//拐点大小  
                    data:data5,
                    lineStyle:{ 
                    color:'##F3647C' //改变折线颜色
                    } 
                },
                 {
                    name:'我的数据',
                    type:'line',
                    stack: '占比6',
                    symbolSize: 8,//拐点大小    
                    data:data6,
                    lineStyle:{ 
                    color:'#C95FF2' //改变折线颜色
                    } 
                }
            ]
        })

重点：legend里的data和selected

lineChartData: {
          color:['rgba(84,127,229,1)','rgba(54,195,155,1)','rgba(167,140,222,1)','rgba(38,198,217,1)','rgba(238,110,115,1)','rgba(254,178,116,1)'],
          title: {
            text: ' '
          },
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(255,255,255,0.7)',
            padding: 0,
            extraCssText: 'box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);',
            formatter: function (param) {
              return newlineTip(param);
            },
          },
          legend: {
            icon: 'pin',
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 68,
            bottom: 30,
            itemGap: 68,
            // top: '252px'
            data: ['次日留存率', '3日留存率'],
            selected:{
              '次日留存率':true,
              '3日留存率':true,
              '7日留存率':false
            },
          },
          grid: {
            height: '230px',
            left: '50px',
            right: '50px',
            top: '40px',
            // bottom: '15%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#333'
              }
            },
          },
          yAxis: {
            type: 'value',
            axisTick: {
              length: 10
            },
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#333'
              },
              formatter: '{value}%'
            },
            splitLine: { // 坐标轴在 grid 区域中的分隔线。
              lineStyle: {
                type: '',
                color: '#eae9e9'
              }
            },
          },
          series: [
            {
              name: '',
              type: 'line',
              stack: '总量',
              data: [],
              smooth: true,
              smoothMonotone: 'x',
              areaStyle: {
                normal: {
                  color: {
                    type: 'dotted',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{

                      offset: 0, color: 'rgba(84,127,229,0.5)' // 0% 处的颜色
                    }, {
                      offset: 1, color: 'rgba(84,127,229,0.1)' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  },
                }
              },
            }
          ]
        }

// 下拉多选

<div class="multipleSel">
                    <el-select
                      v-model="value6"
                      multiple
                      @change="change1"
                      @remove-tag = "selRemove1"
                      :multiple-limit='mul'
                    >
                      <el-option
                        v-for="item in multipleSel"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="disabled5"
                      >
                      </el-option>
                    </el-select>
</div>


 value6: ['次日留存率','3日留存率'],
        multipleSel: [
          {
            label:'次日留存率',
            value: '次日留存率'
          },
          {
            label:'3日留存率',
            value: '3日留存率'
          },
          {
            label:'7日留存率',
            value: '7日留存率'
          }
        ],
        disabled5:false,




 //移除
      selRemove1(ag){
        // ag.value  移除的值
        // console.log(ag.value)
        let chartDisdata = this.lineChartData.legend.data;   // ['次日留存', '3日留存']
        let chartSel = this.lineChartData.legend.selected; 
          /* {
                '次日留存':true,
                '3日留存':true,
                '7日留存':false
              }
          */
        // 移除图例
        for(var i =0;i<chartDisdata.length;i++){
            if(ag.value == chartDisdata[i]){
              // console.log(chartDisdata[i])
              this.lineChartData.legend.data.splice(i,1)
            }
          }
        // 改变图表selected状态
          for(var k in chartSel){
            if(ag.value == k){
              this.lineChartData.legend.selected[k] = false;
            }
          }
        // console.log(ag)
        this.drawLine1()
      },
      //下拉菜单 - 多选事件
      change1(ag){
        // console.log(ag)
        if( ag.length == this.selectLength){
          this.disabled5 = true;
        }else {
          this.disabled5 = false;
        }

        // 添加图例
        this.value6 = ag;
        this.lineChartData.legend.data = this.value6;

        let chartDisdata = this.lineChartData.legend.data;   // ['次日留存', '3日留存']
        let chartSel = this.lineChartData.legend.selected; 
         /* {
              '次日留存':true,
              '3日留存':true,
              '7日留存':false
            }
        */
       for(var k in chartSel){
          for(var i =0;i<chartDisdata.length;i++){
            if(chartDisdata[i] == k){
              this.lineChartData.legend.selected[k] = true
            }
          }
        }
        this.drawLine1()
      },

发请求拿数据


// 新增留存图表
      get_first_chart(val1,val2){
        var _this = this;
        _this.loading = true;
        // var url = '/Main/action/App_overview/Retain/retain_chart';
        var url = 'upgrade/api/retain_chart';
        var date = '' ;
        if( this.elBtnNum >= 0 ){
          date = this.elBtnNum + 2;
        }else{
          date = this.copy_timeData;
        }


        if (!!!val1 || val1 == 'default' || !!!val2 || val2 == 'default'){
          val1 = val2 = 'default';
          _this.source_key = _this.source_value = 'default';
        }
        var body = {
          date:date,
          type:1,
          source_key: val1,
          source_value: val2,
        };

        function successCallback(res) {
          _this.loading = false;
          // var res = JSON.parse(res)
          // console.log(res);
          if( res.code == 200 ){    
            res.data.series.forEach(item => {
                
                if(item.name==1){
                    item.name='次日留存率'
                }else if(item.name==3){
                    item.name='3日留存率'
                }else if(item.name==7){
                    item.name='7日留存率'
                }

            });
            // _this.echartsdata=res.data
            // res.data.series.forEach((item,index) => {
            //     if(item.name=='7日留存'){
            //       res.data.series.splice(index,1)
            //     }
                
            // });




            let matDate = '';
            matDate = postForMatDate(res.date)
            _this.timeData = changeTimeExtend(matDate);
            // _this.overview = res.data.pool;
            var arr = [];
            for( var k in res.data.series){
              arr[k] = {
                name:  res.data.series[k]['name'] ,
                type: 'line',
                data: res.data.series[k]['data'],
                smooth: true,
                smoothMonotone: 'x',
                areaStyle: {
                  normal: {
                    color: {
                      type: 'dotted',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                        offset: 0, color: 'rgba(84,127,229,0.5)' // 0% 处的颜色
                      }, {
                        offset: 1, color: 'rgba(84,127,229,0.1)' // 100% 处的颜色
                      }],
                      globalCoord: false // 缺省为 false
                    },
                  }
                }
              };
            }
            // // console.log.log(arr);

            _this.lineChartData['series'] = arr;
            // _this.lineChartData.series.legend.data = res.data.series.name;
            // // console.log.log(res.data.series[0]['name']);
            _this.lineChartData['xAxis']['data'] = res.data.xAxis;
            _this.lineChartData['yAxis']['min'] = null;
            _this.lineChartData['yAxis']['max'] = null;
            _this.drawLine1();

          }else if ( res.code == 201 ){

            let matDate = '';
            matDate = postForMatDate(res.date)
            _this.timeData = changeTimeExtend(matDate);
          }else{//202
            let matDate = '';
            matDate = postForMatDate(res.date)
            _this.timeData = changeTimeExtend(matDate);
            // _this.overview =  { };
            var arr = [];
            for(var i = 0;i<10;i++){
              arr.push(0);
            }
            // // console.log.log(res.data.xAxis.title);
            _this.lineChartData['series'][0]['data'] = arr;
            _this.lineChartData['series'][0]['name'] = '新增用户留存';
            _this.lineChartData['xAxis']['data'] = res.data.xAxis;
            _this.lineChartData['yAxis']['min'] = 0;
            _this.lineChartData['yAxis']['max'] = 100;
            _this.drawLine1();
          }
        }
        yuanAjax(this,url,body,successCallback);
      },



//画线
      drawLine1(){
        $('#myChart_zh').width($('.getWidth').width());
        if (!this.myChart_zh) {
          this.myChart_zh = echarts.init(document.getElementById('myChart_zh'));
        }
        this.myChart_zh.setOption(this.lineChartData);
      },

在这里插入图片描述左右两条y轴

// 折线图
      lineChartData: {
        color: [
          "rgba(84,127,229,1)",
          "rgba(54,195,155,1)",
          "rgba(167,140,222,1)",
          "rgba(38,198,217,1)",
          "rgba(238,110,115,1)",
          "rgba(254,178,116,1)"
        ],
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(255,255,255,0.7)",
          padding: 0,
          extraCssText: "box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);",
          formatter: function(param) {
            return lineTip(param);
          }
        },
        legend: {
          icon: "pin",
          itemWidth: 14,
          itemHeight: 5,
          data: ["送达粉丝数", "回访粉丝数"],

          selected: {
            订阅粉丝数: false,
            拒收粉丝数: false,
            推送次数: false,
            送达粉丝数: true,
            回访粉丝数: true,
            回访率: false
          },
          bottom: "0px",
          itemGap: 50,
          icon: "pin",
          itemWidth: 14,
          itemHeight: 5,
          borderRadius: "1"
        },
        grid: {
          height: "230px",
          left: "50px",
          right: "50px",
          top: "30px",
          containLabel: true
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
            axisLine: {
              lineStyle: {
                color: "#ccc"
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#333"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            minInterval: 1,
            name: "",
            position: "left",
            axisLabel: {
              formatter: "{value}"
            },
            axisTick: {
              length: 10
            },
            axisLine: {
              lineStyle: {
                color: "#ccc"
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#333"
              }
            },
            splitLine: {
              // 坐标轴在 grid 区域中的分隔线。
              lineStyle: {
                type: "",
                color: "#eae9e9"
              }
            }
          }
        ],

        series: []
      },

 //折线图
    async getlineview() {
      var _this = this;
      _this.loadingLine = true;


      let res=await this.axios({
        method:'post',
        url:'/api/v1/pushStatistical/chart',
        data:{ 
          date:this.buttonsum
        },
        responseType:'json',
      })


      // console.log(res)


      _this.loadingLine = false;
      if (res.code == 200) {

        // this.lineshow=false

        var arr = [];
        var arr6 = [];
        var multipleSel6 = [];
        _this.value6 = [];
        var allL = [];

        for (var k in res.data.series) {
          for (var i in res.data.series[k]["data"]) {
            allL.push(parseInt(res.data.series[k]["data"][i]));
          }
        }
        var max = Math.max.apply(null, allL);

        for (var k in res.data.series) {
          arr[k] = {
            name: res.data.series[k]["name"],
            type: "line",
            data: res.data.series[k]["data"],
            smooth: true,
            smoothMonotone: "x",
            areaStyle: res.data.series[k]["areaStyle"]
          };

          if (k == 0) {
            (arr[k].areaStyle = {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(84,127,229,0.9)"
                    },
                    {
                      offset: 1,
                      color: "rgba(84,127,229,0.1)"
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(84,127,229, 0.1)",
                shadowBlur: 10
              }
            }),
              (arr[k].itemStyle = {
                normal: {
                  color: "rgb(84,127,229)",
                  borderColor: "rgba(84,127,229,0.2)"
                }
              });
          }
          if (k == 1) {
            (arr[k].areaStyle = {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(54,195,155,0.9)"
                    },
                    {
                      offset: 1,
                      color: "rgba(54,195,155,0.1)"
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(54,195,155, 0.1)",
                shadowBlur: 10
              }
            }),
              (arr[k].itemStyle = {
                normal: {
                  color: "rgb(54,195,155)",
                  borderColor: "rgba(54,195,155,0.2)"
                }
              });
          }
          if (k == 2) {
            (arr[k].areaStyle = {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(167,140,222,0.9)"
                    },
                    {
                      offset: 1,
                      color: "rgba(167,140,222,0.1)"
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(167,140,222, 0.1)",
                shadowBlur: 10
              }
            }),
              (arr[k].itemStyle = {
                normal: {
                  color: "rgb(167,140,222)",
                  borderColor: "rgba(167,140,222,0.2)"
                }
              });
          }
          if (k == 3) {
            (arr[k].areaStyle = {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(38,198,217,0.9)"
                    },
                    {
                      offset: 1,
                      color: "rgba(38,198,217,0.1)"
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(38,198,217, 0.1)",
                shadowBlur: 10
              }
            }),
              (arr[k].itemStyle = {
                normal: {
                  color: "rgb(38,198,217)",
                  borderColor: "rgba(38,198,217,0.2)"
                }
              });
          }
          if (k == 4) {
            (arr[k].areaStyle = {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(238,110,115,0.9)"
                    },
                    {
                      offset: 1,
                      color: "rgba(238,110,115,0.1)"
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(238,110,115, 0.1)",
                shadowBlur: 10
              }
            }),
              (arr[k].itemStyle = {
                normal: {
                  color: "rgb(238,110,115)",
                  borderColor: "rgba(238,110,115,0.2)"
                }
              });
          }
          if (k == 5) {
            (arr[k].areaStyle = {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(254,178,116,0.9)"
                    },
                    {
                      offset: 1,
                      color: "rgba(254,178,116,0.1)"
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(254,178,116, 0.1)",
                shadowBlur: 10
              }
            }),
              (arr[k].itemStyle = {
                normal: {
                  color: "rgb(254,178,116)",
                  borderColor: "rgba(254,178,116,0.2)"
                }
              });
          }
        }

        _this.lineChartData["series"] = arr;
        _this.lineChartData["xAxis"][0]["data"] = res.data.xAxis;

        _this.drawLine();
      }else {

        //  this.lineshow=true

          // this.$message({
          //   message: res.msg,
          //   type: 'warning'
          // });

        //202

        var notData = [];
        for (var i in res.data.xAxis) {
          notData[i] = 0;
        }
        var not = [
          {
            name: "订阅粉丝数",
            type: "line",
            data: notData
          },
          {
            name: "拒收粉丝数",
            type: "line",
            data: notData
          },
          {
            name: "推送次数",
            type: "line",
            data: notData
          },
          {
            name: "推送次数",
            type: "line",
            data: notData
          },
          {
            name: "送达粉丝数",
            type: "line",
            data: notData
          },
          {
            name: "回访粉丝数",
            type: "line",
            data: notData
          },
          {
            name: "回访率",
            type: "line",
            data: notData
          }
        ];

        _this.lineChartData["series"] = not;
        _this.lineChartData["xAxis"][0]["data"] = res.data.xAxis;

        _this.lineChartData["yAxis"].min = 0;
        _this.lineChartData["yAxis"].max = 100;

        _this.drawLine();
      }
    }, 
    //画折线 - 趋势图
    drawLine() {
      const _this = this;
      JQ("#dayLine").width(JQ(".push-statistics").width());
      _this.dayLine = window.echarts.init(document.getElementById("dayLine"));
      _this.dayLine.setOption(_this.lineChartData, { notMerge: true });
    },
    //移除
    selRemove(ag) {
      var _this = this;

 

      let chartDisdata = _this.lineChartData.legend.data;
      let chartSel = _this.lineChartData.legend.selected;

      //   console.log(chartDisdata)
      //   console.log(chartSel)

      //情况图表显示data
      for (var i = 0; i < chartDisdata.length; i++) {
        if (ag == chartDisdata[i]) {
          _this.lineChartData.legend.data.splice(i, 1);

          _this.tag = _this.lineChartData.legend.data[0];
        }
      }
      // 改变图表selected状态
      for (var k in chartSel) {
        if (ag == k) {
          _this.lineChartData.legend.selected[k] = false;
        }
      }

      // // console.log(_this.lineChartData['yAxis']);

      //根据状态显示y轴数据
      let showVal = _this.lineChartData["yAxis"];
      if (typeof ag != "") {
        if (ag == "回访率") {
           console.log(ag['currentLabel']);
          for (var i = 0; i < _this.lineChartData["yAxis"].length; i++) {
            if (_this.lineChartData["yAxis"][i]["name"] === "回访率") {
              _this.lineChartData["yAxis"].splice(i, 1);
              
            }
          }
        }
      }

      _this.drawLine();
    },
    //下拉菜单 - 多选事件
    change5(ag) {
      var _this = this;
      if (ag.length) {
        this._tag = ag[0];
      }


      console.log(ag)

      if (ag.length == 2) {
        _this.disabled5 = true;
      } else {
        _this.disabled5 = false;
      }


      _this.selectData = ag;
      _this.lineChartData.legend.data = _this.selectData;
      let chartDisdata = _this.lineChartData.legend.data;
      let chartSel = _this.lineChartData.legend.selected;

        console.log(_this.selectData)
         console.log(chartDisdata )
         console.log(chartSel)


      if (ag.length == 0) {
    
        for (var k in chartSel) {
          if (k == _this.tag) {
            _this.lineChartData.legend.selected[_this.tag] = false;
          } else if (k == _this._tag) {
            _this.lineChartData.legend.selected[_this._tag] = false;
          }
        }
      }



      for (var k in chartSel) {

        for (var i = 0; i < chartDisdata.length; i++) {
          if (chartDisdata[i] == k) {

              console.log(_this.lineChartData.legend.selected[k])
            _this.lineChartData.legend.selected[k] = true;
          }
        }


      }

      let is_jump = false;
      for (var i = 0; i < _this.lineChartData["yAxis"].length; i++) {
        if (_this.lineChartData["yAxis"][i]["name"] === "跳出率") {
          is_jump = true;
        }
      }

      for (var i = 0; i < _this.selectData.length; i++) {
       
       //回访率的轴为什么在右边，主要是下面的操作。
        if (!is_jump) {
          if (_this.selectData[i] == "回访率") {
            _this.lineChartData["yAxis"].push({
              type: "value",
              name: "回访率",
              min: 0,
              max: 100,
              position: "right",
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#333"
                },
                formatter: "{value}%"
              },
              axisTick: {
                length: 10
              },
              axisLine: {
                lineStyle: {
                  color: "#ccc"
                }
              },
              splitLine: {
                // 坐标轴在 grid 区域中的分隔线。
                lineStyle: {
                  type: "",
                  color: "#eae9e9"
                }
              }
            });
          }
        }
      }

      _this.drawLine();
    },

深海有鱼呀

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Echarts--动态设置图例和数据(折线)

重点：legend里的data和selectedlineChartData: { color:['rgba(84,127,229,1)','rgba(54,195,155,1)','rgba(167,140,222,1)','rgba(38,198,217,1)','rgba(238,110,115,1)','rgba(254,178,116,1)'], ...
复制链接

扫一扫