ECharts官網執行個體，echarts官執行個體
簡介
ECharts，縮寫來自Enterprise Charts，商業級資料圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和行動裝置上，相容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可互動，可高度個人化定製的資料視覺效果圖表。創新的拖拽重計算、資料檢視、值域漫遊等特性大大增強了使用者體驗，賦予了使用者對資料進行挖掘、整合的能力。
支援折線圖（地區圖）、柱狀圖（條狀圖）、散佈圖（泡泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和弦圖、力導向布局圖、地圖、儀錶盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、資料區域、時間軸、工具箱等7個可互動組件，支援多圖表、組件的聯動和混搭展現
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>echart學習</title></head><body><!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="height:400px"></div> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript"> // 路徑配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); //使用 require( [ 'echarts', 'echarts/chart/bar', // 使用柱狀圖就載入bar模組，按需載入 'echarts/chart/line' ], function(ec){ // 基於準備好的dom，初始化echarts圖表 var myChart = ec.init(document.getElementById('main')); // 過渡--------------------- myChart.showLoading({ text: '正在努力的讀取資料中...', //loading話術 }); myChart.hideLoading(); option = { title : { text: '未來一周氣溫變化', subtext: '純屬虛構' }, tooltip : { // trigger: 'axis' trigger:'item' }, legend: { data:['最高氣溫','最低氣溫'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, //資料檢視 magicType : {show: true, type: ['line', 'bar']}, //動態類型切換,柱狀折現切換 restore : {show: true}, //重設 saveAsImage : {show: true} //儲存為圖片 } }, calculable : true, //是否啟用拖拽重計算特性，預設false xAxis : [ { type : 'category', boundaryGap : false, // 座標軸兩端空白策略 data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value', axisLabel : { formatter: '{value} °C' } } ], series : [ { name:'最高氣溫', type:'line', data:[11, 11, 15, 13, 12, 13, 10], markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } }, { name:'最低氣溫', type:'line', data:[1, -2, 2, 5, 3, 2, 0], markPoint : { data : [ {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5} ] }, markLine : { data : [ {type : 'average', name : '平均值'} ] } } ]}; // 為echarts對象載入資料 myChart.setOption(option); } ); // } </script></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
