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

luna666 2021-12-15 原文

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>