很多人设置第三个Y轴不显示，是因为没有给第三个Y轴预留显示空间，
首先，grid设置x值，表示左边Y轴距离最左侧多少像素，
grid:{
x:value1, y:value2, x2:value3, y2:value4
}然后，第三个Y轴属性要设置 offset:value5，表示距旁边Y轴多少像素，
注意：value1要大于value5，这样第三个Y轴才有空间显示出来。
注意：legend的值要跟series中的name值对应的上，是通过值相等关联在一起的！
注意：渐进色color: new echarts.graphic.LinearGradient(0, 1, 0, 0)四个参数代表的位置是，右/下/左/上，
而HTML中margin和padding四个参数代表的位置是，上/右/下/左，margin表示元素与外围同级元素之间的间距，padding表示元素与外围上级元素之间的间距。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>EChartsTest</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var xAxis = ["06.01", "06.02", "06.03", "06.04", "06.05", "06.06", "06.07", "06.08", "06.09", "06.10", "06.11", "06.12"];
var legend = ['总数', '响应时间', '接单时间', '评价得分'];
var total = [2, 5, 4, 3, 6, 5, 4, 1, 8, 3, 4, 10];
var res = [2.0, 2.2, 3.3, 3.5, 5.3, 7, 8, 9, 9.0, 6.5, 7.0, 16];
var order = [3.0, 3.3, 3.3, 4.5, 6.3, 10, 9.3, 7.4, 8.0, 6.5, 3.0, 6.3];
var score = [3.0, 3.3, 5, 4.5, 4.3, 3.3, 4.3, 3.4, 3.0, 4.5, 4.0, 4.3]
var option = {
//默认色板
color: ['#dd3ee5', '#12e78c', '#fe8104'],
//标题，可以自定义标题的位置和样式
title: {
//text: '服务指标'
},
//鼠标hover提示框
tooltip: {
trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
axisPointer: { //坐标轴指示器，坐标轴触发有效，
type: 'cross', //默认为line，line直线，cross十字准星，shadow阴影
crossStyle: {
color: '#fff'
}
}
},
//图例
legend: {
data: legend, //注意：图例的名字必须跟下面series数组里面的name一致
itemHeight: 9,//改变圆圈大小
icon: "circle",
textStyle: {
color: '#B0CEFC' // 图例文字颜色
}
},
//直角坐标系内绘图网格，设置表格显示区域
grid: {
x: 65, //图表左上角到左边界的距离
y: 38, //图表左上角到上边界的距离
x2: 65, //图表右下角到右边界的距离
y2: 26, // 图表右下角到下边界的距离
},
xAxis: [
{
type: 'category', //轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'，
data: xAxis,
axisPointer: { //坐标轴指示器
type: 'shadow' //在tooltip的cross基础上，增加阴影类型的X轴指示器
},
//坐标轴文字标签
axisLabel: {
show: true, //如果为false，则X轴不显示文字标签
textStyle: {
color: '#B0CEFC',
}
},
},
],
yAxis: [
//第一个Y轴
{
position:'left',
type: 'value', //轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'，
name: '(分值) ',
min: 0, //Y轴最小值
max: 5, //Y轴最大值
interval: 1, //Y轴间隔
//坐标轴文本样式，nameTextStyle和axisLabel区别是，前者管坐标轴顶端文字（坐标轴标题），或者管轴上断点的文字标签
nameTextStyle: {
color: '#B0CEFC',
padding: 10 //内边距
},
//坐标轴文字标签
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
//坐标轴线
axisLine: {
show: true
},
//分割线/网格样式
splitLine: {
show: true,
lineStyle: {
color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],
width: 1,
type: 'solid' //实心，solid | dotted | dashed，
}
}
},
//第二个Y轴
{
position:'right',
type: 'value',
name: ' (分钟)',
nameTextStyle: {
color: '#B0CEFC',
padding: 10
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
axisLine: {
show: false
},
//分割线/网格
splitLine: {
show: true, //是否显示网格
lineStyle: {
color: ['blue'],
width: 1,
type: 'dotted'
}
}
},
//第三个Y轴在左边，距离第一个Y轴50像素
{
position:'left',
offset:35, //距离第一个Y轴50像素，注意grid: x=85，给第三个Y轴预留空间
type: 'value',
name: '(总数) ',
//不设置min、max、interval，坐标浮动处理
nameTextStyle: { //坐标轴文字样式
color: '#B0CEFC',
padding: 10
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
//坐标轴线
axisLine: {
show: false
},
//分割线
splitLine: {
show: false,
}
}
],
series: [
{
name: '总数',
type: 'bar', //数据表现形式（bar为柱形图，line为折线图）
yAxisIndex: 2, //选择index为2的Y轴作为参考系
data: total,
barWidth: 12,//柱图宽度
//渐变色函数，四个参数代表渐变色起始位置分别对应 右/下/左/上
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#d223e7'
}, {
offset: 1,
color: '#f376e0'
}]),
//图形样式
itemStyle: {
normal: {
//柱形图圆角，初始化效果
barBorderRadius: [10, 10, 10, 10],
}
},
//标签：顶部显示柱状图数值
label:{
normal:{
show:true,
position:'top'
}
}
},
{
name: '响应时间',
type: 'line', //数据表现形式（bar为柱形图，line为折线图）
yAxisIndex: 1, //选择index为1的Y轴作为参考系
data: res,
//线条样式，如折线图
itemStyle: {
normal: {
//柱形图圆角，初始化效果
barBorderRadius: [10, 10, 10, 10],
}
},
},
{
name: '接单时间',
type: 'line',
yAxisIndex: 1, //选择index为1的Y轴作为参考系
data: order,
lineStyle: {
normal: {
color: "#12e78c"
}
}
},
{
name: '评价得分',
type: 'line',
yAxisIndex: 0, //选择index为0的Y轴作为参考系
data: score,
lineStyle: {
normal: {
color: "#fe8104"
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>下面是效果图：
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
