Echarts-引入兩個/多個圖示
阿新 • • 發佈:2019-02-06
在這裡,演示的是引入兩個錶盤,那麼直接通過程式碼來看吧...
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- ECharts單檔案引入 --> <script src="js/dist/echarts.js"></script> </head> <body> <!-- 為ECharts準備具備大小(寬高)的Dom --> <div id="temp" style="height:350px;width:500px"></div> <div id="co" style="height:350px"></div> </body> <script type="text/javascript"> // 路徑配置 require.config({ paths: { echarts: 'js/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/gauge' // 淺色儀表盤 ], SetEcharts ); function SetEcharts(ec){ TempGauge(ec); CoGauge(ec); } /*第一個*/ function TempGauge(ec) { // 基於準備好的dom,初始化echarts圖表 var TempChart = ec.init(document.getElementById('temp')); var option = { tooltip : { formatter: "{a} <br/>{b} : {c}℃" }, toolbox: { show : true, feature : { mark : {show: true}, restore : {show: true}, saveAsImage : {show: true} } }, series : [ { name:'當前溫度值', type:'gauge', splitNumber: 10, // 分割段數,預設為5 axisLine: { // 座標軸線 lineStyle: { // 屬性lineStyle控制線條樣式 color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']], width: 8 } }, axisTick: { // 座標軸小標記 splitNumber: 10, // 每份split細分多少段 length :12, // 屬性length控制線長 lineStyle: { // 屬性lineStyle控制線條樣式 color: 'auto' } }, axisLabel: { // 座標軸文字標籤,詳見axis.axisLabel textStyle: { // 其餘屬性預設使用全域性文字樣式,詳見TEXTSTYLE color: 'auto' } }, splitLine: { // 分隔線 show: true, // 預設顯示,屬性show控制顯示與否 length :30, // 屬性length控制線長 lineStyle: { // 屬性lineStyle(詳見lineStyle)控制線條樣式 color: 'auto' } }, pointer : { width : 5 }, title : { show : true, offsetCenter: [0, '-40%'], // x, y,單位px textStyle: { // 其餘屬性預設使用全域性文字樣式,詳見TEXTSTYLE fontWeight: 'bolder' } }, detail : { formatter:'{value}℃', textStyle: { // 其餘屬性預設使用全域性文字樣式,詳見TEXTSTYLE color: 'auto', fontWeight: 'bolder' } }, data:[{value: 50, name: '溫度(℃)'}] } ] }; TempChart.setOption(option); } /*第二個*/ function CoGauge(ec) { // 基於準備好的dom,初始化echarts圖表 var CoChart = ec.init(document.getElementById('co')); var option = { tooltip : { formatter: "{a} <br/>{b} : {c}ppm" }, toolbox: { show : true, feature : { mark : {show: true}, restore : {show: true}, saveAsImage : {show: true} } }, series : [ { name:'當前CO濃度值', type:'gauge', splitNumber: 10, // 分割段數,預設為5 axisLine: { // 座標軸線 lineStyle: { // 屬性lineStyle控制線條樣式 color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']], width: 8 } }, axisTick: { // 座標軸小標記 splitNumber: 10, // 每份split細分多少段 length :12, // 屬性length控制線長 lineStyle: { // 屬性lineStyle控制線條樣式 color: 'auto' } }, axisLabel: { // 座標軸文字標籤,詳見axis.axisLabel textStyle: { // 其餘屬性預設使用全域性文字樣式,詳見TEXTSTYLE color: 'auto' } }, splitLine: { // 分隔線 show: true, // 預設顯示,屬性show控制顯示與否 length :30, // 屬性length控制線長 lineStyle: { // 屬性lineStyle(詳見lineStyle)控制線條樣式 color: 'auto' } }, pointer : { width : 5 }, title : { show : true, offsetCenter: [0, '-40%'], // x, y,單位px textStyle: { // 其餘屬性預設使用全域性文字樣式,詳見TEXTSTYLE fontWeight: 'bolder' } }, detail : { formatter:'{value}ppm', textStyle: { // 其餘屬性預設使用全域性文字樣式,詳見TEXTSTYLE color: 'auto', fontWeight: 'bolder' } }, data:[{value: 50, name: 'CO(ppm)'}] } ] }; CoChart.setOption(option); } </script> </html>