-
語法： 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設(shè)置最大/小值 markLine平均值 symbol: //circle:橢圓 rect：長方形 roundRect：菱角形 triangle：三角形 diamond：菱形 pin：氣球 arrow：凹三角查看全部
-
5.series：數(shù)據(jù) 語法： series: [{name: '銷量', type: 'bar',//柱形圖 data: [5, 20, 36, 10, 10, 20]// },{ name: '產(chǎn)量', type: 'line',//折線圖 data: [7, 30, 50, 11, 40, 80] }] 6. tooltip：坐標(biāo)軸觸發(fā) 語法： tooltip: { trigger:'axis'//坐標(biāo)軸觸發(fā)，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。 }, //工具箱 7.toolbox：組件的工具箱 必須導(dǎo)入包：<script type="text/javascript" src="js/echarts.js"></script> toolbox組件的工具欄 Show 是否顯示 Feature 具體顯示的功能 saveAsImage 保存圖片 Restore 還原 dateView 數(shù)據(jù)視圖 dataZoom 縮放視圖 magicType 動態(tài)類型轉(zhuǎn)換 語法： 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 入門示例',//標(biāo)題文字 subtext:"學(xué)習(xí)Echarts",//子標(biāo)題 right:50,//標(biāo)題位置，數(shù)字就是像素值 borderColor:"#006666",//邊框顏色 borderWidth:2,//邊框?qū)挾? textStyle:{fontSize:25},//標(biāo)題文字大小 fontStyle:{default: 'oblique'}//標(biāo)題文字風(fēng)格 }, //標(biāo)題 2.legend：圖例 語法：legend{ data: ['銷量', '產(chǎn)量'],}：表示圖例樣式內(nèi)容自定義格式 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' }//設(shè)置y軸的單位名稱 },查看全部
-
第二章知識總結(jié) Echarts解析文檔 一、網(wǎng)址 1.官網(wǎng)鏈接: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準(zhǔn)備一個具備大?。▽捀撸┑腄om --> <div id="main" ></div> （3）script <script type="text/javascript"> // 基于準(zhǔn)備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數(shù)據(jù) /*--------------此處添加主要代碼-----------------------*/ var option = {........} // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。 myChart.setOption(option);// </script>查看全部
-
所需依賴查看全部
-
小例子查看全部
-
餅圖的基本查看全部
-
canvas和svg畫圖原理查看全部
-
ECharts的工具欄組件 toolbox組件的工具欄 Show 是否顯示 Feature 具體顯示的功能 saveAsImage 保存圖片 Restore 還原 dateView 數(shù)據(jù)視圖 dataZoom 縮放視圖 magicType 動態(tài)類型轉(zhuǎn)換查看全部
-
tooltip: {}, //工具箱 legend: {data:['銷量']}, //圖例 xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]}, //x軸 yAxis: {}, //數(shù)據(jù): series: [{name: '銷量', type: 'bar',//柱形圖 data: [5, 20, 36, 10, 10, 20]// },{ name: '產(chǎn)量', type: 'line',//折線圖 data: [7, 30, 50, 11, 40, 80] }] }; // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。 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準(zhǔn)備一個具備大?。▽捀撸┑腄om --> <div id="main" ></div> <script type="text/javascript"> // 基于準(zhǔn)備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數(shù)據(jù) var option = { //標(biāo)題 title: { show:true, text: 'ECharts 入門示例',//標(biāo)題文字 subtext:"學(xué)習(xí)Echarts",//子標(biāo)題 right:50,//標(biāo)題位置，數(shù)字就是像素值 borderColor:"#006666",//邊框顏色 borderWidth:2,//邊框?qū)挾? textStyle:{fontSize:25},//標(biāo)題文字大小 fontStyle:{default: 'oblique'}//標(biāo)題文字風(fēng)格 },查看全部
-
標(biāo)題組件 Text:標(biāo)題文字 Subtext:子標(biāo)題 left,top,right,bottom標(biāo)題位置 borderColor:邊框顏色 borderWidth:邊框?qū)挾?查看全部
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script> </head> <body> <!-- 為ECharts準(zhǔn)備一個具備大?。▽捀撸┑腄om --> <div id="main" ></div> <script type="text/javascript"> // 基于準(zhǔn)備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數(shù)據(jù) var option = { //標(biāo)題 title: {text: 'ECharts 入門示例'}, //工具箱 tooltip: {}, //圖例 legend: {data:['銷量']}, //x軸 xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]}, yAxis: {}, //數(shù)據(jù): series: [{ name: '銷量', type: 'bar',//傳一個數(shù)據(jù) data: [5, 20, 36, 10, 10, 20]// },{ name: '產(chǎn)量', type: 'line',//傳一個數(shù)據(jù) data: [7, 30, 50, 11, 40, 80] }] }; // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。 myChart.setOption(option);// </script> </body> </html>查看全部
-
示例代碼介紹 html結(jié)構(gòu) Echarts.init()初始化Echarts實例 setOption用指定數(shù)據(jù)繪圖 Option對象 標(biāo)題：title 圖例：legend X軸：xAxis Y軸：yAxis 數(shù)據(jù)：series：Name/type/data 直方圖：簡單修改配置實現(xiàn)折線圖：type：'bar' 折線圖：簡單修改配置實現(xiàn)折線圖：type：'line'查看全部
舉報
0/150
提交
取消