Echarts，为图表而生--入门

最新推荐文章于 2024-05-09 10:19:41 发布

jaymo666

最新推荐文章于 2024-05-09 10:19:41 发布

阅读量249

点赞数 1

分类专栏：其它文章标签： javascript Echarts 图表 H5 百度

本文链接：https://blog.csdn.net/qq_32389745/article/details/53858341

版权

其它专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Echarts入门教程

【简介】ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

【功能】支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

这里写图片描述

【牛刀小试】来一个简单的案例
先预览一下效果

这里写图片描述

1、在简单的html中引入js文件

<head>
    <meta charset="utf-8">
    <title>Charts demo</title>
     <script src="js/esl.js"></script>
</head>
<body>
</body

2、为图形准备容器

 <head>
    <meta charset="utf-8">
    <title>Charts demo</title>
     <script src="js/esl.js"></script>
</head>
<body>

    <div id="picturePlace"></div>

</body>

3、模块导入js

 <head>
    <meta charset="utf-8">
    <title>Charts demo</title>
     <script src="js/esl.js"></script>
</head>
<body>
    <div id="picturePlace"></div>
     <script type="text/javascript">
        // 路径配置
        require.config({
            paths:{ 
                'echarts' : 'js/echarts',
                'echarts/chart/pie' : 'js/echarts'
            }
        });
    </script>
</body>

4、添加显示数据

<head>
    <meta charset="utf-8">
    <title>Charts demo</title>
     <script src="js/esl.js"></script>
</head>
<body>
    <div id="picturePlace"></div>
     <script type="text/javascript">
        // 路径配置
        require.config({
            paths:{ 
                'echarts' : 'js/echarts',
                'echarts/chart/pie' : 'js/echarts'
            }
        });

         // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('<span style="font-family:SimSun;">picturePlace</span><span style="font-family:FangSong_GB2312;">'</span>)); 

                option = {
                        title : {//中间的标题
                            text: '某站点用户访问来源',
                            subtext: '纯属虚构',
                            x:'center'
                        },
                        tooltip : {//跟随鼠标的提示框
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"//提示框内容的形式
                        },
                        legend: {//左边的图例
                            orient : 'vertical',//竖直排版
                            x : 'left',
                            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                        },
                        toolbox: {
                            show : true,//显示跟随鼠标的提示框
                            feature : {//右上角的图例
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,//外围的圆圈
                        series : [
                            {
                                name:'访问来源',
                                type:'pie',//饼状图
                                radius : '55%',//半径的大小
                                center: ['50%', '60%'],//位置
                                data:[
                                    {value:335, name:'直接访问'},
                                    {value:310, name:'邮件营销'},
                                    {value:234, name:'联盟广告'},
                                    {value:135, name:'视频广告'},
                                    {value:1548, name:'搜索引擎'}
                                ]
                            }
                        ]
                    };

                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>