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+"柱狀圖");
        });
      }

看圖