echarts 百度图表

手册说明 http://echarts.baidu.com/option.html

3.0版本加了很多新属性可以看以上链接  此文用的3.x版本

第一步 引入

<script src="${baseURL}/js/3rd-plug/echarts/echarts.common.min.js" type="text/javascript"></script>

第二步 页面加个div框  设置id  js获取dom  id进行初始化

myChart = echarts.init(document.getElementById('chartsdiv'));

第三部 填入数据进行渲染

function refeshCharts(areaFangjiaList){
        var xcategory = [];
        var ysaveprice = [];
        var esavgprice = [];
        var xftotal = 0.0;
        var esftotal = 0.0;
        $(areaFangjiaList).each(function(){
            xcategory.push(this.FDATE)
            ysaveprice.push(this.FisrtHandAvgPrice)
            esavgprice.push(this.SeondHandAvgPrice)
        })
        option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:[,'二手均价','一手均价']
            },
            xAxis: [
                {
                    type: 'category',
                    data: xcategory
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '成交均价（元）',
                    axisLabel: {
                        formatter: '{value} 元'
                    }
                },
            ],
            series: [
                {
                    name:'二手均价',
                    type:'line',
                    data:esavgprice
                },
                {
                    name:'一手均价',
                    type:'line',
                    data:ysaveprice
                }
            ]
        };
        myChart.setOption(option);
    }

ps:缺点：手机端y轴文字太长显示不全文字，需要设置offset偏移