-
語法： series: [ { name:'最高氣溫',type:'line', data:[11, 11, 15, 13, 12, 13, 10], markPoint: { data: [{type: 'max', name: '最大值',symbol:'pin',symbolSize:[60,40]},{type: 'min', name: '最小值',symbol:'pin',symbolSize:[60,40]}]}, 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: '平均值'}, [{ symbol: 'none',x: '90%', yAxis: 'max'}, {symbol: 'circle', label: { normal: {position: 'start',formatter: '最大值' } }, type: 'max', name: '最高點' }] ] } } ]查看全部
-
8.markPoint設置最大/小值 markLine平均值 symbol: //circle:橢圓 rect：長方形 roundRect：菱角形 triangle：三角形 diamond：菱形 pin：氣球 arrow：凹三角查看全部
-
5.series：數據 語法： series: [{name: '銷量', type: 'bar',//柱形圖 data: [5, 20, 36, 10, 10, 20]// },{ name: '產量', type: 'line',//折線圖 data: [7, 30, 50, 11, 40, 80] }] 6. tooltip：坐標軸觸發 語法： tooltip: { trigger:'axis'//坐標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。 }, //工具箱 7.toolbox：組件的工具箱 必須導入包：<script type="text/javascript" src="js/echarts.js"></script> toolbox組件的工具欄 Show 是否顯示 Feature 具體顯示的功能 saveAsImage 保存圖片 Restore 還原 dateView 數據視圖 dataZoom 縮放視圖 magicType 動態類型轉換 語法： toolbox: { show: true, feature: { dataZoom: { yAxisIndex: 'none' }, dataView: {readOnly: false}, magicType: {type: ['line', 'bar']}, restore: {}, saveAsImage: {} } },查看全部
-
三、API解析 固定格式所有圖形代碼寫入格式：var option{} 1.title： 語法： title: { show:true, text: 'ECharts 入門示例',//標題文字 subtext:"學習Echarts",//子標題 right:50,//標題位置，數字就是像素值 borderColor:"#006666",//邊框顏色 borderWidth:2,//邊框寬度 textStyle:{fontSize:25},//標題文字大小 fontStyle:{default: 'oblique'}//標題文字風格 }, //標題 2.legend：圖例 語法：legend{ data: ['銷量', '產量'],}：表示圖例樣式內容自定義格式 3.xAxis：x軸 語法： xAxis: { type: 'category',（type屬性固定） name: 'x', splitLine: {show: false}, data: ['一', '二', '三', '四', '五', '六', '七', '八', '九'] }, 4.yAxis：y軸 語法： yAxis: { type: 'log',（type屬性固定） name: 'y' axisLabel: { formatter: '{value} °C' }//設置y軸的單位名稱 },查看全部
-
第二章知識總結 Echarts解析文檔 一、網址 1.官網鏈接:http://echarts.baidu.com/index.html 2.作者交流鏈接：https://github.com/ecomfe/echarts 二、Echarts API解析 1、模板 （1）引用兩個鏈接： <script src="js/echarts.min.js"></script> <script type="text/javascript" src="js/echarts.js"></script> （2）<!-- 為ECharts準備一個具備大?。▽捀撸┑腄om --> <div id="main" ></div> （3）script <script type="text/javascript"> // 基于準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 /*--------------此處添加主要代碼-----------------------*/ var option = {........} // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option);// </script>查看全部
-
所需依賴查看全部
-
小例子查看全部
-
餅圖的基本查看全部
-
canvas和svg畫圖原理查看全部
-
ECharts的工具欄組件 toolbox組件的工具欄 Show 是否顯示 Feature 具體顯示的功能 saveAsImage 保存圖片 Restore 還原 dateView 數據視圖 dataZoom 縮放視圖 magicType 動態類型轉換查看全部
-
tooltip: {}, //工具箱 legend: {data:['銷量']}, //圖例 xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]}, //x軸 yAxis: {}, //數據: series: [{name: '銷量', type: 'bar',//柱形圖 data: [5, 20, 36, 10, 10, 20]// },{ name: '產量', type: 'line',//折線圖 data: [7, 30, 50, 11, 40, 80] }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option);// </script> </body> </html>查看全部
-
案例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script> </head> <body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" ></div> <script type="text/javascript"> // 基于準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 var option = { //標題 title: { show:true, text: 'ECharts 入門示例',//標題文字 subtext:"學習Echarts",//子標題 right:50,//標題位置，數字就是像素值 borderColor:"#006666",//邊框顏色 borderWidth:2,//邊框寬度 textStyle:{fontSize:25},//標題文字大小 fontStyle:{default: 'oblique'}//標題文字風格 },查看全部
-
標題組件 Text:標題文字 Subtext:子標題 left,top,right,bottom標題位置 borderColor:邊框顏色 borderWidth:邊框寬度查看全部
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script> </head> <body> <!-- 為ECharts準備一個具備大?。▽捀撸┑腄om --> <div id="main" ></div> <script type="text/javascript"> // 基于準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 var option = { //標題 title: {text: 'ECharts 入門示例'}, //工具箱 tooltip: {}, //圖例 legend: {data:['銷量']}, //x軸 xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]}, yAxis: {}, //數據: series: [{ name: '銷量', type: 'bar',//傳一個數據 data: [5, 20, 36, 10, 10, 20]// },{ name: '產量', type: 'line',//傳一個數據 data: [7, 30, 50, 11, 40, 80] }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option);// </script> </body> </html>查看全部
-
示例代碼介紹 html結構 Echarts.init()初始化Echarts實例 setOption用指定數據繪圖 Option對象 標題：title 圖例：legend X軸：xAxis Y軸：yAxis 數據：series：Name/type/data 直方圖：簡單修改配置實現折線圖：type：'bar' 折線圖：簡單修改配置實現折線圖：type：'line'查看全部
舉報
0/150
提交
取消