学习打卡day16&&echarts入门

echarts有两种部署方式，一种是使用CDN命令，将所需文件安装到目标文件中，“npm install echarts --save”，适合于已经学习入门了Vue。第二种是在github上下载js文件，通过引入js文件的方式。

echarts使用时要注意给对应的容器一个大小来承载，否则加载不出来；其次也有两种使用方式，一种是把代码放在body中，要注意这时候要把对应容器的标签写在js代码之前，否则会造成先加载js代码，后加载容器，页面只会显示出容器的样式，js代码相当于无效。

<script src="../static/js/echarts.min.js"></script>

<script type="text/javascript">
        let chartDom = document.getElementById('box');
        let myChart = echarts.init(chartDom);
        let option;

        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }
            ]
        };

        myChart.setOption(option);
</script>

另外一种是把代码放在head中内嵌或引入，这种方式要注意把代码写到函数内并且确保调用，否则也是加载不了的

<script src="../static/js/echarts.min.js"></script>

<script type="text/javascript">

        window.onload=function (){
        let chartDom = document.getElementById('box');
        let myChart = echarts.init(chartDom);
        let option;

        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }
            ]
        };

        myChart.setOption(option);
    }
</script>

程序员灯塔
转载请注明原文链接：学习打卡day16&&echarts入门