echarts 平滑曲线图详解

initEcharts() {
     var chartDom = document.getElementById('echarts');
     var myChart = echarts.init(chartDom);
     var option;

     option = {
         //控制整个图表的大小 和 位置
         grid:{
             left: '15%',
             bottom: 30,
             top: '20%',
             right: '5%'
         },
         xAxis: {
             type: 'category',
             boundaryGap: false, //从x轴顶格开始,
             onZero: true, //未知
             show: true, // 是否 展示 x轴 和 x轴标签
             data: ['4日19时', '5日0时', '5日5时', '5日10时', '5日15时', '5日20时', '6日1时','6日16时', '6日21时','7日2时','7日7时', '7日12时', '7日17时'],
             axisLabel:{
                 fontSize: 10, //['4日19时', '5日0时', '5日5时', '5日10时', '5日15时', '5日20时', '6日1时','6日16时', '6日21时','7日2时','7日7时', '7日12时', '7日17时']
             }
         },
         yAxis: {
             type: 'value',
             name: '潮位:cm',
             nameTextStyle: {
                 fontSize: 10, //潮位:cm
             },
             axisLabel:{
                 fontSize: 10, //[520, 232, 501, 134, 290, 330, -320,520, 232, 501, 134, 290, 330, -320]
             }
         },

         series: [
             {
                 data: [520, 232, 501, 134, 290, 330, -320,520, 232, 501, 134, 290, 330, -320],
                 type: 'line',
                 symbol: 'none', //折线上的空心圆点 不显示
                 smooth: true, //未知
                 smooth: 0.6, 
                 lineStyle: {
                     color: '#3296FA',
                     width: 1
                 },
             },
         ]
     };

     option && myChart.setOption(option);

 }
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值