快捷導(dǎo)航

利用百度echarts實(shí)現(xiàn)圖表功能簡單入門示例【附源碼下載】

更新時(shí)間：2019年06月10日 11:24:00 作者：yihaomen

這篇文章主要介紹了利用百度echarts實(shí)現(xiàn)圖表功能簡單,結(jié)合簡單示例形式分析了echarts插件的圖標(biāo)繪制功能相關(guān)實(shí)現(xiàn)技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下

本文實(shí)例講述了利用百度echarts實(shí)現(xiàn)圖表功能。分享給大家供大家參考，具體如下：

百度有一款開源的圖表控件，號(hào)稱是大數(shù)據(jù)時(shí)代最好的圖表控件。剛好目前的項(xiàng)目需要用圖表展示給客戶看數(shù)據(jù)，所以就選擇這個(gè)三方的控件。對(duì)這種控件一般來說使用起來應(yīng)該沒有太大的難度，基本就是按照它的規(guī)則組裝json數(shù)據(jù)，關(guān)鍵是配置上面，如果剛開始入門，不太懂，可能真要花點(diǎn)時(shí)間來搞的。我整理了一個(gè)最基本的入門例子，里面有詳細(xì)的注釋，按這種方式去加載相關(guān) js 就沒有問題了：

<!DOCTYPE html>
<head>
  <meta charset="GBK">
  <title>ECharts</title>
</head>
<body>
  <!-- 為ECharts準(zhǔn)備一個(gè)具備大?。▽捀撸┑腄om -->
  <div id="main" style="height:400px"></div>
  <!-- 功能測(cè)試 -->
  <!-- ECharts單文件引入 -->
  <script src="./js/echarts.js"></script>
  <script type="text/javascript">
    // 路徑配置
    require.config({
      paths: {
        echarts: './js'
      }
    });
    // 使用
    require(
      [
        'echarts',
        'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
      ],
      function (ec) {
        // 基于準(zhǔn)備好的dom，初始化echarts圖表
        var myChart = ec.init(document.getElementById('main')); 
        var option = {
          tooltip : {
            trigger: 'axis',
            axisPointer : {      // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
              type : 'shadow'    // 默認(rèn)為直線，可選為：'line' | 'shadow'
            }
          },
          legend: {
            data:['直接訪問', '郵件營銷','聯(lián)盟廣告','視頻廣告','搜索引擎']
          },
          toolbox: {
            show : false,
            feature : {
              mark : {show: true},
              dataView : {show: true, readOnly: false},
              magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
              restore : {show: true},
              saveAsImage : {show: true}
            }
          },
          calculable : true,
          xAxis : [
            {
              type : 'value'
            }
          ],
          yAxis : [
            {
              type : 'category',
              data : ['周一','周二','周三','周四','周五','周六','周日']
            }
          ],
          series : [
            {
              name:'直接訪問',
              type:'bar',
              stack: '總量',
              itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
              data:[320, 302, 301, 334, 390, 330, 320]
            },
            {
              name:'郵件營銷',
              type:'bar',
              stack: '總量',
              itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
              data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
              name:'聯(lián)盟廣告',
              type:'bar',
              stack: '總量',
              itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
              data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
              name:'視頻廣告',
              type:'bar',
              stack: '總量',
              itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
              data:[150, 212, 201, 154, 190, 330, 410]
            },
            {
              name:'搜索引擎',
              type:'bar',
              stack: '總量',
              itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
              data:[820, 832, 901, 934, 1290, 1330, 1320]
            }
          ]
        };
         // 為echarts對(duì)象加載數(shù)據(jù) 
        myChart.setOption(option); 
        // 根據(jù)窗口自動(dòng)縮放
        window.onresize = myChart.resize;
        // 綁定事件測(cè)試
        var ecConfig = require('echarts/config');
        myChart.on(ecConfig.EVENT.CLICK, function(param){
          // 需要的參數(shù)都可以從這里面獲取.
          alert(param);
        })
      }
    );
  </script>
</body>