echarts图表小知识

echarts 图表基础
trigger:'item/axis'

type:'category/value'

calculable:'true/false'//echarts3.0中将拖拽重计算这个属性去掉了

dataRange与visualMap

boundaryGap:'false/true' //类目起始和结束两端空吧策略，true留空，false顶头    [0,0]-->差额百分比

orient:'horizontal/vertical'//布局方式

feature:{
    //写工具组件
}

mark 标记

stack 堆积

tooltip:{
      trigger:'item/axis',
      formatter:'{a}
{b}:{c} ({d}%)'    //a(系列名称)，b(数据项名称)，c(数值)，d(饼图百分比|雷达图：指标名称)
       showDelay:0,
       axisPointer:{
             type:'cross',
              lineStyle:{
                     type:'dashed',
                     width:1
                  }
          }
}

avoidLabelOverlap:false,//使position定位在一起 重叠的标签分散开来

emphasis:{}//鼠标移动到图标时显示的内容  悬浮样式

散点图x轴和y轴可都为value，data使用坐标格式
目前x轴为time，data格式不会？？

scale:true,//是否脱离0值比例。设置成true后坐标刻度不会强制包含常刻度，在双数值轴的散点图中比较有用。

dataView:{
   optionToContent:function(opt){

    }
}

x轴y轴定制：
axisLabel:{
     formatter:'{value}cm'//value是固定表示数轴上的值  和type没关系
      }

splitNumber：4,  //分割段数，默认为5

symbol   //数据显示图标样式
symbolsize   //数据显示图标大小，应用于气泡图

radar  //雷达图

polar:[{}]  //极坐标   
xAxis，yAxis //直角坐标

radar:[  //echart3.0新加组件，只适
             应于雷达图
   { 
       indicator:[
                   //雷达图的指示器，
                     用来指定雷达图中
                   的多个变量（维度）
          原本是echarts2.0中polar中
           {}
       ]   }
]

radarIndex：//雷达图中实现数据的归属

readOnly  //O要大写

echarts2.0中的mapType和echarts3.0中的map一样

mapType:'china',//地图类型，支持world，china及全国34个省市自治区，省市自治区的mapType直接使用简体中文，如：上海，北京

roma:false,//是否开启滚轮缩放和拖拽漫游，默认为false（关闭），其它有效输入为true（开启），'scale'(仅开启滚轮缩放)，'move'（仅开启拖拽漫游）

mapValueCalculation:'sum',//地图数值计算方式，默认为加和，可选
为：'sum'(总数)|'average'(均值)

funnel 漏斗图

worldCloud：词云   //在echarts3.0中将词云去掉了，制作词云就要引入插件了。

textRotation:[0,45,90,-45],//文字旋转角度可选列表，默认会随机从水平（0）和垂直（90）两个方向中选择，可以设置多个可选角度，例如[0,-45,45,90]

字体大小自动计算配置，默认开启自动计算，程序会根据每个数据的  value大小以及画布的大小控制字体大小以达到最佳的显示效果。minSize可以强制最小字体，关闭的时候字体大小取itemStyle.normal.textStyle.fontSize.建议开启
 autoSize:{
         enable:true,
         minSize:14
  },

gauge：仪表盘

detail:{
               formatter:'{value}%'
 },   //仪表盘中间显示信息  处于series中。

z   //控制图形的前后顺序

radius：'35%'   //仪表盘半径

startAngle:225
endAngle:-45    //仪表盘起始、终          止角度

offsetCenter: [0, '-40%'],//相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。

pointer:{}  //仪表盘指针样式设置

toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。

echarts图表高级：
1.图表混搭
2.自定义主题
3.异步数据加载
4.事件与行为

1-混搭

yAxisIndex:1,//yAxis坐标轴数组的索引，指定该系列数据所用的纵坐标轴

echarts.connect([mychart1,mychart2]);//将mychart1和mychart2关联起来   其实只是把相同图例数据关联起来

setTimeout(function () {
    window.οnresize=function () {
             mychart1.resize();
             mychart2.resize();
         }
   },200);//当窗口大小发生变化是调整图形布局

tiled  //平铺

mychart.showLoading();//显示loading。。。。的加载动画

mychart.hideLoading();//隐藏loading。。。。动画

position:function (point,params,dom,rect,size) {
       //固定在顶部
       return[point[0],'10%'];
  }  //可以是数组或回调函数

echarts支持常规的鼠标事件类型，
包括：'click','dbclick','mousedown'
'mousemove','mouseup','mouseover','mouseout'  事件
如：
mychart.on('click',function(params){  })

//如何区分鼠标点击到哪里？？？？
mychart.on('click',function(params){
    if(params.componentType==='markPoint'){
        //点击到了markPoint上
        if(params.seriesIndex===5){
            //点击到了index为5的series的markPoint上。
        }
    }
    else if(params.componentType==='series'){
        if(params.seriesType==='graph'){
            if(params.dataType==='edge'){
                //点击到graph的edge（边）上。
            }
            else{
                //点击到了graph的node（节点）上。
            }
        }
    }
})；

markPoint{}
markLine{}

 markPoint: {
      data: [
          {type: 'max', name: '最大值'},
           {type: 'min', name: '最小值'}
        ]
  },
markPoint: {
      data: [
          {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
       ]
 },

markLine: {
   data: [
      {type: 'average', name: '平均值'}
    ]
 }
markLine: {
  data: [
     {type: 'average', name: '平均值'},
      [{
            symbol: 'none',
            x: '90%',
            yAxis: 'max'
        }, {
             symbol: 'circle',
             label: {
                   normal: {
                        position: 'start',
                        formatter: '最大值'
                     }
                },
                type: 'max',
                name: '最高点'
          }]
     ]
}

params.componentType  //点击的数据种类：series、markPoint、markLine

//图例开关的行为只会触发legendselectchanged事件
mychart.on('legendselectchanged',function (params) {
        console.log(params);
         //获取点击图例的选中状态
        var isSelect=params.selected[params.name];
          //在控制台中打印
        console.log((isSelect?'选中':'取消选中了')+'图裂'+params.name);
            //打印所有图例的状态
         console.log(params.selected);
   })

selectedMode：//图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
除此之外也可以设成 'single' 或者 'multiple' 使用单选或者多选模式。

geo:{}   //地理坐标系组件。

type: 'lines',//用于带有起点和终点信息的数据的绘制，主要用于地图上的航线、路线的可视化

1-navigateMap：航行路线图、看看

curveness: 0.2//边的曲度，支持从0到1的值，值越大曲度越大

type: 'effectScatter',//带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出

graph：//图表

color:'transparent',//透明

detect  //探测器

async:false,//=======同步

dataZoom: [
        {
            type: 'inside'
        }
    ],

concentration  浓度

 

注意： 一般来说，axisPointer 的具体配置项会配置在各个轴中（如 xAxis.axisPointer）或者 tooltip 中（如 tooltip.axisPointer）。

但是这几个选项只能配置在全局的 axisPointer 中：axisPointer.triggerOn、axisPointer.link。