echarts-2021-使用

1、基本使用
先引入echarts
然后创建一个元素用来装载echarts图表
echarts.init() 方法初始化 echarts 实例
最后设置配置项和数据 option，使用 setOption() 方法根据数据和配置项来显示图表即可

<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app" style="margin-left: 300px;"> <div id="main" style="width: 600px;height: 600px;"></div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.common.js"></script> <script> var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; 
    option = {
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
        }]
    };

    option && myChart.setOption(option);
</script>
</body>
posted @ 2021-12-13 10:49  迷彩程序猿  阅读(59)  评论(0)    收藏  举报