使用Echarts分别设计柱状图和折线图以及仪表图
1.仪表图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 util.js -->
<script src="util.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100vw;height:100vh;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
series : [
{
type: 'gauge', //仪表图
startAngle: 0, //开始的角度
endAngle:350, //结束的角度
progress:{
show:true,
roundCap:true,
overlap:false,
clip:false,
itemStyle:{
borderWidth:1,
borderColor:'#464646'
}
},
data:[
{
value:20,
name:'库存容量(%)' //中间文字描述
}
]
}
]
};
var process = 100
var ivt = setInterval(function(){
option.series[0].data[0].value = process--;
myChart.setOption(option);
},150)
setTimeout(function(){
clearInterval(ivt)
option.series[0].data[0].value = 0;
myChart.setOption(option);
},15000)
// 开启以及关闭定时器
</script>
</body>
</html>
2.柱状图：
...
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var desc = []
var datas = []
// 指定图表的配置项和数据
var option = {
xAxis:{
type:'category', //汉字描述
data:desc
},
yAxis:{
type:'value',
name:'数量'},
series : [
{
type: 'bar',
data:datas,
itemStyle:{
show:true,
color:'blue'
}
}
],animation:true,
animationEasing:'linear',
label:{
show:true
}
};
var position = 0;
var arr = []
arr[0] = "引擎"
arr[1] = "车窗"
arr[2] = "前车门"
arr[3] = "后车门"
arr[4] = "座位"
arr[5] = "座椅"
arr[6] = "车架"
arr[7] = "车门"
arr[8] = "发动机"
arr[9] = "电力机"
var ivt = setInterval(function(){
desc.push(arr[position++])
datas.push(Math.floor(Math.random()*20+1))
myChart.setOption(option);
},1500)
setTimeout(function(){
clearInterval(ivt)
},15000)
</script>
</body>
</html>
3.折线图：
...
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var desc = []
var datas = []
// 指定图表的配置项和数据
var option = {
xAxis:{
type:'category',
data:desc
},
yAxis:{
type:'value',
name:'%'},
series : [
{
type: 'line',
data:datas
}
],animation:true,
animationEasing:'linear' //动画
};
var position = 1;
var ivt = setInterval(function(){
desc.push("环节"+(position++))
datas.push(Math.floor(Math.random()*100+1))
myChart.setOption(option);
},1500)
setTimeout(function(){
clearInterval(ivt)
},15000)
// 使用刚指定的配置项和数据显示图表。
</script>
</body>
</html>
4.引用Echarts：
public class Brand extends Fragment {
@BindView(R.id.sm9_gauge)
WebView sm9Gauge;
@BindView(R.id.sm9_bar)
WebView sm9Bar;
@BindView(R.id.sm9_line)
WebView sm9Line;
...
ButterKnife.bind(this,getView());
sm9Gauge.loadUrl("file:///android_asset/gauge.html");
sm9Bar.loadUrl("file:///android_asset/bar.html");
sm9Line.loadUrl("file:///android_asset/line.html");
//允许JS的使用
sm9Gauge.getSettings().setJavaScriptEnabled(true);
sm9Bar.getSettings().setJavaScriptEnabled(true);
sm9Line.getSettings().setJavaScriptEnabled(true);
}
}
5.最终成果展示：
