android 使用ECharts实现条状统计图的学习记录

最新推荐文章于 2024-05-20 16:50:16 发布

DengDongQi

最新推荐文章于 2024-05-20 16:50:16 发布

阅读量861

点赞数

分类专栏： Android

本文链接：https://blog.csdn.net/DengDongQi/article/details/86246152

版权

Android 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

一、 Echarts官网： Echarts官网；文档：文档

二、下载 echarts.min.js

下载页

三、下载的js文件放置ass文件夹下（ass下随意放置但是要和html文件中指定js的路径一致）

四、（条状统计图）myechart.html 源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style>
html,body {
    height: 100%;
    width: 100%;
}
</style>
    <!-- 引入 ECharts 文件 -->
    <script src="./js/echarts.min.js"></script>
</head>
<body>
<div id="main"
     style="height: 100%; width: 100%; border: 0px; text-align: left; align: left; valign: left;"></div>

<script type="text/javascript">
     // 基于准备好的dom，初始化echarts实例
     var myChart = echarts.init(document.getElementById('main'));

     function setBarData(a,b,c,d){
         var list = [];
         list.push(a);
         list.push(b);
         list.push(c);
         list.push(d);
        // 指定图表的配置项和数据
        var option = {

            //title: {
            //   text: '数量（个）'
            //},

            grid : { //设置图表在div中的位置
                top : '10%',
                left : '10%',
                right : '10%',
                bottom : '5%',
                show : false,
                containLabel : true
            },

            tooltip : {
                    show : true,
            },

            xAxis: {
                type : 'category',
                data: [ '社会单位', '小场所', '居民小区', '其他' ], //x轴数据显示数据
                boundaryGap : true , //值是在中间还在在原点
                axisLine : {
                        lineStyle : {
                            color :  '#cccccc'
                        },
                        show : true
                }, //x轴 的颜色
                axisLabel : {
                        interval : 0,
                        rotate : 0, //字体倾斜
                        textStyle : {
                            color : '#333333', // x轴的颜色
                            fontSize : '20'
                        }
                    }
            },

            yAxis: {
                axisLine : {
                        lineStyle : {
                            color :  '#333333'
                        },
                        show : true
                } //x轴 的颜色
            },

            series: [{
                name: '场所',
                type: 'bar',
                barWidth : 60,
                label : { // 设置数据是否显示
                        normal : {
                            show : true,
                            position : 'top',
                            textStyle : {
                                color : "#999999",
                                fontSize : '20'
                            }
                        },
                },
                data: [ {value:list[0], itemStyle: { color:'#1F7DD5'} },
                        {value:list[1], itemStyle: { color:'#8D5ECE'} },
                        {value:list[2], itemStyle: { color:'#D65976'} },
                        {value:list[3], itemStyle: { color:'#DF8853'} },
                ]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
     }


</script>
</body>
</html>

五、 activity 源码

public class StatisticsActivity extends BaseActivity implements View.OnClickListener {
    private WebView webView;
    private Button btQuery;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_statistics);
        inits();
        event();
    }


    private void inits() {
        setTitle("任务统计");
        btQuery = findViewById(R.id.btQuery);
        initWebView();


    }

    @SuppressLint("SetJavaScriptEnabled")
    private void initWebView() {
        webView = findViewById(R.id.webView);
        webView.getSettings().setUseWideViewPort(true);
        //1、LayoutAlgorithm.NARROW_COLUMNS 适应内容大小
        //2、LayoutAlgorithm.SINGLE_COLUMN 适应屏幕，内容将自动缩放
        webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
       
        //开启脚本支持
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("file:///android_asset/echart/myechart.html");

        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                setBarData(0,0,0,0);
                super.onPageFinished(view, url);
            }

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
    }

    /**
     * 设置统计图数据
     * @param value1 社会单位数
     * @param value2 小场所数
     * @param value3 居民小区数
     * @param value4 其他数
     * */
    private void setBarData(int value1,int value2,int value3,int value4){
        webView.loadUrl("javascript:setBarData(" + value1 + "," + value2 + "," + value3 + "," + value4 + ")");
    }

    private void event() {
        findViewById(R.id.ivBack).setOnClickListener(this);
        btQuery.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.ivBack:
                finish();
                break;
            case R.id.btQuery:

                break;
        }
    }

六、效果图：（“数量(个)”和“场所”是相对布局盖上去的。。。）

DengDongQi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
android 使用ECharts实现条状统计图的学习记录

一、 Echarts官网： Echarts官网；文档：文档二、下载 echarts.min.js三、下载的js文件放置ass文件夹下（ass下随意放置但是要和html文件中指定js的路径一致）四、（条状统计图）myechart.html 源码：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional/...
复制链接

扫一扫