Echarts快速入门案例

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_15901351/article/details/80194485

一、echarts介绍

ECharts是由百度团队开发的,可高度个性化定制的数据可视化图表库。它的底层依赖轻量级的Canvas类库ZRender,是一个纯JavaScript的图标库,兼容(IE8/9/10/11ChromeFirefoxSafari等)主流浏览器,可以运行在PC和移动设备上。

Echarts的特性

  1. 丰富的图表类型: 
    常用的有折线图,柱状图,散点图,饼图,盒形图,用于地理数据可视化的地图,热力图,线图等

  2. 多个坐标系的支持 
    直角坐标系(catesian,同 grid)、极坐标系(polar)、地理坐标系(geo)

  3. 移动端的优化 
    按需打包,体积缩小为 ECharts 2 的 40%

  4. 深度的交互式数据探索 
    支持在数据的各种坐标轴、维度进行数据过滤、缩放,以及在更多的图中采用这些组件

二、Demo案例(实现如下图表)

1.引入ECharts

<!-- 引入ECharts文件 -->

    <script src='echarts/echarts.js'></script>

2.准备一个具备宽高的DOM容器

<!-- ECharts准备一个具备大小(宽高)的DOM容器-->

<div id='main' style='width:600px;height:400px;'></div>

3.初始化一个echarts实例

  varmyChart = echarts.init(document.getElementById('main'));

4.指定图表的配置项和数据

var option = {

            title:{

                text:'EChars入门'

            },

            //提示框组件

            tooltip:{

                //坐标轴触发,主要用于柱状图,折线图等

                trigger:'axis'

            },

            //图例

            legend:{

                data:['销量']

            },

            //横轴

            xAxis:{

                data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

            },

            //纵轴

            yAxis:{},

            //系列列表。每个系列通过type决定自己的图表类型

            series:[{

                name:'销量',

                //折线图

                type:'line',

                data:[5, 20, 36, 10, 10, 20]

            }]

        };

5.显示图表(使配置数据信息生效)

//使用刚指定的配置项和数据显示图表

        myChart.setOption(option);

三、完整代码

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>ECharts入门</title>

</head>

<body>

   <!-- ECharts准备一个具备大小(宽高)的DOM容器-->

   <div id='main' style='width:600px;height:400px;'></div>

  <!-- 引入ECharts文件 -->

   <script src='echarts/echarts.js'></script>

   <script>

          //基于准备好的DOM,初始化echarts实例

        var myChart =echarts.init(document.getElementById('main'));

          //指定图表的配置项和数据

        var option = {

            title:{

                text:'EChars入门'

            },

            //提示框组件

            tooltip:{

                //坐标轴触发,主要用于柱状图,折线图等

                trigger:'axis'

            },

            //图例

            legend:{

                data:['销量']

            },

            //横轴

            xAxis:{

                data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

            },

            //纵轴

            yAxis:{},

            //系列列表。每个系列通过type决定自己的图表类型

            series:[{

                name:'销量',

                //折线图

                type:'line',

                data:[5, 20, 36, 10, 10, 20]

            }]

        };

        //使用刚指定的配置项和数据显示图表

        myChart.setOption(option);

   </script>

</body>

</html>

更多详情见echarts官网:http://echarts.baidu.com/tutorial.html
展开阅读全文

没有更多推荐了,返回首页