echarts.js--前端可视化数据图形

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，

兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），

底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

 

guanwang:http://echarts.baidu.com/index.html

 

使用起来也十分方便，只需引用js文件

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

 

首先创建一个内容区：

 

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

 

在script内配置参数，这里拿柱状图实例：

<script type="text/javascript">
        //指定图标的配置和数据
        var option = {
            title:{
                text:'ECharts 数据统计'
            },
            tooltip:{},
            legend:{
                data:['用户来源']
            },
            xAxis:{
                data:["伊芙丽","Only","乐町","秋水伊人","OECE"]
            },
            yAxis:{

            },
            series:[{
                name:'访问量',
//              type:图形形状----bar:柱状,line:折线
                type:'bar',
                data:[500,200,360,200,280]
            }]
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartmain'));

        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
    </script>

 

 

饼状图：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>echarts饼状图</title>
        <script type="text/javascript" src="js/echarts.common.min.js" ></script>
    </head>
    <body>
        <div id="chartmain" style="width:600px; height: 400px;"></div>
        <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('chartmain'));

        //使用制定的配置项和数据显示图表
        myChart.setOption({
             series : [{
                name: '访问来源',
                type: 'pie',
                roseType: 'angle',
    //          roseType: 'angle'------表示有层次感
                radius: '55%',
                data:[
                    {value:235, name:'视频广告'},
                    {value:274, name:'联盟广告'},
                    {value:310, name:'邮件营销'},
                    {value:335, name:'直接访问'},//设置某个扇形颜色
                    {value:400,name:'搜索引擎',itemStyle: {color: 'pink'}}
                ]
            }
        ],
            itemStyle: {
            　　// 阴影的大小
            　　shadowBlur: 200,
            　　// 阴影水平方向上的偏移
            　　shadowOffsetX: 0,
            　　// 阴影垂直方向上的偏移
            　　shadowOffsetY: 0,
            　　// 阴影颜色
            　　shadowColor: 'rgba(0, 0, 0, 0.5)',
            　　//图形颜色
            　　//color: '#c23531',
        　　}
    　　});
         </script>
    </body>
</html>

 

 

 

posted @ 2018-04-20 15:44  Luna666  阅读(3443)  评论(0)    收藏  举报