Echarts柱状图、折线图一起显示
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['历下区', '市中区', '历城区', '章丘区', '天桥区', '槐荫区', '莱芜区', '长清区', '钢城区', '济阳区'],
// 改变x轴颜色
axisLine: {
lineStyle: {
color: '#1f78af',
width: 2, // 这里是为了突出显示加上的
}
},
},
// 设置两个y轴，左边显示一种类型，右边一种类型
yAxis: [{
splitLine: { show: false},
type: 'value',
// name: '数量',
show: true,
min:15,
max:100,
// 改变y轴颜色
axisLine: {
lineStyle: {
color: '#1f78af',
width: 2, // 这里是为了突出显示加上的
}
},
},{
splitLine: {show: false},
type: 'value',
name: '',
// interval: 10,
// min:0,
// max:2,
// 改变y轴颜色
axisLine: {
lineStyle: {
color: '#1f78af',
width: 2, //y轴宽度，这里是为了突出显示加上的
}
},
}
],
series: [{
type: 'bar',
data: [78.49, 76.01, 70.55, 70.03, 65.77, 53.20, 51.63,34.26,22.64,17.76],
itemStyle: {
normal: {
label: {
show: true,
position: 'inside',//数据在中间显示
formatter:'{c}'//百分比显示，模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数
},
color: "#1f78af"//设置柱子的颜色
}
}
},{
type: 'line',
data: [1.056,0.883,0.352,1.344,1.069,0.961,0.735,0.896,0.694,0.735],
yAxisIndex: 1,// 这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来
symbol: 'circle', // 折线点设置为实心点
symbolSize: 10, // 折线点的大小
itemStyle: {
normal: {
color: "#e09216"//设置折线颜色
}}
}]
};
文章图片
【Echarts柱状图、折线图一起显示】 参考：https://www.jianshu.com/p/19a64aef3931
