echarts入门教程（含小案例）

原创 2017年07月15日 16:25:42

标签：
echarts /

ECharts 入门教程

简介：

ECharts，缩写来自Enterprise Charts，商业级数据图表，是百度的一个开源的数据可视化工具。

特点：

1、开源软件，并且我们提供了非常炫酷的图形界面，特色是地图，另外还提供了柱状图、折线图、饼图、气泡图及四象限图等；

2，使用简单，在官网中为我们封装了js，只要会引用就会得到完美的展示效果；

3，种类多，echarts实现简单，各类图形都有；相应的模板，还有丰富的API及文档说明，非常详细；

4，兼容性好，基于HTML5，有着良好的动画渲染效果。

柱状图效果：

首先，创建一个div盒子来盛放我们即将绘制的柱状图。

然后，我们导入Echarts类库，做好准备。（如果没有echart类库，请到官网上下载）

最后，开始绘图。（重点是option里的设置，设置坐标轴、设置数据。）

// 基于准备好的dom，初始化echarts实例
function a1() {
    var echar=echarts.init(document.getElementById("first"));

    // 指定图表的配置项和数据
    var option={

//设置标题
title:{text:"柱状图"，subtext:\'柱状图哟柱状图\'

//设置提示
tooltip:{show:true},

//设置图例
legend:{data:["销量"]},//

//设置坐标轴

        xAxis:{
           data:["一月","二月","三月","四月"]
        },
        yAxis:{type:\'value\'},
//设置数据

        series:{
            name:"销量",
            type:"bar",
            data:[200,400,600,300]
        }
    };
    // 使用刚指定的配置项和数据显示图表。
    echar.setOption(option);
}

柱状图完整的代码：

<html>
<head>
    <title>Title</title>
    <script src="js/echarts.min.js"></script>
    <script>
        // 基于准备好的dom，初始化echarts实例
        function a1() {
            var echar=echarts.init(document.getElementById("first"));

            // 指定图表的配置项和数据
            var option={
                title:{text:"柱状图"},
                tooltip:{show:true},
                legend:{data:["销量"]},//
                xAxis:{
                   data:["一月","二月","三月","四月"]
                },
                yAxis:{type:\'value\'},
                series:{
                    name:"销量",
                    type:"bar",
                    data:[200,400,600,300]
                }
            };
            // 使用刚指定的配置项和数据显示图表。
            echar.setOption(option);
        }

    </script>
</head>
<body>
<div id="first" style="width: 500px;height: 500px"></div>
<button onclick="a1()">柱状图</button>
</body>
</html>

饼状效果图：

饼状图完整代码：

<html>
<head>
    <title>Title</title>
    <script src="js/echarts.min.js"></script>
    <script>

// 基于准备好的dom，初始化echarts实例
function a2(){
var echar=echarts.init(document.getElementById("first"));
// 指定图表的配置项和数据

           var option={
                title:{text:"饼状图"},
                tooltip:{
                    trigger:"item",
                    formatter:"{b}产值<br>{c}"
                },
                series:{

                        type:"pie",
                        data:[
                            {name:"郑州",value:900},
                            {name:"杭州",value:800},
                            {name:"南京",value:500}
                            ]

                }

            };

// 使用刚指定的配置项和数据显示图表。
            echar.setOption(option);
        }

    </script>
</head>
<body>
<div id="first" style="width: 500px;height: 500px"></div>
<button onclick="a2()">饼状图</button>
</body>
</html>

总结：认真敲，多敲多练习，多思考。（只是总结给自己的，不喜欢勿喷，谢谢！）

秒客网

echart

echarts入门教程（含小案例）

相关文章