echarts简单入门

echarts.js是一款基于HTML5的图形库，图形创建也比较简单，直接引入JS就行。

使用这个库的原因主要有三点：1.这个库是百度的，也一直在更新。2.项目文档比较详细，每个点的说明都很清楚，最重要的是中文，理解容易。3.这个库支持的图形丰富，而且可以直接切换图形，使用方便。

第一步：引入JS文件

<script type="text/javascript" src="js/echarts.js"></script>

第二步：准备一个放图标的容器

<div id="echartsmain" style="width: 600px; height: 400px;"></div>

第三步：设置参数，初始化图表

<script>
   //指定图表的配置和数据
   var option = { <br/>
        title:{
            text:'ECharts 数据统计'
        }，
        tooltip:{},
        legend:{
            data:['用户来源']
        }，
        xAxis:{
            data:['Android','IOS','PC','Other']
        },
        yAxis:{

        },
        series:[{
            name:'访问量',
            type:'line',    //line折线图，bar柱状图
            data:[500,200,360,100]
        }]
    };
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById("echartmain"));
    //使用指定的配置项和数据显示图表
    myChart.setOption(option);
  }
</script>

折线图.jpg

柱状图.jpg

饼图和折线图、柱状图配置上是有区别的，主要是参数和数据绑定，饼状图没有X轴和Y轴，数据绑定上采用的是value和那么对应的形式。

<script>
    //指定图表的配置和数据
    var option = {
        title:{
            text:'ECharts 数据统计'
        },
        series:[{
            name:'访问量',
            type:'pie',   //饼状
            data:[
                    {value:500,name:'Android'},
                    {value:200,name:'IOS'},
                    {value:400,name:'PC'},
                    {value:900,name:'Other'},
            ]
        }]
    };
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById("echartmain"));
    //使用指定的配置项和数据显示图表
    myChart.setOption(option);
</script>

饼状图.jpg

简单好用！