echarts3 使用總結(jié)（繪制各種圖表,地圖）

更新時(shí)間：2017年01月05日 16:01:25 作者：little2

本篇文章主要介紹了echarts3 使用總結(jié)，詳細(xì)的介紹了各種柱狀圖、折線(xiàn)圖、餅圖、全國(guó)地圖等的實(shí)現(xiàn)代碼，有需要的可以了解一下。

由于項(xiàng)目需要自學(xué)了echarts，下面將學(xué)到的東西總結(jié)如下，如果有哪里寫(xiě)的不好，請(qǐng)批評(píng)指正

一、前期準(zhǔn)備

1、使用echarts之前先要引入echarts.js，js可以到官網(wǎng)下載

2、寫(xiě)一個(gè)div容器用來(lái)裝echarts內(nèi)容，這個(gè)容器必須有高度，不然看不到內(nèi)容。

3、在script中獲取div容器的id，根據(jù)需要寫(xiě)option中的參數(shù)（也許你現(xiàn)在還不知道option是干嘛用的，不要著急往下看），使用setoption生成圖表。

（代碼如下）注：后面將不再對(duì)引入js，獲取id，調(diào)用option生成圖表做贅述

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom -->
 <div id="main" style="width: 600px;height:400px;"></div>
 <!-- 引入echarts.js -->
 <script src="js/echarts.js "></script> 
 <script>
 獲取容器的id并賦值給變量myChart
 var myChart = echarts.init(document.getElementById('main'));
 /*用來(lái)配置參數(shù)*/
 option = {
  }
  /*調(diào)用option生成圖表*/
 myChart.setOption(option)
 </script>
</body>
</html>

二、各種圖表使用

1、柱狀圖代碼

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <!-- 為ECharts準(zhǔn)備一個(gè)具備大?。▽捀撸┑腄om -->
 <div id="main" style="width: 600px;height:400px;"></div>
 <script src="js/echarts.js "></script>
 <script>
 var myChart = echarts.init(document.getElementById('main'));
 myChart.title = '坐標(biāo)軸刻度與標(biāo)簽對(duì)齊';
 option = {
  color: ['#3398DB'],
  tooltip : {
   trigger: 'axis',
   axisPointer : {   // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
    type : 'shadow'  // 默認(rèn)為直線(xiàn)，可選為：'line' | 'shadow'
   }
  },
  grid: {
   left: '3%',
   right: '4%',
   bottom: '3%',
   containLabel: true
  },
  xAxis : [
   {
    type : 'category',
    data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisTick: {
     alignWithLabel: true
    }
   }
  ],
  yAxis : [
   {
    type : 'value'
   }
  ],
  series : [
   {
    name:'直接訪(fǎng)問(wèn)',
    type:'bar',
    barWidth: '60%',
    data:[10, 52, 200, 334, 390, 330, 220]
   }
  ]
 };
 myChart.setOption(option)
 </script>
</body>
</html>

運(yùn)行結(jié)果

2、折線(xiàn)圖

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <div id="pic4" style="width: 600px;height:400px;"></div>
 <script src="js/echarts.js"></script>
 <script>
  var myChart13 = echarts.init(document.getElementById('pic4'));
  var data = [];
  option15 = {
    title: {
     text: '曲線(xiàn)',
    },
    tooltip: {
     trigger: 'axis',

    },
    legend: {
     data:['昨日(11月8日)','今日(11月9日)']
    },
    grid: {
     left: '1%',
     right: '1%',
     bottom: '3%',
     containLabel: true
    },
    toolbox: {
     show: false,
     feature: {
      dataZoom: {
       yAxisIndex: 'none'
      },
      dataView: {readOnly: false},
      magicType: {type: ['line', 'bar']},
      restore: {},
      saveAsImage: {}
     }
    },
    color:["red","#CD3333"],
    xAxis: {
     type: 'category',
     boundaryGap: false,
     data : ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24']
    },
    yAxis: {
     type: 'value',
     name: '單位（kW）',
     axisLabel: {
      formatter: '{value}'
     }
    },
    series: [
     {
      name:'昨日(11月8日)',
      type:'line',
      data:[110,106,110,110,318,119,205,256,156,309,256,306,206,356,456,486,565.45,234,156,206,126,256,150,276],
      
     },
     {
      type:'line',
      name : '今日(11月9日)',
      data:[210,136,120,120,118,219,195,176,156,329,356,346,406.54,256,156],
     }
      ]
   };

  myChart13.setOption(option15);
 </script>
</body>
</html>

運(yùn)行結(jié)果

3、餅圖

由于代碼重復(fù)就不浪費(fèi)地方寫(xiě)所有代碼，直接替換（一）中的option{}就可以

option = {
 title : {
  text: '某站點(diǎn)用戶(hù)訪(fǎng)問(wèn)來(lái)源',
  subtext: '純屬虛構(gòu)',
  x:'center'
 },
 tooltip : {
  trigger: 'item',
  formatter: "{a} <br/> : {c} (vvxyksv9kd%)"
 },
 legend: {
  orient: 'vertical',
  left: 'left',
  data: ['直接訪(fǎng)問(wèn)','郵件營(yíng)銷(xiāo)','聯(lián)盟廣告','視頻廣告','搜索引擎']
 },
 series : [
  {
   name: '訪(fǎng)問(wèn)來(lái)源',
   type: 'pie',
   radius : '55%',
   center: ['50%', '60%'],
   data:[
    {value:335, name:'直接訪(fǎng)問(wèn)'},
    {value:310, name:'郵件營(yíng)銷(xiāo)'},
    {value:234, name:'聯(lián)盟廣告'},
    {value:135, name:'視頻廣告'},
    {value:1548, name:'搜索引擎'}
   ],
   itemStyle: {
    emphasis: {
     shadowBlur: 10,
     shadowOffsetX: 0,
     shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
   }
  }
 ]
};

運(yùn)行結(jié)果

4、全國(guó)地圖

由于地圖比較復(fù)雜，所以把全部代碼展示出來(lái)

china.js可以到官網(wǎng)下載所有代碼，在echarts/map文件夾中可以找到china.js,

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <!-- 為ECharts準(zhǔn)備一個(gè)具備大?。▽捀撸┑腄om -->
 <div id="main" style="width: 1000px;height:800px;"></div>
 /*<script src="node_modules/echarts/theme/shine.js"></script>*/
 <script src="js/echarts.js"></script>
 <script src="node_modules/echarts/map/js/china.js"></script>
 <script type="text/javascript"> 
  var myChart = echarts.init(document.getElementById('main'), 'shine');
    function randomData() {
   return Math.round(Math.random()*1000);
  }
  option = {
   title: {
    text: 'iphone銷(xiāo)量',
    subtext: '純屬虛構(gòu)',
    left: 'center'
   },
   tooltip: {
    trigger: 'item'
   },
   legend: {
    orient: 'vertical',
    left: 'left',
    data:['iphone3','iphone4','iphone5']
   },
   visualMap: {
    min: 0,
    max: 2500,
    left: 'left',
    top: 'bottom',
    text: ['高','低'],   // 文本，默認(rèn)為數(shù)值文本
    calculable: true
   },
   toolbox: {
    show: false,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
     dataView: {readOnly: false},
     restore: {},
     saveAsImage: {}
    }
   },
   series: [
    {
      itemStyle: {
       normal: {
          color: function (params) {
           var colorList = [
            '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
            '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
           ];
           return colorList[params.dataIndex]
          },
          
         }
        },
     name: 'iphone3',
     type: 'map',
     mapType: 'china',
     roam: false,
     label: {
      normal: {
       show: true
      },
      emphasis: {
       show: true
      }
     },
     data:[
      {name: '北京',value: randomData() },
      {name: '天津',value: randomData() },
      {name: '上海',value: randomData() },
      {name: '重慶',value: randomData() },
      {name: '河北',value: randomData() },
      {name: '河南',value: randomData() },
      {name: '云南',value: randomData() },
      {name: '遼寧',value: randomData() },
      {name: '黑龍江',value: randomData() },
      {name: '湖南',value: randomData() },
      {name: '安徽',value: randomData() },
      {name: '山東',value: randomData() },
      {name: '新疆',value: randomData() },
      {name: '江蘇',value: randomData() },
      {name: '浙江',value: randomData() },
      {name: '江西',value: randomData() },
      {name: '湖北',value: randomData() },
      {name: '廣西',value: randomData() },
      {name: '甘肅',value: randomData() },
      {name: '山西',value: randomData() },
      {name: '內(nèi)蒙古',value: randomData() },
      {name: '陜西',value: randomData() },
      {name: '吉林',value: randomData() },
      {name: '福建',value: randomData() },
      {name: '貴州',value: randomData() },
      {name: '廣東',value: randomData() },
      {name: '青海',value: randomData() },
      {name: '西藏',value: randomData() },
      {name: '四川',value: randomData() },
      {name: '寧夏',value: randomData() },
      {name: '海南',value: randomData() },
      {name: '臺(tái)灣',value: randomData() },
      {name: '香港',value: randomData() },
      {name: '澳門(mén)',value: randomData() }
     ]
    
    }
   ]
  };    
  myChart.setOption(option); 
 </script> 
 
</body>
</html>

運(yùn)行結(jié)果

5、城市地圖（以北京為例）

beijing.js可以到官網(wǎng)下載所有代碼，在echarts/map/province文件夾中可以找到beijing.js,其他城市的使用同樣方法直接引入對(duì)應(yīng)的js即可

代碼

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
 <div id="main" style="100%; height: 100%;"></div>
</body>
<script src="js/echarts.js"></script>
<script src="js/map/js/province/beijing.js"></script>
<script>
 var myChart = echarts.init(document.getElementById('main'));
 var option = {
  title: {
   text : '北京地圖',
   subtext : '-。-'
  },
  tooltip : {
   trigger: 'item',
   formatter: function(a){
    return a[2];
   }
  },
  legend: {
   orient: 'vertical',
   x:'right',
   data:['數(shù)據(jù)名稱(chēng)']
  },
  dataRange: {
   min: 0,
   max: 1000,
   color:['orange','yellow'],
   text:['高','低'],   // 文本，默認(rèn)為數(shù)值文本
   calculable : true
  },
  series : [
   {
    name: '數(shù)據(jù)名稱(chēng)',
    type: 'map',
    mapType: '北京',
    selectedMode : 'single',
    itemStyle:{
     normal:{label:{show:true}},
     emphasis:{label:{show:true}}
    },
    data:[
     {name: '懷柔區(qū)',value: Math.round(Math.random()*1000)},
     {name: '延慶縣',value: Math.round(Math.random()*1000)},
     {name: '密云縣',value: Math.round(Math.random()*1000)},
     {name: '昌平區(qū)',value: Math.round(Math.random()*1000)},
     {name: '平谷區(qū)',value: Math.round(Math.random()*1000)},
     {name: '順義區(qū)',value: Math.round(Math.random()*1000)},
     {name: '門(mén)頭溝區(qū)',value: Math.round(Math.random()*1000)},
     {name: '海淀區(qū)',value: Math.round(Math.random()*1000)},
     {name: '朝陽(yáng)區(qū)',value: Math.round(Math.random()*1000)},
     {name: '石景山區(qū)',value: Math.round(Math.random()*1000)},
     {name: '西城區(qū)',value: Math.round(Math.random()*1000)},
     {name: '東城區(qū)',value: Math.round(Math.random()*1000)},
     {name: '宣武區(qū)',value: Math.round(Math.random()*1000)},
     {name: '豐臺(tái)區(qū)',value: Math.round(Math.random()*1000)},
     {name: '房山區(qū)',value: Math.round(Math.random()*1000)},
     {name: '通州區(qū)',value: Math.round(Math.random()*1000)},
     {name: '大興區(qū)',value: Math.round(Math.random()*1000)},
     
    ]
   }
  ]
 };
 myChart.setOption(option);    
</script>
</html>

運(yùn)行結(jié)果