一、背景介绍：
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的时候，朋友推荐参考的一篇文章，好文章值得分享。