ECharts(官网),一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
我修改的代码示例如下:
启用本地echarts,不依赖网络,
<!-- <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.js"></script> --> <script src="./echarts.js"></script>
启用网络上echarts,
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.js"></script> <!-- <script src="./echarts.js"></script> -->
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网页标签</title> <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.js"></script> <!-- <script src="./echarts.js"></script> --> </head> <body> <div id="main" style="width:600px; height:400px;"></div> <script type="text/javascript"> var myChart=echarts.init(document.getElementById('main')); var option = { title: {text:'标题',left:'center'}, tooltip: {trigger:'item',formatter:"{a} <br/>{b}: {c} ({d}%)"}, legend: {data:['A1','A2','A3'],left:'right',orient:'vertical',}, series: [{name:'单位: ',type:'pie',data:[{value:200,name:'A1'},{value:150,name:'A2'},{value:300,name:'A3'}],itemStyle:{emphasis:{shadowBlur:10,shadowOffsetX:0,shadowColor:'rgba(0, 0, 0, 0.5)'}}}] }; myChart.setOption(option); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网页标签</title> <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.js"></script> <!-- <script src="./echarts.js"></script> --> </head> <body> <div id="main" style="width:600px; height:400px;"></div> <script type="text/javascript"> var myChart=echarts.init(document.getElementById('main')); var option = { title: {text:'标题',left:'center'}, tooltip: {trigger:'item',formatter:"{a} <br/>{b}: {c} ({d}%)"}, legend: {data:['A1','A2','A3'],left:'right',orient:'vertical',}, series: [{name:'单位: ',type:'pie',radius:['45%','75%'],data:[{value:200,name:'A1'},{value:150,name:'A2'},{value:300,name:'A3'}],itemStyle:{emphasis:{shadowBlur:10,shadowOffsetX:0,shadowColor:'rgba(0, 0, 0, 0.5)'}}}] }; myChart.setOption(option); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网页标签</title> <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.js"></script> <!-- <script src="./echarts.js"></script> --> </head> <body> <div id="main" style="width:600px; height:400px;"></div> <script type="text/javascript"> var myChart=echarts.init(document.getElementById('main')); var option = { title: {text:'标题',subtext:'x-y',left:'center'}, tooltip: {trigger:'axis',axisPointer:{type:'shadow'}}, grid:{left:'3%',right:'4%',bottom:'3%',containLabel:true}, legend: {data:['标签1','标签2'],left:'right'}, xAxis: {data: ["A1","A2","A3","A4"],axisLabel:{formatter:'{value}'}}, yAxis: {axisLabel:{formatter:'{value}'}}, series: [{name:'标签1',type:'bar',barWidth:'30%',data: [5, 10, 20, 15]},{name:'标签2',type:'bar',barWidth:'30%',data: [40, 30, 20, 15]}] }; myChart.setOption(option); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网页标签</title> <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.js"></script> <!-- <script src="./echarts.js"></script> --> </head> <body> <div id="main" style="width:600px; height:400px;"></div> <script type="text/javascript"> var myChart=echarts.init(document.getElementById('main')); var option = { title: {text:'标题',subtext:'x-y',left:'center'}, tooltip: {trigger:'axis',axisPointer:{type:'shadow'}}, grid:{left:'3%',right:'4%',bottom:'3%',containLabel:true}, legend: {data:['标签1','标签2'],left:'right'}, xAxis: {min:0,max:5,type:'value',axisLine:{onZero:false},axisLabel:{formatter:'{value}'}}, yAxis: {min:0,max:50,type:'value',axisLine:{onZero:false},axisLabel:{formatter:'{value}'}}, series: [{name:'标签1',type:'line',areaStyle:{normal:{opacity:0.4}},smooth:true,symbolSize:15,symbol:'circle',data:[[1,5],[2,10],[3,20],[4,15]],markLine:{silent:true,data:[{xAxis:3.3},{yAxis:22}]}}, //symbol: 'circle','rect' {name:'标签2',type:'line',areaStyle:{normal:{opacity:0.4}},smooth:true,symbolSize:15,symbol:'circle',data:[[1,40],[2,30],[3,15],[4,25]],markLine:{silent:true,data:[{xAxis:2.2},{yAxis:33}]},markPoint:{data:[{name:'特殊点',xAxis:2.5,yAxis:30}]},markArea:{silent:true,itemStyle:{normal:{color:'transparent',borderWidth:1,borderType:'dashed'}},data:[[{name:'区间',xAxis:2.6,yAxis:30},{xAxis:3.9,yAxis:10}]]},}]}; myChart.setOption(option); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网页标签</title> <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.js"></script> <!-- <script src="./echarts.js"></script> --> </head> <body> <div id="main" style="width:600px; height:400px;"></div> <script type="text/javascript"> var myChart=echarts.init(document.getElementById('main')); var option = { title: {text:'标题',subtext:'x-y',left:'center'}, tooltip: {trigger:'axis',axisPointer:{type:'shadow'}}, grid:{left:'3%',right:'4%',bottom:'3%',containLabel:true}, legend: {data:['标签1','标签2'],left:'right'}, xAxis: {data: ["A1","A2","A3","A4"],axisLabel:{formatter:'{value}'}}, yAxis: {axisLabel:{formatter:'{value}'}}, series: [{name:'标签1',type:'bar',barWidth:'40%',data:[5, 10, 20, 15]},{name:'标签2',type:'line',smooth:true,symbolSize:15,symbol:'circle',data:[40, 30, 20, 15]}] ////symbol: 'circle','rect' }; myChart.setOption(option); </script> </body> </html>