echart 設定 柱狀圖 漸變色 線性虛線 lab字串換行

function initChart() {

    let option = {
        color: ['#3398DB'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 座標軸指示器，座標軸觸發有效
                type : 'shadow'        // 預設為直線，可選為：'line' | 'shadow'
            },
            crossStyle: {
                color: '#fff'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['第一季度', '第二季度', '第三季度', '第四季度'],
            }
        ],
        axisLabel: {
			interval: 0,
			margin: 20,
			verticalAlign: 'top',
			formatter: function(value) {
		      var ret = ""; //拼接加\n返回的類目項
			  var maxLength = 8; //每項顯示文字個數
              value = value.split("");
              value =  value.join(" ");
			  var valLength = value.length; //X軸類目項的文字個數
			  var rowN = Math.ceil(valLength / maxLength); //類目項需要換行的行數
				if (rowN >= 2) //如果類目項的文字大於3,
				{
				for (var i = 0; i < rowN; i++) {
					var temp = ""; //每次擷取的字串
					var start = i * maxLength; //開始擷取的位置
					var end = start + maxLength; //結束擷取的位置
					//這裡也可以加一個是否是最後一行的判斷，但是不加也沒有影響，那就不加吧
					temp = value.substring(start, end) + "\n"+ "\n";
					ret += temp; //憑藉最終的字串
					}
					return ret;
				} else {
						return value;
				}
			},
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'直接訪問',
                type:'bar',
                barWidth: '10%',
                data:[10, 502, 500, 334],
                itemStyle: {
                    //柱形圖圓角，滑鼠移上去效果，如果只是一個數字則說明四個引數全部設定為那麼多
                    emphasis: {
                        barBorderRadius: 30
                    },
                    normal: {
                    <!--柱狀圖的漸變色  設定-->
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#00d3ff'
                        }, {
                            offset: 1,
                            color: '#2453f5'
                        }]),
                        //柱形圖圓角設定，初始化效果
                        barBorderRadius:[30, 30, 0, 0]
                        }
                    }
                },
            },
            {
                name:'平均溫度',
                type:'line',
                data:[20, 702, 603,505],
                itemStyle: {
                    //柱形圖圓角，滑鼠移上去效果，如果只是一個數字則說明四個引數全部設定為那麼多
                    emphasis: {
                        barBorderRadius: 30
                    },
                    normal: {
                        color:'#29c872',
                        <!--設定 線性圖的  實 和 虛  線-->
                        lineStyle:{
                            width:2,
                            type:'dotted'  //'dotted'虛線 'solid'實線
                        },
                        //柱形圖圓角，初始化效果
                        barBorderRadius:[30, 30, 0, 0],
                        }
                    }
                },
            }
        ]
    };
    let  myChart = echarts.init(document.getElementById('echartBox'));
    // 使用剛指定的配置項和資料顯示圖表。
    myChart.setOption(option);
}
<!--注  echarts須有寬高 才能顯示   在 vue中  將事件放入 created(){}中呼叫 不能顯示-->複製程式碼