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(){}中调用 不能显示-->复制代码