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

發(fā)布時(shí)間：2020-09-07 07:10:25 來(lái)源：腳本之家閱讀：193 作者：yihaomen 欄目：web開(kāi)發(fā)

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

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

<!DOCTYPE html>
<head>
  <meta charset="GBK">
  <title>ECharts</title>
</head>
<body>
  <!-- 為ECharts準(zhǔn)備一個(gè)具備大?。▽捀撸┑腄om -->
  <div id="main" ></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:['直接訪問(wèn)', '郵件營(yíng)銷','聯(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:'直接訪問(wèn)',
              type:'bar',
              stack: '總量',
              itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
              data:[320, 302, 301, 334, 390, 330, 320]
            },
            {
              name:'郵件營(yíng)銷',
              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>

整個(gè)例子代碼下載，包含了百度 echarts包.

完整實(shí)例代碼點(diǎn)擊此處本站下載。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript字符與字符串操作技巧總結(jié)》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript遍歷算法與技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

向AI問(wèn)一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽