echarts图表渐变色 、及X轴滚动条样式处理

由于项目中运用echarts可能较多。因此对同一种类型的echarts进行一个封装,页面调用根据传入不同的状态生成不同样式,例如横向柱状图和纵向柱状图。

话不多说上代码

父页面

checkOptionData:function(){
        let xDate=["测试1","测试2","测试3",'测试4','测试5','测试6','测试7'];
           let y1=[100,600,200,100,100,100,100];
           let y2=[200,100,300,100,100,100,100];
           let series=[y1,y2];
           let legendDate=["数量1",'数量2'];
           this.optionData={
            id:"opraStatistics", title:"测试", legendDate:legendDate, xDate:xDate,
             xName:"", yName:"", series:series,
             owner:{
               colorList:[],
               type:'',//控制横向或是纵向显示'transverse'为横向,默认不传为纵向
               stack:'a',//控制是否叠加,默认不传是不叠加
               //如果是横向柱状图可添加Y轴滑动
              //  dataZoom:[{type:'slider',start:0,end:10,right:0,show:true,width:10,height:'100%',top:-2,yAxisIndex:0}]
              //这里是纵向添加x轴滑动
              dataZoom:[{type:'slider',start:0,end:60,bottom:20,show:true,width:'70%',height:10,left:'center',
              backgroundColor:'rgb(60,114,209)',
              height:'4',
              fillerColor:'#fff',
              borderColor:'rgb(60,114,209)',
              textStyle:{
                color:'transparent'
              },
              }
              ]
             }
           };
      },

子页面

setOption({id, title, legendDate, xDate, xName, yName, series,owner}) {
        var that=this
        const ownertype=owner.type=='transverse'
        const colorList =owner.colorList.length ? owner.colorList:['rgb(45,185,186)', 'rgb(24,146,147)', '#009fc1'];
        const optionData = {
          dataZoom:owner.dataZoom?owner.dataZoom:[],//数据过大加入滑动
          tooltip: {
            trigger: 'axis'
          },
          title: {
            text: title,
            // left: 'left',
            top:'20',
            left:'20',
            textStyle: {
              fontSize: 14,
              'color':"rgb(56,116,220)"
            }
          },
          color: colorList,//颜色
          legend: {
            data: legendDate,
            left: '40%',
            top:'15%',
            textStyle:{
              //设置右上角标题文字大小
              fontSize:12,
              color:'#fff'
            },
            itemWidth:16,
            itemHeight:12,
            itemGap:6,//设置文字和图标间距

          },
          calculable: true,
          textStyle: {
            'fontSize': 8,
            'fontFamily': 'Source Han Sans CN Bold',
            'color':"#666666"
          },
          grid: {//设置图距离
                  left: 20,
                  right:15,
                  bottom:30,
                  top:'30%',
                   containLabel: true
                },
          
          xAxis: [
            {
              type: ownertype?'value':'category',
              data:ownertype?'':xDate,
              name: xName,
              splitLine:{show:false }, //去除网格线
              
              axisLine: { // 坐标 轴线
                show: true, // 是否显示坐标轴轴线
                lineStyle: {//设置轴线
                         type:  'solid' ,
                         color:  'rgb(211,211,211)' ,
                         width: '1' 
                     }
              },
              axisTick: { // 坐标 轴线
                show: false // 是否显示坐标轴轴线
              },
              axisLabel: {
                interval:0,  //显示全
                //设置横轴文字大小
                fontSize:12,
                'color':"#fff"
              },
              nameTextStyle:{
                //设置横轴类型文字大小
                fontSize:12
              }
            }
          ],
          yAxis: [
            {
              type: ownertype?'category':'value',
              data:ownertype?xDate:'',
              name: yName,
              splitLine:{show:true }, //去除网格线
              
              axisLine: { // 坐标 轴线
                show: true, // 是否显示坐标轴轴线
                lineStyle: {//设置轴线
                         type:  'solid' ,
                         color:  'rgb(211,211,211)' ,
                         width: '1' 
                     }
              },
              axisTick: { // 坐标 轴线
                show: false // 是否显示坐标轴轴线
              },
              axisLabel: {
                //设置纵轴文字大小
                fontSize:12,
                'color':"#fff",
              },
              nameTextStyle:{
                //设置纵轴数量文字大小
                fontSize:12,
                // fontWeight:'bold'数量
              }
            }
          ]
        }
        optionData.series = [];
        if(series){
          for (let i = 0; i < series.length; i++) {
            const scolor = colorList[i]
            optionData.series[i] = {
              name: legendDate[i],
              type: 'bar',
              data: series[i],
              stack:owner.stack,//设置柱状图叠加
              // barWidth:30,
              barMaxWidth:35,//设置柱形图柱子宽度
              smooth: true,
              itemStyle: {
                fontSize:12,
                emphasis: {
                  barBorderRadius: 30,
                  textStyle: {
                    // fontWeight: 'bolder',
                    fontSize: '12',
                    fontFamily: '微软雅黑'
                  }
                },
                normal: {
                  // 柱形图圆角,初始化效果
                  barBorderRadius: [2, 2, 0, 0],
                  //渐变色0,0,0,1表示从上向下渐变(右,下,左,上)
                    color:i==1?'rgb(253,192,42)':new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:'rgb(1,242,252)'},{offset:0.5,color:'rgb(55,144,241)'},{offset:1,color:'rgb(76,105,235)'}]),
                  label: {
                    show: true, // 是否展示
                    //  color: ownertype?'#fff':scolor,
                    color:'#fff',
                    position:ownertype?'insideRight':'top',
                    barMaxWidth:30,
                    // backgroundColor:'rgb(246,189,21)',
                    itemStyle: {
                      padding:5,
                    },
                    textStyle: {
                      // fontWeight: 'bolder',
                      //设置柱状图上文字大小

                      fontSize: '11',
                      fontFamily: '微软雅黑'
                    }
                  }
                }
              }
            }
          }
        }
        this.chart = echarts.init(document.getElementById(id))
        this.chart.clear()

        this.chart.setOption(optionData);
        // dblclick双击
        this.chart.on('click', function (params) {
          //柱状图点击事件
          console.log(that.chartData.id)
          //触发父组件方法,传入点击参数判断掉不同接口
          that.$emit('alert',params)
          
            console.log(params,"单击了"+params.name+"柱状图");
        });
      }

看图
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值