echarts-demo

1.数据可视化

数据可视化主要目的：借助于图形化手段，清洗有效地传达与沟通信息。

数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。

2.Echarts

（1）引入echarts.js

（2）准备一个呈现图表的盒子（要有宽高）

（3）初始化echarts实例对象

（4）准备配置项

（5）将配置项设置给echarts实例对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--步骤1：引入 ECharts 文件 -->
    <script src="lib/echarts.min.js"></script>
</head>

<body>
    <!-- 步骤2：准备一个呈现图表的盒子 -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
        // 步骤3：基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

　　　　　　var xDataArr = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月"]

　var yDataArr = [88, 92, 63, 90, 77, 94, 80, 72, 86]

        // 步骤4：指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
　　　　　　　　　　type:'category',

                data: xDataArr 
            },
            yAxis: {
                type: 'value' // 数值轴（会自动查找series中的data）
            },
            series: [{
                name: '销量',
                type: 'bar',  // bar柱状图，line折线图
                data: yDataArr 
            }]
        };

        // 步骤5：将配置项设置给echarts实例对象
        myChart.setOption(option);
    </script>
</body>

</html>

posted on 2020-12-24 11:39 稳住别慌阅读(905) 评论(0) 收藏举报