百度-Echarts-学习

标签：

//路径配置 require.config({     paths:{         ‘echarts‘ : ‘http://echarts.baidu.com/build/echarts‘,         ‘echarts/chart/bar‘ : ‘http://echarts.baidu.com/build/echarts‘     } });

// 使用 require(     [         ‘echarts‘,         ‘echarts/chart/pie‘ // 使用柱状图就加载bar模块，按需加载     ],     function (ec) {         // 基于准备好的dom，初始化echarts图表         var myChart = ec.init(document.getElementById(‘pTable‘));                 var option = {              tooltip : {//鼠标悬浮的提示信息                  trigger: ‘axis‘//触发事件的方式，axis和item方式。item展现的悬浮窗口仅与该item有关的信息，而axis则展示所有的信息              },              toolbox: {                  show : false,                  y: ‘bottom‘,                  feature : {//工具栏展示出的内容                      mark : {show: true},                      dataView : {show: true, readOnly: false},                      magicType : {show: true, type: [‘line‘, ‘bar‘, ‘stack‘, ‘tiled‘]},                      restore : {show: true},                      saveAsImage : {show: true}                  }              },              calculable : false,//是否拖拽              legend: {//图列，如每种颜色表示什么               data : [‘有预警‘,‘无预警‘,‘水位预警‘,‘渗流预警‘,‘渗压预警‘,‘位移预警‘]              },              xAxis : [                  {                      type : ‘category‘,//指出X轴为指定意义，category表示为数据的类型（含义），value表示数值                      splitLine : {show : false},//分割线                      name:‘工程规模‘,                      nameLocation :‘left‘,                      data : [‘大（1)型‘,‘大（2）型‘,‘中型‘,‘小（1）型‘,‘小（2）型‘]                  }              ],              yAxis : [                  {                      type : ‘value‘,                      position: ‘right‘,                      name:‘水库数量（座）‘                  }              ],              series : [//驱动图标的数据数组，数组每一个元素表示该项指标，以及该项指标各种情况的数据                  {                      name:‘有预警‘,                      type:‘bar‘,//展示出来的图形类型                      tooltip : {trigger: ‘item‘},                      data:[320, 332, 301, 334,221]                  },                  {                      name:‘无预警‘,                      type:‘bar‘,                      tooltip : {trigger: ‘item‘},                      data:[120, 132, 101, 134,105]                  },                  {                      name:‘水位预警‘,                      type:‘bar‘,                      tooltip : {trigger: ‘item‘},                      data:[220, 182, 191, 234,230]                  },                  {                      name:‘渗流预警‘,                      type:‘bar‘,                      tooltip : {trigger: ‘item‘}, //                      stack: ‘广告‘,表示 name和stack组合名称的后部分                      data:[150, 232, 201, 154,104]                  },                  {                      name:‘渗压预警‘,                      type:‘bar‘,                      tooltip : {trigger: ‘item‘},                      data:[862, 1018, 964, 1026,236]                  },                  {                      name:‘位移预警‘,                      type:‘bar‘,                      tooltip : {trigger: ‘item‘},                      data:[862, 1018, 964, 1026,236]                  },

                 {                      name:‘有无预警比‘,                      type:‘pie‘,                      tooltip : {                          trigger: ‘item‘,                          formatter: ‘{a} <br/>{b} : {c} ({d}%)‘//提示信息格式：a表示提示信息主题，b表示该itme的名称，c表示该itme的数据量，d表示百分比                      },                      center: [160,130],                      radius : [0, 50],                      itemStyle :{                          normal : {                              labelLine : {                                  length : 20                              }                          }                      },                      data:[                          {value:1048, name:‘有预警‘},                          {value:251, name:‘无预警‘}                      ]                  }              ]          };                             

        // 为echarts对象加载数据         myChart.setOption(option);     } );

百度-Echarts-学习

标签：

原文地址：http://www.cnblogs.com/yangjiafu/p/4506520.html