博客列表 >echarts配置项

echarts配置项

搁浅
搁浅原创
2023年04月07日 11:41:53951浏览
  1. setOption({
  2. title: {
  3. text: '血压趋势图',//左上角大标题
  4. },
  5. color:['#578EFF','#78A4FF','#FFAA00'],//自定义折线图等等图的颜色,不写就默认颜色。
  6. legend:{//显示右上角不同颜色的折线代表着什么数据
  7. data: ['收缩压', '舒张压', '脉搏']
  8. },
  9. tooltip: {//是否鼠标放上去显示小框框
  10. trigger: 'axis',
  11. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  12. type: 'cross', // 默认为直线,可选为:'line' | 'shadow' | 'cross'
  13. axis: "x",
  14. },
  15. },
  16. grid: {
  17. top: 15,//图表距离装该图容器顶部的距离
  18. left: 15,//图表距离装该图容器左边的距离
  19. right: 15,//图表距离装该图容器右边边的距离
  20. bottom: 15,//图表距离装该图容器底部的距离
  21. containLabel: true////当刻度标签溢出的时候,grid区域是否包含坐标轴的刻度标签,如果为true,则显示刻度标签,如果为false,则不显示刻度标签.
  22. },
  23. xAxis: {//xAxis为grid直角坐标轴中的x轴
  24. type: 'category',
  25. boundaryGap:true,//坐标两边留白边
  26. data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],//用来显示x轴的点表示内容
  27. },
  28. yAxis: {
  29. type: 'value'//type属性只有一种,不用设置数据,它会根据我们给的数据自己生成纵坐标数值范围
  30. },
  31. series: [//数据配置
  32. {
  33. name: '收缩压',//名称和legend.data数据要一致legend才回显示
  34. type: 'line',//折线
  35. data: [120, 130, 140, 133, 122, 167, 176],//数据
  36. },
  37. {
  38. name: '舒张压',
  39. type: 'bar',//柱状
  40. data: [110, 120, 140, 80, 112, 160, 170],
  41. },
  42. {
  43. name: '脉搏',
  44. type: 'pie',//饼状
  45. data: [130, 170, 110, 180, 12, 110, 130],
  46. }
  47. ]
  48. })
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议