分类:
前端
在x坐标设置boundaryGap: false即可.
官方文档:
https://echarts.apache.org/zh/option.html#xAxis.boundaryGap
可以直接放到输入框搜索
完整代码
mounted() {
this.testChart()
},
// 组件方法
methods: {
testChart() {
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('labroom-trend-chart'))
let option = {
// 图表颜色设置
color: ['#409EFF', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
// title: {
// text: '学习时长趋势(日时长)',
// textAlign: 'left',
// left: '27px',
// top: 10,
// textStyle: {
// fontSize: '16px',
// fontFamily: 'Microsoft YaHei'
// }
// },
grid: {
top: '10%',
left: '3%',
right: '3%',
bottom: '6%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu'],
//****************不留白,从原点开始**************
boundaryGap: false // 不留白,从原点开始
//data: ['Mon', 'Tue', 'Wed', 'Thu',"1","3","5","7","8","9"]
},
yAxis: {
type: 'value'
},
series: [
{
data: [32, 51, 41, 49],
//data: [32, 51, 41, 49,55,60,30,39,50,22],
type: 'line',
//显示出来折线图的面积
areaStyle: {
normal: {
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(80,141,255,0.39)'
}, {
offset: 0.34,
color: 'rgba(56,155,255,0.25)'
}, {
offset: 1,
color: 'rgba(38,197,254,0.00)'
}])
}
}
}
]
};
myChart.setOption(option);
}
}
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
评价