Echarts.JS 2.2使用方法 5分钟学会

第一步:下载echarts.js,将其解压到项目下

Echarts官网

 第二步:新建echarts.html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>

<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:400px"></div>
</body>

第三步:引入echarts.js

<script type="text/javascript" src="./echarts-2.2.7/build/source/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: './echarts-2.2.7/build/dist'
            }
        });

         
    </script>

第四步 动态加载要使用的图表

  <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: './echarts-2.2.7/build/dist'
            }
        });

         require(
            [
                'echarts',
                'echarts/chart/line',   // 按需加载所需图表,如需动态类型切换功能,别忘了同时加载相应图表
                'echarts/chart/bar'
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById('main'));
                var option = {
                    ...
                }
                myChart.setOption(option);
            }
        );
    </script>

第五步:选择你要用什么图表

这里我选择了标准折线图

点进去可以看到它的实例option

把它的option拷贝到自己的html里,就可以用了

实际项目中,图表的属性和数据根据需求去设置就好了,可以参照它的实例去改,换成自己想要的就行了

不懂参数的话看Echarts参考手册

猜你喜欢

转载自blog.csdn.net/qq_33655674/article/details/81532520
今日推荐