Echarts入门--弹框、标记线和标记点

来源：互联网发布：农村淘宝佣金设置编辑：程序博客网时间：2024/06/08 18:48

<!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>

关于弹框tooltip、markPoint和markLine详细设置见Echarts官网 –文档–项目配置手册
这里写图片描述

0 0