option = {
xAxis: {
type: 'category',
data: ['玉米', '大豆', '油麦菜', '土豆', '韭菜'],
axisTick: {
show: false
},
axisLabel: {
show: true,
interval: 0,
textStyle: {
color: 'rgba(0,0,0,0.75)', // X轴文字颜色
padding: [0, 0, 0, 0],
fontSize: 12
}
}
},
legend: {
textStyle: {
color: 'rgba(0,0,0,0.75)'
},
data: [
{
name: '销售金额',
itemStyle: {
color: '#1F94D4',
borderWidth: 10
}
},
{
name: '销量',
itemStyle: {
color: '#E6BB56',
}
}
]
},
tooltip: {
show: true,
trigger: 'item',
formatter: function (params) {
console.log(params, params.data)
return (
'<div><span style="color: #333;font-size: 14px; font-weight: 600;margin-right: 10px">销售金额: </span><span style="color: #5396b9;float: right;">' +
params.data.total +
'元</span><br/>' +
'<span style="color: #333;font-size: 14px; font-weight: 600;margin-right: 10px">销量: </span><span style="color: #5396b9;float: right;">' +
params.data.saleNumber +
'Kg</span><br/>' +
'</div>'
)
}
},
yAxis: [
{
type: 'value',
// name: '(元)',
nameTextStyle: {
color: 'rgba(255,255,255,0.40)',
padding: [0, 0, 0, -25] // 四个数字分别为上右下左与原位置距离
},
splitLine: {
// show: false // 不显示网格线
lineStyle: {
type: 'dashed',
color: '#344a53'
}
},
axisLabel: {
formatter: '{value}元',
color: '#000'
}
},
{
type: 'value',
min: 0,
axisLabel: {
show: true,
interval: 'auto',
formatter: '{value}Kg '
},
splitLine: {
show: false // 不显示网格线
},
axisTick: {
show: false // 不显示坐标轴刻度线
}
}
],
series: [
{
name: '销售金额',
barGap: '20px',
barWidth: '20px',
data: [
{
value: 1000,
total: 1000,
saleNumber: 1200
},
{
value: 800,
total: 800,
saleNumber: 1500
},
{
value: 700,
total: 1000,
saleNumber: 2000
},
{
value: 1200,
total: 1200,
saleNumber: 1700
},
{
value: 1400,
total: 1400,
saleNumber: 2200
}
],
type: 'bar',
yAxisIndex: 0,
itemStyle: {
// 柱子颜色渐变
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#1F94D4' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(31,148,212,.5)' // 100% 处的颜色
}
],
false
)
}
},
{
name: '销量',
barGap: '0px',
barWidth: '20px',
data: [
{
value: 1200,
total: 1000,
saleNumber: 1200
},
{
value: 1500,
total: 800,
saleNumber: 1500
},
{
value: 1800,
total: 1000,
saleNumber: 1800
},
{
value: 1700,
total: 1200,
saleNumber: 1700
},
{
value: 2200,
total: 1400,
saleNumber: 2200
}
],
type: 'bar',
yAxisIndex: 1,
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
itemStyle: {
// 柱子颜色渐变
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#E6BB56' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(230,187,86,.5)' // 100% 处的颜色
}
],
false
)
}
}
]
}