Echarts雙Y軸折線圖和柱形圖混合
阿新 • • 發佈:2019-01-06
柱形圖和折線圖混合使用,並且使用雙y軸座標
具體程式碼如下
option ={
color: ['#009CFF', '#FF072F'], //設定多個顏色值時代表的是圖例顏色
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
},
},
legend: {
right: '5%',
bottom: '0',
data: ['產品(輛)', '排名'],
textStyle: {
fontSize: 14 ,
fontWeight: 'normal',
},
},
grid: {
left: '15%',
bottom: '40%',
top: '8%',
},
xAxis: [
{
type: 'category',
data: industryName,
textStyle: {
fontWeight: 'normal',
},
axisLabel: {
textStyle: {
fontSize: 12 ,
fontWeight: 'normal',
},
rotate: '45',
},
},
],
yAxis: [ //當有兩個y軸時,設定兩個{}{}來承載y軸的值
{
type: 'value',
min: 0,
axisLabel: {
textStyle: {
fontSize: 14,
fontWeight: 'normal' ,
},
},
splitLine: { show: false }, //y軸網格線,一般都會隱藏,x軸亦是如此
},
{
type: 'value',
axisLabel: {
textStyle: {
fontSize: 14,
fontWeight: 'normal',
},
},
splitLine: { show: false },
inverse: true,
},
],
series: [ //對應折線圖和柱形圖,進行資料載入
{
name: '產品(輛)',
type: 'bar',
data: industryValue,
barWidth: '12',
},
{
name: '排名',
type: 'line',
yAxisIndex: 1,
data: industryPM,
label: {
normal: {
show: false,
},
},
lineStyle: {
normal: {
width: 1,
},
},
},
],
}