安卓调用Apache ECharts 之柱状图篇，使用WebView来加载展示本地的html文件

Andy醒

已于 2023-05-05 11:15:18 修改

阅读量359

点赞数

分类专栏： Android html 文章标签： echarts 前端 javascript android webview

于 2023-05-05 09:34:44 首次发布

本文链接：https://blog.csdn.net/qq_28189091/article/details/130499701

版权

Android 同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

先上效果图

1，安卓项目中依赖

implementation 'com.github.abel533:ECharts:3.0.0.2'

2，创建WedActivity类

public class WedActivity extends MainActivity {

    private WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        hideTitle(true);
        fullScreen(this, true);
        addBodyView(R.layout.wed_activity);
        initView();
    }

    public void  initView(){
        webView=findViewById(R.id.webView);
        webView.setWebChromeClient(new WebChromeClient());
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("file:///android_asset/echarts.html");

    }

 

}

3，在xml中创建wed_activity

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:gravity="center"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/webView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"></WebView>

</LinearLayout>

4，创建一个echarts.html 文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Apache ECharts Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 350px; height: 400px;"></div>
<script>
var chart = echarts.init(document.getElementById('chart'));
var option = {
    xAxis: {
         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子"],
         axisLabel: {//调整width可能会导致标签显示不全
                interval: 0, // 设置标签全部显示
                margin: 10, // 调整标签与轴线之间的距离
                textStyle: {
                    fontSize: 12 // 设置标签字体大小
                }
        },
         axisTick: {show: false},//设置x轴底部标签为虚线
         axisLine: {
            show: false,
            lineStyle: {
                type: 'dashed' // 设置为虚线
            }
        }
    },

    yAxis: {
     axisTick: {show: false},
     axisLine: {
            show: false,
            lineStyle: {
                type: 'dashed' // 设置为虚线
            }
        },
        splitLine: { // 添加此项即可设置中间虚线
            show: true,
            lineStyle: {
                type: 'dashed'
            }
        }

    },
    series: [{
        name: '数据1',
        type: 'bar',
        data: [5, 15, 25, 35, 45, 55,15],
        itemStyle: {
            color: function(params) {
                var value = params.value;
                //根据区间值来设置不同柱状图的颜色渐变
                if (value < 10) {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#C8FF9E'
                    }, {
                        offset: 1,
                        color: '#05CC18'
                    }]);
                } else if (value < 20) {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#10A2FB'
                    }, {
                        offset: 1,
                        color: '#1B5AF7'
                    }]);
                } else {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#FF8E9B'
                    }, {
                        offset: 1,
                        color: '#FD021E'
                    }]);
                }
            }
        }
    }]
};
chart.setOption(option);
</script>
</body>
</html>

5，把创建好了的echarts.html 文件放到安卓项目assets文件下面

Andy醒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
安卓调用Apache ECharts 之柱状图篇，使用WebView来加载展示本地的html文件

5，把创建好了的echarts.html 文件放到安卓项目assets文件下面。3，在xml中创建wed_activity。4，创建一个echarts.html 文件。2，创建WedActivity类。
复制链接

扫一扫