echarts配置项

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网 
  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. })
【感谢龙石为本站提供数据交换平台,http://www.longshidata.com/pages/exchange.html】
更多阅读