Echarts入门--弹框、标记线和标记点_echarts中type为text的超链接弹窗-CSDN博客

本文链接：https://blog.csdn.net/zhongshijun521/article/details/72036926

<!DOCTYPE html>
<html>
<head>
    <title>bar</title>
    <script type="text/javascript" src="../echarts.min.js"></script>
</head>
<body>
  <div id="main" style="width:900px;height: 400px;"></div>
  <script type="text/javascript">
    //基于准备好的demo,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    //指定图表的配置项和数据
    var option = {
        // 标题
        title:{
            text:'Echarts 入门实例',

        },
      // 工具箱
      toolbox:{
        show:true,
        feature:{
            // 数据视图
            dataView:{
                show:true
            },
            // 还原
            restore:{
                show:true
            },
            // 区域缩放
            dataZoom:{
                show:true
            },
            // 保存图片
            saveAsImage:{
                show:true
            },
            //动态类型切换
            magicType:{
                type:['line','bar']
            }
        }
      },
      // 弹框
      tooltip:{
        trigger:'axis'
      },
      // 图例
      legend:{
        data:['销量']
      },
      // x轴
      xAxis:{
        data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      // y轴
      yAxis:{},
      // 数据
      series:[{
        name:'销量',
        // 直方图
        type:'line',
        data:[5,20,36,10,10,20],
        //标记点
        markPoint:{
          data:[
            {type:'max',name:'最大值'},
            {type:'min',name:'最小值',symbol:'diamond'}//标记的图形
          ]
        },
        //标记线
        markLine:{
          data:[
            {type:'average',name:'平均值'}
          ]
        }
      }
      ]
    }
    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
  </script>
</body>
</html>