echarts实现数据可视化

目录

1.数据可视化前言

1.1什么是数据可视化

1.2数据可视化的好处 

1.3数据可视化的实现方式

2.ECharts的基本使用

2.1ECharts的快速上手

2.2相关配置

3.ECharts常用图表

3.1柱状图

3.2折线图

3.3堆叠图

 3.4散点图

3.5直角坐标系常见配置

 3.6饼图

---

1.数据可视化前言 1.1什么是数据可视化

数据可视化，简单来说就是把数据以更加直观的方式进行呈现。

例如一组数据

我们可以用图表的形式形式呈现出来

1.2数据可视化的好处  清晰有效地传达与沟通信息更容易洞察隐藏在数据中的信息 1.3数据可视化的实现方式 报表类 Excel水晶报表商业智能BI Mircrosoft BIPower-BI编码类 ECharts.jsD3.js 2.ECharts的基本使用

官网地址：https://echarts.apache.org/zh/index.html

2.1ECharts的快速上手

步骤1：下载echarts.js文件

步骤2：引入echarts.js文件

 步骤3：准备一个呈现图表的盒子

步骤4：初始化echarts实例对象

// 初始化echarts实例对象
// 参数，dom 决定图表最终呈现的位置
var mCharts = echarts.init(document.querySelector('div'));

步骤5：准备配置项

 var option = {
            xAxis:{
                type: 'category',
                data:['小明','小红','小王']
            },
            yAxis:{
                type:'value'
            },
            series:[
                {
                    name:'语文',
                    type:'bar',
                    data:[70,92,87]
                }
            ]
        };

步骤6：将配置项设置给echarts实例对象

mCharts.setOption(option);

2.2相关配置

xAxis:直角坐标系中的x轴，如果type属性的值为category,那么需要配置data数据，代表在x轴呈现

yAxis:直角坐标系中的y轴，如果type属性配置为value，那么无需配置data，此时y轴会自动去series下找数据进行图表的绘制

series:系列列表。每个系列通过type决定自己的图表类型，data来设置每个系列的数据

3.ECharts常用图表 3.1柱状图

最终效果

标记：

最大值、最小值markPoint 平均值markLine

显示

数值显示label

柱宽度barwidth

横向柱状图

所谓横向柱状图，只需要让x轴的角色和y轴的角色互换一下即可。即xAxis的type设置为value，yAxis的type设置为category，并且设置data即可

通用配置

标题:title

提示框：tooltip

触发类型：trigger

   可选值有item、axis

触发时机:triggerOn

    可选值有mouseOver、click

格式化显示：formatter (官方文档有记载)

回调函数

tooltip:{
         // trigger:'item'
          trigger:'axis',
          triggerOn:'click',
         // formatter:'{b}的成绩是{c}'
          formatter: function(arg){
          console.log(arg);
          return arg[0].name+'的分数是'+arg[0].data;
      }
 }

工具按钮：toolbox

toolbox是ECharts提供的工具栏，内置有导出图片、数据视图、重置、数据区域缩放，动态类型切换五个工具

图例：legend

legend是图例，用于筛选类别，需要和series配合使用

legend中的data是一个数组legend中的data的值需要和series数组中某组数据的name值一致

legend:{
         data:['语文','数学']
        },

3.2折线图

实现效果

标注区间：markArea 

线条控制

平滑线条：smooth线条样式：lineStyle

填充风格：areaStyle

紧挨边缘：boundaryGap

boundaryGap是设置让起点从x轴的0坐标开始

缩放，脱离0值比例 

如果每一组数据之间相差较少，且都比0大很多，那么就可能出现这种情况

 配置scale,可以摆脱0值比例

scale配置

scale应该配置给y轴

yAxis:{
       type:'value',
       scale:true
       }

折线图更多的使用来呈现数据随时间的变化趋势

3.3堆叠图

实现效果 

 3.4散点图

实现效果

 散点图的常见效果

气泡图效果

要能够达到气泡图的效果，其实就是让每一个散点的大小不同，让每一个散点的颜色不同

 symbolSize 控制散点的大小itemStyle.color 控制散点的颜色    涟漪动画效果 type:effectScatter 将type的值从scatter设置为effectScatter就能够产生涟漪动画的效果rippleEffect 可以配置涟漪动画的大小

series:[
          {
            // type:'scatter',
            type:'effectScatter',
             rippleEffect:{
                   scale:10
             }
            }
        ]

 showEffectOn

showEffectOn可以控制涟漪动画在什么时候产生，它的可选值有两个：render和emphasis

render代表界面渲染完成就开始涟漪动画emphasis代表鼠标移过某个散点的时候，该散点开始涟漪动画 3.5直角坐标系常见配置 网格 grid

         grid是用来控制直角坐标系的布局和大小，x轴和y轴就是在grid的基础上进行绘制的

显示grid

        show:true

grid的边框

        borderWidth:10

grid的位置和大小

        left top right bottom width height

坐标轴

坐标轴分为x轴和y轴，一个grid中最多有两种位置的x轴和y轴

坐标轴类型 type

                value：数值轴

                category:类目轴

 坐标轴位置

                xAxis:可取值为top或者bottom

                yAxis:可取值为left或者right

区域缩放dataZoom

dataZoom用于区域缩放，对数据范围过滤，x轴和y轴都可以拥有，dataZoom是一个数组，意味着可以配置多个区域缩放器

 区域缩放类型 type

        slider：滑块

        inside：内置，依靠鼠标滚轮或者双指缩放

产生作用的轴

        xAxisIndex:设置缩放组件控制的是哪个x轴，一般写0即可

         yAxisIndex:设置缩放组件控制的是哪个y轴，一般写0即可

指明初始状态的缩放情况

        start：数据窗口范围的起始百分比

        end：数据窗口范围的结束百分比

 3.6饼图

实现效果

显示数值

label.show：显示文字label.formatter：格式化文字 

var option = {
            series:[
                {
                    type:'pie',
                    data:pieData,
                    label:{
                        show:true,
                        formatter:function(arg){
                            // console.log(arg);
                            return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%';
                        }
                    }
            ]
        }

 南丁格尔图

南丁格尔图指的是每一个扇形 半径随着数据的大小而不同，数值占比越大，扇形的半径也就越大

roseType:'radius' 

选中效果 

selectedMode:'multiple'

        选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single','multiple'，分别表示单选还是多选

selectedOffset:30

        选中扇区的偏移距离 

echarts官方参考文档：Apache ECharts