Echarts入门--常用工具箱组件

来源：互联网发布：.tv域名前景编辑：程序博客网时间：2024/04/29 06:41

这里写图片描述

<!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']            }        }      },      // 图例      legend:{        data:['销量']      },      // x轴      xAxis:{        data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]      },      // y轴      yAxis:{},      // 数据      series:[{        name:'销量',        // 直方图        type:'bar',        data:[5,20,36,10,10,20]      }      ]    }    // 使用刚指定的配置项和数据显示图表    myChart.setOption(option);  </script></body></html>

这里写图片描述

0 0