百度Echarts導入
阿新 • • 發佈：2017-09-26
don false magictype oct tex gic span 修改 toolbox
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="echarts.min.js"></script> </head> <body> <div style="height: 410px;min-height: 100px;margin: 0 auto;" id="main"></div> <script type="text/javascript"> // 創建echarts對象 var mychart =echarts.init(document.getElementById("main")); option = { title: { text: ‘平均身高‘, subtext: ‘純屬虛構‘ }, tooltip: { trigger: ‘axis‘ }, legend: { data:[‘最高‘,‘最矮‘] }, toolbox: { show: true, feature: { dataZoom: { yAxisIndex: ‘none‘ }, dataView: {readOnly: false}, magicType: {type: [‘line‘, ‘bar‘]}, restore: {}, saveAsImage: {} } }, xAxis: { type:‘category‘, boundaryGap: false, data: [‘1組‘,‘2組‘,‘3組‘,‘4組‘,‘5組‘,‘6組‘,‘7組‘] }, 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: ‘平均值‘}, [{ symbol: ‘none‘, x: ‘90%‘, yAxis: ‘max‘ }, { symbol: ‘circle‘, label: { normal: { position: ‘start‘, formatter: ‘最大值‘ } }, type: ‘max‘, name: ‘最高點‘ }] ] } } ] }; // 數據未加載前的loading動畫 // mychart.showLoading(); //加載echarts事例 mychart.setOption(option); </script> </body> </html>
Echarts在官網下載echarts包放入和html一樣的工程裏註意scr包路徑
需要什麽圖形找到替換option內容就可以了！
其實就是js文件,註意script內容修改
百度Echarts導入