<template>
<div class="lines">
<div id="farmtotel" :style="{ width: '100%', height: '100%' }"></div>
</div>
</template>
<script>
import echarts from "echarts"
export default {
data() {
return {}
},
mounted() {
this.drawLine()
},
methods: {
drawLine() {
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("farmtotel"))
var data = [{
month: "1月",
value: 2100
},
{
month: "2月",
value: 280
},
{
month: "3月",
value: 1010
},
{
month: "4月",
value: 1500
},
{
month: "5月",
value: 800
}
];
var xData = [],
yData = [];
var min = 0;
data.map(function(a, b) {
xData.push(a.month);
if (a.value === 0) {
yData.push(a.value + min);
} else {
yData.push(a.value);
}
});
myChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
opacity: 0
}
},
formatter: function(prams) {
// 设置判断,避免柱状阴影的数值显示出来
if (prams[0].data === min) {
return "种植规模:0"
} else {
return "种植规模:" + prams[0].data
}
}
},
legend: {
show: false
},
grid: {
left: '5%',
right: '5%',
bottom: '5%',
top: '20%',
containLabel: true,
z: 22
},
xAxis: [{
type: 'category',
gridIndex: 0,
data: xData,
axisTick: {
show: false
},
axisLabel: {
show: true,
color: '#fff',
fontSize:16
}
}],
yAxis: [{
type: 'value',
name:"亩",
nameTextStyle:{
color:"#fff"
},
gridIndex: 0,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
color: '#fff',
formatter: '{value}'
}
},
{
type: 'value',
gridIndex: 0,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle:{
color: ['#315070'],
width: 1,
type: 'dashed'
}
},
axisLabel: {
show: false
}
}
],
series: [{
name: '种植规模',
type: 'bar',
barWidth: '18%',
data: yData,
zlevel: 11,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: 'rgba(255,224,102,1)'}, //柱图高亮渐变色
{offset: 1, color: 'rgba(255,224,102,0.5)'} //柱图高亮渐变色
]
)
}
}
},
{
name: '',
type: 'bar',
barWidth: '30%',
xAxisIndex: 0,
yAxisIndex: 1,
barGap: '-135%',
data: [100, 100, 100, 100, 100],
itemStyle: {
normal: {
color: 'rgba(255,255,255,0.1)'
}
},
zlevel: 9
},
]
});
window.onresize = myChart.resize;
}
}
};
</script>
<style lang="less" scoped>
.lines {
height: 85%;
width: 100%;
}
</style>
效果图如下: