首页
视频
资源
登录
原
echats设置x坐标从0开始,设置x坐标从原点开始。echart文档中的搜索
7177
人阅读
2022/12/9 15:03
总访问:
577614
评论:
0
收藏:
0
手机
分类:
前端
在x坐标设置boundaryGap: false即可. **官方文档:** https://echarts.apache.org/zh/option.html#xAxis.boundaryGap 可以直接放到输入框搜索 ![](https://img.tnblog.net/arcimg/notebook/fd03aeae5a9245b9a0bf948f244dddcd.png) **完整代码** ``` 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
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
TeachingNote
这一生多幸运赶上过你.
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
.net
36篇
后端
5篇
ORM
16篇
前端
48篇
随笔
13篇
移动开发
6篇
数据库
6篇
英语
3篇
rabbitmq
1篇
.net core
5篇
unity
1篇
k8s
1篇
云服务
1篇
DDD
1篇
网络
1篇
更多
mysql
1篇
python
2篇
docker
1篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术