echarts数据可视化知识点总结（一）

echarts数据可视化知识点(一)

1、使用步骤

（1）引入echarts.js文件

（2）准备一个呈现图表的盒子

（3）初始化echarts实例对象（参数，dom元素，决定图表最终呈现的位置）

var mCharts = echarts.init(document.querySelector('div'))

（4）准备配置项

（5）将配置项设置给echarts实例对象

2、常见图表

（1）柱状图

var option = {
//x轴的配置
xAxis:{
      type:'category',//
      data:xDataArr//数据可以提前定义好，在这里只需要赋值即可；
 }，
yAxis:{
   	  type:'value'//数值型
 },
series:[{
      name:'语文',
      type:'bar',
      //标记
      markPoint:{
      			data:[{type:'max',name:'最大值'}，{type:'min',name:'最小值'}]
      },
      //平均值
      markLine:{
              data:[{type:'average',name:'平均值'}]
      }，
      lable:{
            show:true,
            rotate:60,
            position:'inside'
      },
      barWidth:30%,
      data:yDateArr//提前定义好，在这里只需要赋值即可
 }]
}

常见效果：

标记：最大值、最小值、平均值

markPoint;

markLine;

显示：数值显示、柱宽度、横向柱状图

label；

barWidth；

更改x轴和y轴的角色；

（2）折线图

常见效果：

标记：

最大值、最小值、平均值、标注区间；

markPoint(最大值、最小值)；

markLine(平均值)；

markArea(标注区间)；

线条控制：

平滑(smooth)；

风格(lineStyle)；

填充风格：

areaStyle；

紧挨边缘：

boundaryGap；

缩放：脱离0值比例

scale；

堆叠图：

stack；

series:[
{
      name:'康师傅',
      data:yDataArr,
      stack:'all',
      type:'line'，
      markPoint:{
          data:[{type:'max'},{type:'min'}]
      },
      markLine:{
          data:[{type:'average'}]
      },
      markArea:{
         data:[[{xAxis:'1月'},{yAxis:'2月'}],[{xAxis:'7月'，yAxis:'8月'}]]
      }，
      smooth:true,
      lineStyle:{
          color:'',
          type:'dashed'
      },
      areaStyle:{
      	  color:''
      },
},
{
    type:'line',
    data:yDataArr,
    stack:'all',
    areaStyle:{}
}
],
xAxis:{
     type:'category',
     data:xDataArr,
     boundaryGap:false
},
yAxis:{
    type:'value',
    scale:true
}

（3）散点图

var option = {
 xAxis:{
   type:'value',
   scale:true
 },
 yAxis:{
   type:'value',
   scale:true
 },
 series:[
 {
   //type:'scatter',
   type:'effectScatter'
   data:axisData，
   //symbolSize:20,
   symbolSize: function(arg){
                var height = arg[0]/100;
                var weight = arg[1];
                //bmi = 体重kg /(身高m * 身高m) 大于28,就代表肥胖
                var bmi = weight /(height * height)
                if(bim > 28){
                return 20
                }
                return 5
    
   },
   itemStyle:{
      color:function(arg){
      		console.log(arg);//逻辑同上
      		return 'pink'
    }
   }
   
 }
 ]
}

常见效果：

气泡图效果：

散点的大小不同（symbolSize）；

散点的颜色不同（itemStyle）；

涟漪动画的效果:

type:effectScatter；

showEffectOn:‘emphasis’；

rippleEffect:{}；

（4）直角坐标系中的常见配置

直角坐标系图表：柱状图、折线图、散点图

配置1：网格grid

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

显示grid:show

gird的边框：borderWidth/borderColor

grid的位置和大小：left/top/right/bottom/width/height

grid:{
     show:true,//显示
     borderWidth:10,
     borderColor:'red',
     left:120,
     top:120,
     width:300,
     height:150
}

配置2：坐标轴axis

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

坐标系类型：type

value—数值轴，自动会从目标数据中读取数据；

category—类目轴,该类型必须通过data设置类目数据；

显示位置：position

xAxis:可取值为top或者bottom；

yAxis:可取值为left或者right；

配置3：区域缩放dataZoom

dataZoom用于区域缩放，对数据范围过滤，x轴和y轴都可以拥有

dataZoom是一个数组，意味着可以配置多个区域缩放器

var option = {
 dataZoom:[{
   type:'slider'
   type:'inside'//这种类型一般用不到
   xAxisIndex:0
 }
},{
   type:'slider',
   yAxisIndex:0,
   start:0,
   end:50
}]
}

类型：type

slider：滑块；

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

指明产生作用的轴：

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

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

指明初始状态的缩放情况：

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

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

（5）饼图

数据是由：name和value组成的对象所形成的数组

var option = {
 series:[
   {
      type:'pie',
      data:pieData//提前准备好的数据
      label:{//饼图文字的显示
        show:true//显示文字
        formatter:function(arg){
          return arg.name+'平台'+’arg.value+'元\n'+arg.percent + '%'
        }，
       radius:20,//饼图的半径 
       radius:‘20%’//百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置
       radius:['50%','75%']//第0个元素代表的是外圆的半径，第一个元素代表的是外圆的半径
       roseType:'radius'//南丁格尔图，饼图的每个区域半径是不同的，是会随着数值的变化而变化的
       selectedMode:'single'//选中的效果，能够将选中的区域偏离圆点一小段的距离
       selectedMode:'multiple'
       selectedOffset:30
     }
   }
 ]
}

常见数值：

显示数值：label.formatter；

圆环：这是两个半径radius:[‘50%’,‘70%’]；

南丁格尔图：roseType:‘radius’；

选中效果：

选中模式：selectedMode(single/multiple)；

选中便宜量：selectedOffset:30；

（6）地图

地图图表的使用方式：

百度地图API：需要申请百度地图的ak；

矢量地图：需要准备矢量地图数据；

//数据的获取
//在Ajax的回调函数中注册地图矢量数据echarts.registerMap('chineMap',矢量地图数据)
$.get('',function(ret){
   console.log(ret);//就是中国的哥哥省份的矢量地图数据
   echarts.registerMap('chinaMap',ret)；
   var option = {
   geo:{
     type:'map',
     map:'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致
     roam:true,//设置允许缩放以及拖动的效果
     label:{
       show:true//展示标签
     },
     zoom:1//设置初始化的缩放比例
     center:[87.617733,43.792818]//设置地图中心点的坐标，这个坐标值，可以通过地图矢量数据获取到的
     }
   }
   mCharts.setOption(option)
})

常用配置：

缩放拖动：roam；

名称显示：label；

初始缩放比例：zoom；

地图中心点：center；

常见效果：

显示某个区域；

不同城市颜色不同；

series :[
  {
    data:airData,
    geoIndex:0//将空气质量的数据和第0个geo配置关联在一起
    type:'map'
  }
],
visualMap:{
   min:0,
   max:300,
   inRange:['white','red']//控制颜色渐变的范围
   calculbale:true//出现滑块的效果
}

地图和散点图结合；

series:[
  {
    data:airData,
    geoIndex:0//将空气质量的数据和第0个geo配置关联在一起
    type:'map'
  }，
  {
    data:scatterDate,//配置散点的坐标数据
    type:'effectScatter',
    coordinateSystem:'geo'，//指明散点所使用的坐标系统，geo的坐标系统
    rippleEffect:{
      scale:10//设置涟漪动画缩放的比例
    }
  }
]

（7）雷达图

各个维度的最大值：

indicator:[{name:'易用性'，max:100},...]

var option = {
 radar:{
   indicator:dataMax,//配置各个维度的最大值
   shape:'circle'//配置雷达图最外层的图形 circle polygon
 },
 series:[
 {
  type:'radar',//此图表是一个雷达图
  label:{
    show:true//显示数值
  }，
  areaStyle:{},//将每一个产品的雷达图形成阴影的面积
   data:[
   {
      name:'华为手机'，
      value:[]
   },
   {
      name:'中兴手机'，
      value:[]
   }
   ]
 }
 ]
}

常用配置：

显示数值：label;

区域面积：areaStyle；

绘制类型：shape;

（8）仪表盘图

var option = {
  series:[
   {
       type:'guage',
       data:[
       {
       value:97，
       itemStyle:{//指针的样式
         color:'pink',//指针的颜色
       }
     },//每一个对象代表一个指针
     {
       value:85，
       itemStyle:{color:'green'}
     },
    ]，
      min:50//min max 控制仪表盘数值范围
   }
  ]
}

常见效果：

数值范围：max,min；

多个指针：增加data中的数组元素；

做个指针颜色差异：itemStyle

3、通用配置

（1）标题：title

文字样式：textStyle

标题边框：borderWidth/borderColor/borderRadius

标题位置：left/top/right/bottom

（2）提示：tooltip(提示框组件，用于配置鼠标滑过或点击图表时的显示框)

触发类型：trigger（item、axis）

触发时机：triggerOn（mouseover/click）

格式化：formatter（字符串、回调函数）

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

（3）工具按钮：toolbox（echarts提供的工具栏：内置有导出图片，数据视图，动态类型切换、数据区域缩放、重置五个工具）

toolbox:{
  feature:{
  saveAsImage:{},//导出图片
  dataView:{},//数据试图
  restore:{}，//重置
  dataZoom:{},//区域缩放
  magicType:{
  type:['bar','line']
  }//动态图表类型的切换
  }
}

（4）图例：legend

series:[
 {
     name:'语文',
     type:'bar',
     data:yDataArr1
 },
 {
     name:'数学'，
     type:'bar',
     data:yDataArr2
 }
]，
legend:{
 	data:['语文'，'数学']
}

legend:图例，用于筛选系列，需要和series配合使用

legend中的data是一个数组；

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