Echarts入门--直方图、折线图

来源：互联网发布：目标知乎编辑：程序博客网时间：2024/06/07 04:58

进入Echarts官网下载组件

<!DOCTYPE html><html><head>    <title>bar</title>    <script type="text/javascript" src="../echarts.min.js"></script></head><body>  <div id="main" style="width:700px;height: 400px;"></div>  <script type="text/javascript">    //基于准备好的demo,初始化echarts实例    var myChart = echarts.init(document.getElementById('main'));    //指定图表的配置项和数据    var option = {        // 标题        title:{            text:'Echrts 入门实例'        },      // 工具箱      toolbox:{        show:true,        feature:{            // 保存图片            saveAsImage:{                show:true            }        }      },      // 图例      legend:{        data:['销量']      },      // x轴      xAxis:{        data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]      },      // y轴      yAxis:{},      // 数据      series:[{        name:'销量',        // 直方图        type:'bar',        data:[5,20,36,10,10,20]      },         {            name:'产量',            //折线图            type:'line',            data:[10,25,40,20,25,30]          }      ]    }    // 使用刚指定的配置项和数据显示图表    myChart.setOption(option);  </script></body></html>

这里写图片描述

0 0