引用echar显示图形

来源:互联网 发布:window10引导ubuntu 编辑:程序博客网 时间:2024/06/05 11:00

配置项说明地址 http://echarts.baidu.com/option.html#title

1.下载js放入项目中,引入js

<script type="text/javascript" src="__PUBLIC__/lib/echarts/echarts.js"></script>

2.在html页面中引用

<div class="each-item" >
<div id="visit_echar" style="height:450px;margin-top: 10px;"></div>
 </div>

<script>

    var visitChar = echarts.init(document.getElementById('visit_echar'));
    var visitOption={
    tooltip: {
           
       },
       legend: {
           left: 'left',
           data: ['登陆量', '浏览量']
       },
       xAxis: {
           type: 'category',
           name: 'x',
           data: ['前日', '昨日', '今日']
       },
      
       grid: {
               left: 50, right: 50, top:80, bottom:40
       },
       
      yAxis: {
               show: true,
               splitNumber: 5,
               max:{$zuceNum}    
           },
       series: [
           {
               name: '登陆量',
               type: 'line',
               data: {$LoginData|json_encode}
           },
           {
               name: '浏览量',
               type: 'line',
               data: {$visitData|json_encode}
           }
       ]
   
   
        };
    visitChar.setOption(visitOption);

</script>

原创粉丝点击