Echarts设置网格线样式、X轴Y轴的样式(单位设置)、legend

var myChart1 = echarts.init(document.getElementById('echarts1'));
window.addEventListener("resize", function () {
  myChart1.resize();
});
myChart1.setOption({
  legend: {
    data: ['注册人数']
  },
  tooltip: {},
  xAxis: {
    name: '时间',
    nameTextStyle: {
      color: '#9FA9BC'
    },
    type: 'category',
    data:['10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00'],
    axisLabel: {
      show: true,
      // formatter:'{value}人',
      textStyle: {
        color: '#9FA9BC'//Y轴坐标的颜色
      }
    },
    axisLine: {
      lineStyle: {
        type: 'solid',
        color: '#9FA9BC',
        width: '1'
      }
    },
  },
  yAxis: {
    name: '人数/人',
    nameTextStyle: {
      color: '#9FA9BC'
    },
    type: 'value',
    axisLabel: {
      show: true,
      // formatter:'{value}人',
      textStyle: {
        color: '#9FA9BC'//Y轴坐标的颜色
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#f5f5f5',//网格线的颜色
        width: 1,
        type: 'solid'
      }
    },
    min: 0,
    max: 10,
    axisLine: {
      lineStyle: {
        type: 'solid',
        color:'#9FA9BC',
        width: '1'
      }
    },
  },
  series: [{
    name: '注册人数',
    data: [1, 3, 2, 4, 6, 3, 1],
    type: 'line',
    color: '#3252FF'
  }]
});

实现效果如图-照着来啊这么简单的东西

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值