tnblog
首页
视频
资源
登录

echats设置x坐标从0开始,设置x坐标从原点开始。echart文档中的搜索

9143人阅读 2022/12/9 15:03 总访问:849696 评论:0 收藏:0 手机
分类: 前端

在x坐标设置boundaryGap: false即可.

官方文档:
https://echarts.apache.org/zh/option.html#xAxis.boundaryGap

可以直接放到输入框搜索

完整代码

  1. mounted() {
  2. this.testChart()
  3. },
  4. // 组件方法
  5. methods: {
  6. testChart() {
  7. // 基于准备好的dom,初始化echarts实例
  8. let myChart = this.$echarts.init(document.getElementById('labroom-trend-chart'))
  9. let option = {
  10. // 图表颜色设置
  11. color: ['#409EFF', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
  12. // title: {
  13. // text: '学习时长趋势(日时长)',
  14. // textAlign: 'left',
  15. // left: '27px',
  16. // top: 10,
  17. // textStyle: {
  18. // fontSize: '16px',
  19. // fontFamily: 'Microsoft YaHei'
  20. // }
  21. // },
  22. grid: {
  23. top: '10%',
  24. left: '3%',
  25. right: '3%',
  26. bottom: '6%',
  27. containLabel: true
  28. },
  29. xAxis: {
  30. type: 'category',
  31. data: ['Mon', 'Tue', 'Wed', 'Thu'],
  32. //****************不留白,从原点开始**************
  33. boundaryGap: false // 不留白,从原点开始
  34. //data: ['Mon', 'Tue', 'Wed', 'Thu',"1","3","5","7","8","9"]
  35. },
  36. yAxis: {
  37. type: 'value'
  38. },
  39. series: [
  40. {
  41. data: [32, 51, 41, 49],
  42. //data: [32, 51, 41, 49,55,60,30,39,50,22],
  43. type: 'line',
  44. //显示出来折线图的面积
  45. areaStyle: {
  46. normal: {
  47. // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
  48. color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  49. offset: 0,
  50. color: 'rgba(80,141,255,0.39)'
  51. }, {
  52. offset: 0.34,
  53. color: 'rgba(56,155,255,0.25)'
  54. }, {
  55. offset: 1,
  56. color: 'rgba(38,197,254,0.00)'
  57. }])
  58. }
  59. }
  60. }
  61. ]
  62. };
  63. myChart.setOption(option);
  64. }
  65. }

欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

echats 边距间距。echart设置图表边距间距

echart设置边距是使用grid //设置图标边距 grid: { top: '10%', left: '3%', right: &#3...

使用OLEDB读取不同版本Excel的连接字符串设置

使用OleBD读取excel的时候,excel不同的版本,连接字符串的写法也会不一样。///<summary> ///读取excel ///</su...

NesTable设置不能拖动

让 Nestable 组件不能拖动,直接在jquery.nestable.js 文件中源码搜索var onStartEvent = function(e) 方法里面的list.drag...

让IIS支持webp格式图片让IIS支持vtt格式iis设置mime类型iis配置支持的类型

webp格式图片可以让图片体积变小。也让下载图片变得更加困难一点 在线制作webp工具 https://www.upyun.com/webp?utm_mediu...

ServiceStack.Redis操作Redis设置数据过期问题

添加一个key并设置过期时间(例如这个设置2分10秒后过期)TimeSpants=newTimeSpan(0,2,10); byte[]intbit=BitConverter.GetB...

layer.confirm 设置 询问框 的层遮盖

functionadmin_del(obj){ layer.confirm('确认要重启吗?',{ btn:['确定','取消']//按钮 },fun...

AJAx调用webapi上传图片或文件。设置token设置Authorization Bearer

AJAX调用webapi上传图片或文件,并返回刚上传的文件名。废话不多说直接贴代码吧html相关:<!DOCTYPEhtml> <html&...

设置登陆访问权限

首先创建一个文件夹Filters并新建一个类IsAuthorizeAttribute继承AuthorizeAttribute,分别重写两个方法,如下代码publiccl...

HBuidler x快捷键设置

工具-->自定义快捷键然后找到我们想要自定义的快捷键例如这里的格式化的快捷键左边是不能直接修改的,我们把它复制到右...

css设置边框border透明度设置阴影透明度

这个世界不止苟且,还有诗和远方。设置边框透明度: border:1px solid transparent; border-color: rgba(151, 151, 151, 0....

Redis缓存Token+设置过期时间+后台设置菜单

今天我们记录一下后台访问接口+Redis缓存数据首先我们要调一下接口这里我们要拿到数据(Token)的话 需要反序列化因为我这个...

svn设置忽略某些文件或者整个文件夹

*/bin */obj :忽略 bin下面的与obj下面的所有文件Aaa.txt : 忽略具体的文件

Camtasia 9设置停止播放快捷键

先点击录制然后再弹出的框框里边点击 :工具-->选项然后在 : 热键--> 停止里边设置就好

.net core cookie设置domain过期时间等

.net core cookie设置domain,过期时间很简单使用CookieOptions对象即可CookieOptionscookieOptions=newCookieOptions(); c...

redis运行时缓存设置

1.判断是否有此key的值.类库(CacheHelper)注:如果要获取缓存数据,请使用TryGetValue方法public static bool Contains(s...
这一生多幸运赶上过你.
排名
8
文章
231
粉丝
7
评论
7
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术