echarts option 体会

tooltip : 提示框，鼠标悬浮交互时的信息提示

 tooltip: {     //触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
     trigger: 'axis'

//'item':数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。

//'axis':坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用

  formatter:function(){},   //内容格式器：{string}（Template） | {Function}，支持异步回调见表格下方
   axisPointer:{ // 坐标轴指示器，坐标轴触发有效

         type: 'shadow' // 默认为直线，可选为：'line' | 'cross' | 'shadow'（立方柱） | 'none'(无)，指定type后对应style生效    cross (十字准星)      

       lineStyle: {
          color: '#48b',
           width: 2,
          type: 'solid'
        },

        }，

     formatter: "{a} <br/>{b} : {c}   //默认

formatter: '{b}', //提示标签格式
backgroundColor:"#ff7f50",//提示标签背景颜色
textStyle:{color:"#fff"} //提示标签字体颜色

              }

 

其中变量a、b、c、d在不同图表类型下代表数据含义为：

• 折线（区域）图、柱状（条形）图、K线图 : a（系列名称），b（类目值），c（数值）, d（无）
• 散点图（气泡）图 : a（系列名称），b（数据名称），c（数值数组）, d（无）
• 地图 : a（系列名称），b（区域名称），c（合并数值）, d（无）
• 饼图、雷达图、仪表盘、漏斗图: a（系列名称），b（数据项名称），c（数值）, d（饼图：百分比 | 雷达图：指标名称）
• 力导向图, 和弦图 :
  • 节点 : a（系列名称），b（节点名称），c（节点值）, d(节点类目索引)
  • 边 : a（系列名称），b（边名称，默认为大端节点名称-小端节点名称），c（link.value）, d(大端节点 name 或者 index), e(小端节点 name 或者 index)

 legend: 图例，每个图表最多仅有一个图例

legend: {
                orient: 'vertical',   //布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
                x:'left',             //位置
                data:['iphone3','iphone4','iphone5']  //图例内容数组，
                 },

dataRange值域选择，每个图表最多仅有一个值域控件

dataRange:{ //值域选择
  min:0,
  max:2500,
  x:'left',
  y:'bottom',
  text:['高','低'], //默认null
  calculable: true //默认false 是否启用值域漫游，
}

toolbox:工具栏

toolbox:{ // //工具栏
                 show: true,   //是否显示工具栏   默认false
                 orient : 'vertical',  //默认horizontal
                 x: 'right',
                 y: 'center',
                 //启用功能，目前支持feature见下，工具箱自定义功能回调处理
                 feature:{
                     mark : {show: true},  //辅助线标志，
                     dataZoom:{show:false},             //框选区域缩放
                     dataView : {show: true, readOnly: false},  //数据视图readOnly 默认数据视图为只读，可指定readOnly为false打开编辑功能
                      magicType:{show:false,  type: ['line', 'bar']},  //动态切换
                     restore : {show: true},  //还原
                     saveAsImage: {show:true}  //保存图片（IE8-不支持），
                 }   
              }

 

roamController:  //缩放漫游组件，仅对地图有效

 roamController:{   //缩放漫游组件，仅对地图有效
                 show: true,
                  x: 'right',
                  mapTypeControl: {  //指定漫游组件可控地图类型
                      'china': true
                 }
              },

 series: 驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据，其中个别选项仅在部分图表类型中有效

series:[{       //数据系列
               name: '数据',  //如启用legend，该值将被legend.data索引相关
               type: 'bar',    //'line'（折线图） | 'bar'（柱状图） | 'scatter'（散点图） | 'k'（K线图） 
                                'pie'（饼图） | 'radar'（雷达图） | 'chord'（和弦图） | 'force'（力导向布局图） | 'map'（地图）
               data: [5, 22, 8, 26, 10, 16]      //数据

               markPoint : { 　　 //系列中的数据标注内容
               data : [
                {type : 'max', name: '最大值'},
                {type : 'min', name: '最小值'}
                 ]
                },

                markLine : { //系列中的数据标线内容
                    data : [
                   {type : 'average', name: '平均值'}
                           ]
                      }

                 roam: true,   //是否开启滚轮缩放    地图
                 selectedMode : 'multiple',  //选中模式   单，多

                    itemStyle:{
                      normal:{label:{show:true}},
                      emphasis:{label:{show:true}}
                    },

           }]