echarts x轴 y轴设置

一、背景介绍：
1.柱状图和折线图并存；
2.柱状图背景颜色为渐变；
3.折线图改变颜色，拐点设置大小；
4.设置图例的展示位置；
5.设置图标与边距之间的距离；
6.去掉x轴的刻度；
7.自定义y轴刻度；
8.柱状图添加数值；
9.如果没有值时，隐藏柱状图；
10.待续…
二、效果如下图：

三、上代码

1.集成到项目中
npm install echarts --save

2.html部分
<div id="echartsId"></div>

3.js部分
<script>
   //先引入
	import * as echarts from 'echarts';
 
	//使用
	 getEcharts(){
         var myChart = echarts.init(document.getElementById('echartsId'));
         var option = { 
            grid:{
               //以下四个属性设置了echarts到各个边的边距
               //比如未设置前，左右上下留白可能会很大，与设计图可能会有出入
               bottom:'20%',
               top:'20%',
               left:'10%',
               right:'5%'
            },
             dataZoom: [
		         {//设置x轴横向滚动条
		            type: "slider",
		            show: true, //flase直接隐藏图形
		            xAxisIndex: [0],
		            left: "5%", //滚动条靠左侧的百分比
		            bottom: -20,
		            // start: 0, //滚动条的起始位置
		            // end: 20, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
		            startValue: 0,//每屏显示的开始下标
		            endValue: 4,//每屏显示的结尾下标
		            zoomLock: true,
		            showDetail: false,
		            showDataShadow:false,
		          },
	        ],
            legend: {
                //图例
                data:['销量','销量2'],//都有哪些图例
                itemWidth:9,//图例的宽度
                itemHeight:9,//图例的高度
                right:20,  //图例的位置，默认是水平居中，此处设置的居右
            },
            xAxis: {//x轴
                data: ["2016年","2017年","2018年","2019年","2020年"],//x轴参数
                axisLabel:{
                  interval:0,//强制展示所有标签（默认当屏幕很小时会间隔展示）
                },
                axisTick:{
                  show:false,//不展示X坐标轴刻度
                },
                lineStyle: {
                    color: '#C8D2E7',//设置x坐标轴的颜色
                },
               axisLine: {
                    show: xxx.length>0 ? true: false,//坐标轴没值时不显示坐标轴线
                },
            },
            yAxis: { //y轴
                min:0,//设置最小值
                max:3,//设置最大值
                interval:1,//每刻度差额
                axisLabel:{//自定义y轴展示的刻度内容（默认是数值）
                    formatter: function (value) {
                        var texts = [];
                        if(value==0){
                          texts.push('D');
                        }
                        else if (value <=1) {
                          texts.push('C');
                        }
                        else if (value <= 2) {
                          texts.push('B');
                        }
                        else{
                          texts.push('A');
                        }
                        return texts;

                    }
                },
                axisLine: {
                    show: xxx.length>0 ? true: false,//坐标轴没值时不显示坐标轴线
                },
            },
            series: [
              //设置图的种类
              {
                name: '销量',//与图例对应
                type: 'bar',//规定为柱状图
                data: [2, 3, 2, 1, 1],//值-展示到对应y轴的位置
                barWidth : 8,//柱状图宽度 
                itemStyle:{
                   borderRadius:[2,2,0,0],//柱状图圆角（左上，右上，右下，左下）    
                   // borderRadius:[2,3],//柱状图圆角（左上和右下圆角半径为2px，右上和左下圆角半径为3px）
                   // borderRadius:[4],//柱状图圆角（统一设置四个角的圆角半径为4px）
                  //柱状图渐变
                  color: function(params) {
                    var color1=new echarts.graphic.LinearGradient(0, 1,0, 0, [{
                        offset: 0,
                        color: "#536EC6" // 0% 处的颜色
                    },{
                        offset: 1,
                        color: "#42A5E0" // 100% 处的颜色
                    }], false)
                     var color2=new echarts.graphic.LinearGradient(0, 1,0, 0, [{
                        offset: 0,
                        color: "#536EC6" // 0% 处的颜色
                    },{
                        offset: 1,
                        color: "#42A5E0" // 100% 处的颜色
                    }], false)
                     var color3=new echarts.graphic.LinearGradient(0, 1,0, 0, [{
                        offset: 0,
                        color: "#536EC6" // 0% 处的颜色
                    },{
                        offset: 1,
                        color: "#42A5E0" // 100% 处的颜色
                    }], false)
                     var color4=new echarts.graphic.LinearGradient(0, 1,0, 0,[{
                        offset: 0,
                        color: "#536EC6" // 0% 处的颜色
                    },{
                        offset: 1,
                        color: "#42A5E0" // 100% 处的颜色
                    }], false)
                     var color5=new echarts.graphic.LinearGradient(0, 1,0, 0, [{
                        offset: 0,
                        color: "#536EC6" // 0% 处的颜色
                    },{
                        offset: 1,
                        color: "#42A5E0" // 100% 处的颜色
                    }], false)
                    var colorList = [
                       color1,color2,color3,color4,color5
                    ];
                    return colorList[params.dataIndex]
                  },
                }
            },
            {
                name: '销量2',
                type: 'line',//规定为折线图
                symbolSize:7,   //拐点圆的大小
                symbol:'circle',//规定拐点为实心（默认为空心）
                data: [3,1, 2, 2, 2],//值-展示到对应y轴的位置
                itemStyle:{
                  color:"#9A9EB4",//折线图的颜色
                  borderColor:'#9A9EB4',  //拐点边框颜色 
                },
                label: {//设置柱状图上方展示数值
                  show: true,
                  position: "top",
                  color: "#000",
                  formatter: (e) => {
                     return e.data > 0 ? e.data : "";
                  },
              },
            },
          ]
        };
        myChart.setOption(option);
     }
</script>

关于echarts的相关内容，持续更新中…
如果本篇文章不能帮助到您，推荐您看比较全面的一篇文章：echarts——各个配置项详细说明总结，我在刚开始绘制echarts的时候，朋友推荐参考的一篇文章，好文章值得分享。