machinecat520
/
zj-Exercise


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
							<!DOCTYPE html>
<html lang="en">
<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>01.ECharts的快速上手</title>
    <!-- 步骤1：引入echarts.js文件 -->
    <script src="lib/echarts.min.js"></script>

    <!-- 
        步骤1：引入echarts.js文件
        步骤2：准备一个呈现图表的盒子
        步骤3：初始化echar实例对象
        步骤4：准备配置项
        步骤5：将配置项设置给echarts实例对象
     -->
</head>
<body>
    <div>
            <!-- 步骤2：准备一个呈现图表的盒子 -->
        <div class="box" style="width: 600px;height: 400px"></div>
        <script>
            //步骤3：初始化echar实例对象
            //参数：dom，决定图表最终呈现的位置
            var mCharts = echarts.init(document.querySelector('.box'))
            //步骤4：准备配置项
            var option = {
                xAxis:{
                    type:'category',
                    data:['小明','小红','小强']
                },
                yAxis:{
                    type:'value'
                },
                series:[
                    {
                        name:'语文',
                        type:'bar',
                        data:[70,80,90]
                    }
                ]
            }
            //步骤5：将配置项设置给echarts实例对象
            mCharts.setOption(option)
        </script>
    </div>
</body>
</html>