利用百度echarts實現圖表功能簡單入門示例【附源碼下載】

2024-05-06 16:52:00

字體：大中小

來源：轉載

供稿：網友

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

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

<!DOCTYPE html><head>  <meta charset="GBK">  <title>ECharts</title></head><body>  <!-- 為ECharts準備一個具備大小（寬高）的Dom -->  <div id="main" style="height:400px"></div>  <!-- 功能測試 -->  <!-- ECharts單文件引入 -->  <script src="./js/echarts.js"></script>  <script type="text/javascript">    // 路徑配置    require.config({      paths: {        echarts: './js'      }    });    // 使用    require(      [        'echarts',        'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載      ],      function (ec) {        // 基于準備好的dom，初始化echarts圖表        var myChart = ec.init(document.getElementById('main'));         var option = {          tooltip : {            trigger: 'axis',            axisPointer : {      // 坐標軸指示器，坐標軸觸發有效              type : 'shadow'    // 默認為直線，可選為：'line' | 'shadow'            }          },          legend: {            data:['直接訪問', '郵件營銷','聯盟廣告','視頻廣告','搜索引擎']          },          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:'聯盟廣告',              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對象加載數據         myChart.setOption(option);         // 根據窗口自動縮放        window.onresize = myChart.resize;        // 綁定事件測試        var ecConfig = require('echarts/config');        myChart.on(ecConfig.EVENT.CLICK, function(param){          // 需要的參數都可以從這里面獲取.          alert(param);        })      }    );  </script></body>

百度,echarts,圖表,源碼下載