echarts折线图与散点图

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px"></div>
</body>
<script>
    var mcharts=echarts.init(document.querySelector('div'));
    var xdata=['1','2','3','4','5','6','7','8','9','10','11','12']
    var ydata1= [7099, 947, 1100,5500,2222,2155,1523,1154,2514,4444,4456,2145]
    var option={
        xAxis:{
            type:'category',
            data:xdata,
            boundaryGap:false
        },
        yAxis:{
          type:'value',
            scale:true
        },
        series:[
            {
                type:'line',
                name:'共公司',
                data:ydata1,
                label:{
                    show:true
                },
                markPoint:{
                    data:[
                        {type:'max'},
                        {type:'min'}
                    ]
                },
                markLine:{
                    data:[
                        {type:'average'}
                    ]

                },
                lineStyle:{
                    color:'red',
                    type:'dashed'//dotted,solid
                },
                areaStyle:{

                },
                markArea:{
                    data:[
                      [
                          {xAxis:'1'},
                          {xAxis:'5'}

                    ],
                    [
                        {xAxis:'7'},
                        {xAxis:'8'}

                    ]
                        ]
                },
                smooth:true
            }
        ]
        }
        mcharts.setOption(option)
</script>
</html>

 

 

 

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px"></div>
</body>
</html>
<script>
    var data= [
        [10.0, 8.04],
        [8.07, 6.95],
        [13.0, 7.58],
        [9.05, 8.81],
        [11.0, 8.33],
        [14.0, 7.66],
        [13.4, 6.81],
        [10.0, 6.33],
        [14.0, 8.96],
        [12.5, 6.82],
        [9.15, 7.20],
        [11.5, 7.20],
        [3.03, 4.23],
        [12.2, 7.83],
        [2.02, 4.47],
        [1.05, 3.33],
        [4.05, 4.96],
        [6.03, 7.24],
        [12.0, 6.26],
        [12.0, 8.84],
        [7.08, 5.82],
        [5.02, 5.68]
    ]
    var mcharts=echarts.init(document.querySelector('div'));
   var option={
       xAxis:{
          type:'value',
           scale:true
       },
       yAxis:{
          type:'value',
           scale:true
       },
       series:[
           {
               type:'effectScatter',
               rippleEffect: {
                 scale:5
               },
               showEffectOn:{
                  type:'emphasis'
               },
              // type: 'scatter',
               data:data,
               symbolSize:function (arg) {
                   console.log(arg)
                   return 20
               }
           }
       ]
   };
   mcharts.setOption(option)
</script>

 

posted @ 2021-01-24 10:16  好吗，好  阅读(501)  评论(0)    收藏  举报