zoukankan      html  css  js  c++  java
  • 百度echarts折线图使用示例

    引入echarts.js
    <script src="${js}/echarts.min.js"></script>
     
    定义一个容器存放echarts图表
    <div id="charts" style="100%;"></div>
    
     var myChart=echarts.init(document.getElementById("charts"));
        option = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['今日','昨日','前日']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                //x轴间隔3个单位显示
                axisLabel :{
                    interval: 3
                },
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'今日',
                    type:'line',
                    data:[]
                },
                {
                    name:'昨日',
                    type:'line',
                    data:[]
                },
                {
                    name:'前日',
                    type:'line',
                    data:[]
                }
            ]
        };
        myChart.setOption(option);
    
        function getCharts(type,tag_id) {
            var hoursList=[];
            var todays=[];
            var yesterdays=[];
            var beforeYesterdays=[];
            $.ajax({
                url:"/track/stat/ajax/getcharts",
                data:{"tag_id":tag_id,"type":type},
                success:function(data){
                    $.each(data.hoursList,function(n,value){
                        hoursList.push(value);
                    });
    
                    $.each(data.todays,function(n,value){
                        todays.push(value);
                    });
    
                    $.each(data.yesterdays,function(n,value){
                        yesterdays.push(value);
                    });
    
                    $.each(data.beforeYesterdays,function(n,value){
                        beforeYesterdays.push(value);
                    });
    
                    myChart.setOption({
                        title: {
                            text: ''
                        },
                        xAxis: {
                            data: hoursList
                        },
                        series: [
                            {
                                // 根据名字对应到相应的系列
                                name: '今日',
                                data: todays
                            },
                            {
                                name: '昨日',
                                data: yesterdays
                            },
                            {
                                name: '前日',
                                data: beforeYesterdays
                            }
                        ]
                    });
                }
            });
        };
    

      

    文末小福利免费视频资源网站www.sousuohou.com
  • 相关阅读:
    Android Studio快速导入项目
    梦断代码阅读笔记01
    Python词云生成
    Python 数据处理
    Android studio 自定义Dialog
    Android studio Activity的跳转和数据传递
    Android studio Handler消息处理2
    2.9 react组件中使用key作为prop属性命名报错
    2.3 上下margin值合并
    2.2 快速认识虚拟dom
  • 原文地址:https://www.cnblogs.com/vicF/p/8037940.html
Copyright © 2011-2022 走看看