Android 使用webview实现圆形图（ECharts）

最新推荐文章于 2023-05-05 09:34:44 发布

林丶

最新推荐文章于 2023-05-05 09:34:44 发布

阅读量553

点赞数 1

文章标签： android webview javascript

本文链接：https://blog.csdn.net/qq_42259105/article/details/102910000

版权

利用webview调用js

EchartAndroid入门篇https://echarts.apache.org/handbook/zh/get-started在app的main下创建assets文件夹，把下载下来的echarts.min.js文件放进去(min是压缩文件，占内存小)，然后继续根据新手指引走就行了。

直接截的图，放手机里可能会有点适配问题

设置饼状图（具体参数可以看官网文档，自定义颜色了，圆角了，大小了，角度了之类的）

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="./js/echarts.min.js"></script>
<script type="text/javascript">
    var dom =document.getElementById("container");
    var myChart =echarts.init(dom);

      //缺陷分析饼状图
    function createPieChart3(dataArray) {
      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}:({d}%)'
        },
        legend: {
          show: true,
          orient: 'vertical',
          top: 'middle',
          right: 40,
          icon: 'circle',
          textStyle: {
            fontSize: 8,
            fontWeight: 'normal'
          },
          itemGap: 15
        },
        series: [
          {
            name: '缺陷分析',
            type: 'pie',
            radius: '80%',
            left: -150,
            data: dataArray,
<!--            data: [-->
<!--              { value: 1048, name: '1#卸煤机 1048' },-->
<!--              { value: 735, name: '2#卸煤机 735' },-->
<!--              { value: 580, name: '3#卸煤机 580' },-->
<!--              { value: 484, name: '4#堆取料机 484' },-->
<!--              { value: 300, name: '5#皮带输煤系统 300' },-->
<!--              { value: 300, name: '6#辅机 300' }-->
<!--            ],-->
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                barBorderRadius: [50, 50, 0, 0] //圆角
              }
            },
            label: {
              show: false,
              position: 'center'
            },
            itemStyle: {
<!--              borderRadius: 6,-->
              borderColor: '#fff',
              borderWidth: 2,
              color: function (params) {
                //给出颜色组-->
                var colorList = [
                  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#004C92' }
                  ]),
                  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#FB4C75' }
                  ]),
                  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#FFB632' }
                  ]),
                  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#C787FB' }
                  ]),
                  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#3CCFA4' }
                  ]),
                  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#4098F5' }
                  ])
                ];
                return colorList[params.dataIndex];
              }
            }
          }
        ]
      };
      myChart.showLoading({
        text: '图表数据正在努力加载...'
      });
      myChart.setOption(option, true);
      myChart.hideLoading();
    }

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

初始化webview

private void initWebview() {
        //开启脚本支持
        tv_defect_webview.getSettings().setJavaScriptEnabled(true);
        //获取Assets目录下的文件 //这里是调用上边那个写有饼状图的html的
        tv_defect_webview.loadUrl("file:///android_asset/echart/my_echart.html");
        //监听是否加载完成
        tv_defect_webview.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
            }

            //加载完成
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                getAppHome();
            }

            //请求失败时显示失败的界面  *监听下，直接写出不来
            @Override
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                super.onReceivedError(view, errorCode, description, failingUrl);
            }
        });
    }

赋值，调用（传入的是个list）

    private void getAppHome() {
//      [
//        { value: 1048, name: '1#卸煤机 1048' },
//        { value: 735, name: '2#卸煤机 735' },
//        { value: 580, name: '3#卸煤机 580' },
//        { value: 484, name: '4#堆取料机 484' },
//        { value: 300, name: '5#皮带输煤系统 300' },
//        { value: 300, name: '6#辅机 300' }
//      ]
        //这里假赋值就不详细写了，就是把数据做成上边这个样式传进去
        webview_list.clear();
        for (int i = 0; i < data.size(); i++) {
            webview_list.add(new CreatePieChartBean(value, name));
        }
        String loadJs = "javascript:createPieChart3(" + webview_list.toString() + ");";
        tv_defect_webview.loadUrl(loadJs);
    }

调用js时注意不要写错了
刚调用完mWebViewBar.loadUrl("file:///android_asset/echart/myechart.html");后不要直接调用mWebViewBar.loadUrl("javascript:createChart('bar',[89,78,77]);");会白屏
如果是在frgment上使用，建议延时初始化webview，不然第一次可能出不来

林丶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android 使用webview实现圆形图（ECharts）

利用webview调用js在app下创建assets文件夹，在文件夹里面加上js代码下边有代码示例把assets下的js全复制过去就行 mye'chart.xml可以自行修改https://gitee.com/wangjian/EchartAndroid/tree/master/EchartST/assets/echart贴张效果图请忽略其他部分直接从项目里截的图...
复制链接

扫一扫