很多人设置第三个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>
下面是效果图: