Android 中Echarts创意设计

最新推荐文章于 2024-02-21 13:38:21 发布

Adorable_Rocy

最新推荐文章于 2024-02-21 13:38:21 发布

阅读量367

点赞数 2

分类专栏： android 文章标签： javascript java echarts

本文链接：https://blog.csdn.net/weixin_43409994/article/details/114310449

版权

android 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

使用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);
    }

}