Echarts 图表折线图入门+轮播数据

var opt = { //图表数据源
            fj: {
                'xData': ["2017-01", "2017-02", "2017-03", "2017-04", "2017-05", "2017-07", "2017-10", "2017-12"],
                'yData': [6000, 8000, 4000, 16000, 12000, 14000, 8000, 6000]
            },
            zj: {
                'xData': ["2017-01", "2017-02", "2017-03", "2017-04", "2017-05", "2017-07", "2017-10", "2017-12"],
                'yData': [6000, 5000, 4000, 6000, 6000, 6000, 8000, 6000]
            }
        }
        indexCharts(opt.zj) //加载显示平均租金
        $(".average-price-btn").on('click', 'a', function() { //点击按钮切换
            var index = $(this).index();
            $(this).addClass('open').siblings().removeClass('open');
            switch (index) {
                case 0:
                    indexCharts(opt.fj) //平均房价
                    break;
                case 1:
                    indexCharts(opt.zj) //平均租金
                    break;
                default:
                    break;
            }

        })

        function indexCharts(opt) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('housing-price'));
            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#e31d1a'
                        },
                        formatter: function(params) {
                            return params[0].name + ': ' + params[0].value;
                        }
                    }
                },
                grid: {
                    left: '2%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    splitLine: {
                        show: true
                    }, //添加网格线
                    data: opt.xData
                },
                yAxis: {
                    type: 'value',
                },
                series: [{
                    name: '长沙市',
                    type: 'line',
                    stack: '长沙市',
                    itemStyle: {
                        normal: {
                            color: '#e31d1a'
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#f7e9e8'
                            }, {
                                offset: 1,
                                color: '#fff'
                            }])
                        }
                    },
                    data: opt.yData,
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            var timer = null;
            var count = 0,
                total = 7; // series.data.length
            function autoTip() {
                timer = setInterval(function() {
                    var curr = count % total;
                    myChart.dispatchAction({
                        type: 'showTip',
                        seriesIndex: 0, // 因为只有一组数据，所以此处应为0
                        dataIndex: curr
                    });
                    count += 1;
                }, 3000);
            }
            autoTip();
        }

布局

<div class="investment-data-right">
                <div class="f-clearfix">
                    <h2 class="c-content-title f-fl">房价走势
                        <span>
                            <i class="iconfont icon-dingwei"></i>长沙</span>
                    </h2>
                    <p class="average-price-btn f-fr">
                        <a href="javascript:;">平均房价</a>
                        <a class="open" href="javascript:;">平均租金</a>
                    </p>
                </div>
                <!-- 图表容器 -->
                <div id="housing-price" style=" 744px;height:480px;"></div>
            </div>

CSS

/*房价走势*/

.investment-data-right {
    float: right;
    width: 64.5%;
    height: 550px;
    padding: 20px 20px 20px 30px;
    border: 1px solid @color-b;
    .c-content-title {
        margin-bottom: 0;
    }
    .c-content-title span {
        padding-left: 20px;
        font-size: 14px;
        color: #8c8c8c;
        font-weight: normal;
    }
    .average-price-btn {
        box-sizing: content-box;
        width: 176px;
        height: 32px;
        margin-top: 6px;
        border: 1px solid @color-m;
        border-radius: 16px;
        a {
            float: left;
            width: 88px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            font-size: 14px;
        }
        a:first-child {
            border-bottom-left-radius: 16px;
            border-top-left-radius: 16px;
        }
        a:last-child {
            border-bottom-right-radius: 16px;
            border-top-right-radius: 16px;
        }
        a.open {
            color: #fefefe;
            background: @color-m;
        }
    }
}