Echarts-数据可视化工具

一、认识 ECharts

ECharts,缩写来自 Enterprise Charts,商业级数据图表,是百度的一个开源的数据可视化工具,一个纯 Javascript 的图表库,能够在 PC 端和移动设备上流畅运行,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的 Canvas 库 ZRender,ECharts 提供直观,生动,可交互,可高度个性化定制的数据可视化图表。

创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。Echarts在行业内应用特别广泛。

二、ECharts 有哪些特点

1,ECharts 属于开源软件,并且我们提供了非常炫酷的图形界面,特色是地图,另外还提供了柱状图、折线图、饼图、气泡图及四象限图等;
2,ECharts 使用简单,在官网中为我们封装了 JS,只要会引用就会得到完美的展示效果;
3,ECharts 种类多,ECharts 实现简单,各类图形都有;相应的模板,还有丰富的 API 及文档说明,非常详细;
4,ECharts 兼容性好,基于HTML5,有着良好的动画渲染效果;

三、ECharts 官网,很好很详细

  • ECharts 官网
  • option中各配置项说明
  • Echarts官网使用教程

四、简单应用

下面通过几个简单的示例直观的了解一下Echarts

  • 柱状图示例
    
    
    
        
        bar
        
        
    
    
    
    
    柱状图.png
  • 折线图示例
    
    
    
        
        line
        
         
    
    
        
    
    折线图.png
  • 可更换不同的主题(theme)
    
    
    
    深色主题.png

我们可以看到,这几步里只有 option 这一步比较复杂,有好多配置项,这就是显示图形内容的主要部分了,简单看一下都有哪些配置项以及各个配置项的含义。

  • title(标题组件)
    // 指定图表的配置项和数据
    var option = {
        title: {
            show:true,
            text: 'ECharts 入门示例',  // 【标题】
            subtext:'学习ECharts',  // 【副标题】
            left:'left', // 【数字就是像素值 ,也可以是 center left right这种值】
            borderColor:'red',  // 【边框】
            borderWidth:5,
            textStyle:{
                fontSize:20
            }
        },
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {
                    show: true
                }
            }
        },
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
    
    标题.png
  • toolbox(工具箱组件)
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例',
        },
        toolbox: {  // 【工具箱】
            show: true,
            feature: {
                dataView:{
                    show:true
                },
                restore:{
                    show:true
                },
                dataZoom:{
                    show:true
                },
                saveAsImage: {
                    show: true
                },
                magicType: {  // 【视图类型切换,柱状图或折线图。。。等之间的切换】
                    type: ['line', 'bar']
                }
            }
        },
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
    
    工具箱.png
  • tooltip(弹窗提示组件)
    var option = {
        title: {
            text: 'ECharts 入门示例',
        },
        tooltip: {  // 【根据鼠标移动显示提示,显示更直观】
            trigger: 'axis',
            // formatter: "{a} 
    {b} : {c}" // 【字符串模板,a、b、c 分别代表不同的含义,详见官网】 }, legend: { data: ['销量'] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] };
    弹窗提示.png
  • mark(标记)
    var option = {
        title: {
            text: 'ECharts 入门示例',
        },
    tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'line',
            data: [5, 20, 36, 10, 10, 20],
            markPoint: {  // 【标记点】
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值',symbol:'arrow'}  // 【符号的形状,大小,旋转角度,都可以自己定义】
                ]
            },
            markLine: {  // 【标记线】
                data: [
                   {type: 'average', name: '平均值'}
                ]
            }
        }]
    };
    
    标记.png
  • pie饼状图
    // 指定图表的配置项和数据
    var option = {
        title : {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} 
    {b} : {c} ({d}%)" // 【字符串模板,a、b、c分别代表不同的含义】 }, legend: { // 【图例:在某一位置放置,可配置。可以打开或关闭某一项。】 orient: 'vertical', left: 'left', data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, 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:'搜索引擎'} ] } ] };
    饼图.png
  • gauge仪表图
    
    
    仪表图.png
  • radar雷达图
    option = {
        title: {
            text: '基础雷达图'
          },
        tooltip: {},
        legend: {
            data: ['预算分配(Allocated Budget)', '实际开销  (Actual Spending)']
        },
        radar: {
            // shape: 'circle',
            indicator: [
               { name: '销售(sales)', max: 6500},
               { name: '管理(Administration)', max: 16000},
               { name: '信息技术(Information Techology)', max: 30000},
               { name: '客服(Customer Support)', max: 38000},
               { name: '研发(Development)', max: 52000},
               { name: '市场(Marketing)', max: 25000}
            ]
        },
        series: [{
            name: '预算 vs 开销(Budget vs spending)',
            type: 'radar',
            // areaStyle: {normal: {}},
            data : [
               {
                    value : [4300, 10000, 28000, 35000, 50000, 19000],
                    name : '预算分配(Allocated Budget)'
              },
                 {
                    value : [5000, 14000, 28000, 31000, 42000, 21000],
                    name : '实际开销(Actual Spending)'
                }
            ]
        }]
    };
    
    雷达图.png
  • 还可配置多个y轴
    option = {
        tooltip: {
            trigger: 'axis'
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            data:['蒸发量','降水量','平均温度']
        },
        xAxis: [
            {
                type: 'category',
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            }
        ],
     yAxis: [
            {  // 第一个y轴
                type: 'value',
                name: '水量',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value} ml'
                }
            },
            {  // 第二个y轴
                type: 'value',
                name: '温度',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                    formatter: '{value} °C'
                }
            }
        ],
    series: [
            {
                name:'蒸发量',
                type:'bar',
               data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
            },
            {
                name:'降水量',
                type:'bar',
                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
            },
            {
                name:'平均温度',
                type:'line',
                yAxisIndex: 1,
                data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }
        ]
    };
    
    多个y轴.png
  • dataZoom:用于区域缩放,x轴数据量大时可配置。
  • dataRange:值域漫游。

还有一些,比如散点图,k线图,地图 等等,就不一一介绍了,用到的时候还是去官网查阅。

五、相对免费的视频资源

  • 还可以结合一些 相关视频官网 辅助我们更好更快地学习并应用Echarts。
  • 网易云课堂(163邮箱登录)
  • 慕课网(登录观看)
  • 哔哩哔哩
  • 数据异步展示

你可能感兴趣的:(Echarts-数据可视化工具)