ECharts动态生成图表的一些问题

最近由于一个比赛的需要，接触了Echarts这个JS图表的开源框架，这个框架非常方便= =，但在一开始的时候遇到了一些困难，其实就是JS文件的引入，现在想想自己也是蠢的不行，官方给的第一种配置方法虽然是推荐的，需要用JS来配置一下，但由于比赛这个小事- -也没必要那样吧，所以我就采用了第二种形式，直接把下载下来的echarts-all.js加入我的项目中，在首页引入就好了。我测试的第一个图表的数据已经没有了，下面是图表生成的操作。。

1.准备一个div，设置id可选宽高

<span style="font-size:18px;"><div id="main" style="height:400px;"/>


</span>

2.数据准备，即官方文档中提到的option（这里引用文档的折线图的option）

<span style="font-size:18px;">
option = {
    title : {
        text: '未来一周气温变化',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['最高气温','最低气温']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                formatter: '{value} °C'
            }
        }
    ],
    series : [
        {
            name:'最高气温',
            type:'line',
            data:[11, 11, 15, 13, 12, 13, 10],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'最低气温',
            type:'line',
            data:[1, -2, 2, 5, 3, 2, 0],
            markPoint : {
                data : [
                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        }
    ]
};


<span style="font-size:24px;">3.生成图表
</span></span><pre name="code" class="javascript"><span style="font-size:18px;">var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(dianya.option);</span>

这样就可以生成一个折线图，效果图不再上，其他的一些属性参照百度提供的API可以增加项目


在后续的调试过程中，发现图表并不能随屏幕的变化而变化，即不能形成响应式的布局。这个问题困扰了我好久，最后还是在百度上解决了，解决方法是在上面的setOption后添加这样一句

window.οnresize=myChart.resize

The end.