dashboard

功能描述

dashboard

依赖的模块

echarts-all.js

快速使用

  1. 1.引用js文件
  3. 2.创建轮播div
  4.   <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  5.   <div id="main" style="height:500px"></div>
  7. 3.初始化
  8. // 基于准备好的dom，初始化echarts图表
  9. var myChart = echarts.init(document.getElementById('main'));   
  11. 4.设置echarts的配置信息
  12. var option = {
  13.     tooltip : {
  14.         formatter: "{a} <br/>{b} : {c}%"
  15.     },
  16.     toolbox: {
  17.         show : true,
  18.         feature : {
  19.             mark : {show: true},
  20.             restore : {show: true},
  21.             saveAsImage : {show: true}
  22.         }
  23.     },
  24.     series : [
  25.         {
  26.             name:'业务指标',
  27.             type:'gauge',       
  28.     min:0,
  29.     max:200,            
  30.             splitNumber: 10,       // 分割段数，默认为5
  31.             axisLine: {            // 坐标轴线
  32.                 lineStyle: {       // 属性lineStyle控制线条样式
  33.                     color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']], 
  34.                     width: 8
  35.                 }
  36.             },
  37.             axisTick: {            // 坐标轴小标记
  38.                 splitNumber: 10,   // 每份split细分多少段
  39.                 length :12,        // 属性length控制线长
  40.                 lineStyle: {       // 属性lineStyle控制线条样式
  41.                     color: 'auto'
  42.                 }
  43.             },
  44.             axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
  45.                 textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
  46.                     color: 'auto'
  47.                 }
  48.             },
  49.             splitLine: {           // 分隔线
  50.                 show: true,        // 默认显示，属性show控制显示与否
  51.                 length :30,         // 属性length控制线长
  52.                 lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
  53.                     color: 'auto'
  54.                 }
  55.             },
  56.             pointer : {
  57.                 width : 5
  58.             },
  59.             title : {
  60.                 show : true,
  61.                 offsetCenter: [0, '-40%'],       // x, y，单位px
  62.                 textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
  63.                     fontWeight: 'bolder'
  64.                 }
  65.             },
  66.             detail : {
  67.                 formatter:'{value}%',
  68.                 textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
  69.                     color: 'auto',
  70.                     fontWeight: 'bolder'
  71.                 }
  72.             },
  73.             data:[{value: 50, name: '完成率'}]
  74.         }
  75.     ]
  76. };
  78. 4.绑定配置，加载数据
  79. // 为echarts对象加载数据 
  80. myChart.setOption(option);
  83. 5.使用例子
  84.   var myChart = echarts.init(document.getElementById('main')); 
  86. var option = {
  87.     tooltip : {
  88.         formatter: "{a} <br/>{b} : {c}%"
  89.     },
  90.     toolbox: {
  91.         show : true,
  92.         feature : {
  93.             mark : {show: true},
  94.             restore : {show: true},
  95.             saveAsImage : {show: true}
  96.         }
  97.     },
  98.     series : [
  99.         {
  100.             name:'业务指标',
  101.             type:'gauge',       
  102.     min:0,
  103.     max:200,            
  104.             splitNumber: 10,       // 分割段数，默认为5
  105.             axisLine: {            // 坐标轴线
  106.                 lineStyle: {       // 属性lineStyle控制线条样式
  107.                     color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']], 
  108.                     width: 8
  109.                 }
  110.             },
  111.             axisTick: {            // 坐标轴小标记
  112.                 splitNumber: 10,   // 每份split细分多少段
  113.                 length :12,        // 属性length控制线长
  114.                 lineStyle: {       // 属性lineStyle控制线条样式
  115.                     color: 'auto'
  116.                 }
  117.             },
  118.             axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
  119.                 textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
  120.                     color: 'auto'
  121.                 }
  122.             },
  123.             splitLine: {           // 分隔线
  124.                 show: true,        // 默认显示，属性show控制显示与否
  125.                 length :30,         // 属性length控制线长
  126.                 lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
  127.                     color: 'auto'
  128.                 }
  129.             },
  130.             pointer : {
  131.                 width : 5
  132.             },
  133.             title : {
  134.                 show : true,
  135.                 offsetCenter: [0, '-40%'],       // x, y，单位px
  136.                 textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
  137.                     fontWeight: 'bolder'
  138.                 }
  139.             },
  140.             detail : {
  141.                 formatter:'{value}%',
  142.                 textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
  143.                     color: 'auto',
  144.                     fontWeight: 'bolder'
  145.                 }
  146.             },
  147.             data:[{value: 50, name: '完成率'}]
  148.         }
  149.     ]
  150. };
  152. // 为echarts对象加载数据 
  153. myChart.setOption(option);
  155. setInterval(function (){
  156.     option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
  157.     myChart.setOption(option,true);
  158. },2000);

特别说明