第三方组件—百度Echart基本应用（本地H5与客户端相互调用）

最新推荐文章于 2024-08-22 09:55:39 发布

喵咪妮

最新推荐文章于 2024-08-22 09:55:39 发布

阅读量1k

点赞数

分类专栏： Andrid 文章标签： echart

本文链接：https://blog.csdn.net/qq_33405030/article/details/79899081

版权

Andrid 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

第一次接触图表这种东西，最开始呢说的是对用MPAndroid，各种图表，什么条形图、折线图、饼图、散点图、组合图等等，组长说，好好写这个图表以后项目会用到，然而给我项目的时候，公司规定统一echart，那个心理真刺激，好了，开始我的第一篇博客之旅；

Echart基本介绍及相应的属性这里我就不一一介绍了，贴官网（http://echarts.baidu.com/）；

Html页面编写：

1、在head中引入 js 脚本

<head>
    <meta charset="utf-8"/>
    <style>
        html, body {
        height: 100%;
        }
        body {
        background-color: #fff;
        font-family: "Microsoft YaHei";
        }
        .bg {
        }
        .item {
        // padding: 30px 30px 50px;
        }
    </style>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main"
     style="float: center; width: 1000px;height:650px;margin-bottom: 15px"></div>
<!-- ECharts单文件引入 -->
<script src="js/echarts.min.js"></script>
<script type="text/javascript">

//声明Echarts实例
  var myChart;
//声明图表配置项和数据
var options;
//symbol的images的格式“image://./images/node.png”最好是能够写绝对路径，加上“//.”回到根目录echart/
var lineJson;//用于临时存储折线图json对象, 便于追加数据

//创建折线图
 function createLineChart(obj){
     lineJson=obj;
     options = {
        
         tooltip: {
                trigger: 'axis',
                formatter: " <br/>{b} - {c} "
           },
         xAxis: {
                id: 'dataX',
                type: 'category',
                boundaryGap:false,
                splitLine:{
                   show:true
                },
               axisLabel: {
               show: true,
               textStyle: {
                   fontSize: 18,
               }
           },
               data: obj.times //动态展示时间
           },
         yAxis: {
               type: 'value',
               axisLine: {onZero: false},
               splitLine:{
                   show:true
               },
               axisLabel: {
               show: true,
               textStyle: {
                   fontSize: 18,
               }
           },
               min:obj.minY,
               max:obj.maxY//动态设置范围，此范围是关于Y轴最高最低刻度的限制
           },

//dataZoom为echart自带的可左右拖动的进度的刻度详情，动态关联echart
         dataZoom: [
              {
                 id:'dataZoom',
                 show:true,
                 // type: 'inside',//inside 为拖动效果
                 type: 'slider',//slider为手动更新效果
                 realtime: true,
                 height:100,
                 filterMode: 'filter',
                 start: 20,
                 end: 85,
                 xAxisIndex: 0
             },
              {
           type: 'inside',
            realtime: true,
                 type: 'inside',
                 start: 20,
                 end: 85,
                 realtime: true
       }
           ],

         series: [{
           id: 'dataY',
           name: '',
           type: 'line',
           smooth: true,
           data: obj.steps, //动态步数数据
           //底部填满
           areaStyle:{normal: {color:'rgba(150,200,120,0.5)'}},
           lineStyle: {
              normal: {
               width: 5,
               color:"#3AAC37"
               }
           },
           // markPoint : {//标注点
           //              data : [//这种方式内部自动计算最值
           //                 {
           //                   type :'max'  ,
           //                   name:'最大值' ,
           //                   symbolSize: [25, 30],
           //                    symbolOffset:[0,'-60%']
           //                  },
           //                 {
           //                   type : 'min',
           //                   name: '最小值',
           //                   symbolSize: [25, 30],
           //                   symbolOffset:[0,'50%']
           //                 }
           //               ]
           //              },
            // markLine : {
            //            data : [
            //                   { type : 'average',name: '平均值' }
            //                 ]
            //            }
                 },


                  {
       data: obj.maxData,
       type: 'line',
       symbolSize: 0,
        lineStyle: {
              normal: {
               color:"#FF3838"
               }
           },
   },
   {
       data: obj.minData,
       type: 'line',
        symbolSize: 0,
        lineStyle: {
              normal: {
               color:"#FF3838"
               }
           },
   }
   ]
           };
        }

 //更新折线图的缩放起始位置
 function updateZoomState(start,end){
    myChart.setOption({
       dataZoom: [{
            id: 'dataZoom',
            start: start,
            end: end
       }]
   });
 }

 //获取数组最小值
 function getMinValue(obj){
       var min = obj.steps[0];
       for (var i = 1; i < obj.steps.length; i++){
       if (obj.steps[i] < min){
           min = obj.steps[i];
         }
       }
       return min;
  }
 //获取数组最大值
 function getMaxValue(obj){
       var max = obj.steps[0];
       for (var i = 1; i < obj.steps.length; i++){
       if (obj.steps[i] > max) {
           max = obj.steps[i];
         }
       }
       return max;
 }

//更新折线图数据 继续在后面追加数据
 function updateDataXY(dataX,dataY){

      myChart.setOption({
            xAxis: {
                id: 'dataX',
                data:lineJson.times.concat(dataX)
           },
           series:[{
                id: 'dataY',
                areaStyle: {
                 color:'#3AAC37'
               },
                data:lineJson.steps.concat(dataY)
           }],
           dataZoom: [{
                id: 'dataZoom',
                start: 60,
                end: 100
           }]
       });
 }

关于html的一些注意点：

功能函数createLineChart（obj）是Android客户端即将调用的动态加载数据的切入点；
当为echart底部添加左右滑动的相关刻度时，若没有指定相关type，有可能会造成当你手动拖动图表时造成整个图表的放大缩小而并不是在固定的X、Y轴基础之上，这个时候一定要注意type：inside这个属性；
当在此基础之上填满区域，则有的时候或许会造成添加areaStyle无效，第一个方式是直接添加areaStyle:{}，默认其填充色，第二种方法是areaStyle:{normal:{color:''}}，如果这两种方法均没有小效果，那你就要好好看看你的html源码，可以借助echart官网实例进行验证，h5这种东西，可能一个逗号都会造成整个图表加载不出来，切记谨慎；
echart所涉及的图表有折线图饼图等等，那么曲线图的更改只需要添加属性smooth:true，顾名思义“光滑度”；

关于客户端调用的问题：

1、第一步添加本地html路径

mWebView.loadUrl("file:///android_asset/echart/test1.html");

2、设置webview相关属性（调用JS方法，android版本大于17，添加注解@SuppressLint("JavascriptInterface")

WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
webSettings.setUseWideViewPort(true);
webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
webSettings.setDisplayZoomControls(false);
webSettings.setAllowFileAccess(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setSupportZoom(true);
webSettings.setLoadWithOverviewMode(true);

3、直接调用WebView.setWebViewClient方法即可设置WebViewClient回调，这里重写的三个函数，onPageStarted会在WebView开始加载网页时调用，onPageFinished会在加载结束时调用，shouldOverrideUrlLoading方法加载url。这两个函数就可以完成我们开篇时的需求：在开始加载时显示进度条，在结束加载时隐藏进度条。

mWebView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return super.shouldOverrideUrlLoading(view, url);
    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
    }

    @Override
    public void onPageFinished(WebView view, String url) {}

4、最好在onPageFinished方法中加载JS代码，以防网页未加载完成；其中createChart为JS与客户端的调用函数切入口，‘line’指定了图标的类型；此时我们只需要将我们的我们的数据封装成json传给js即可；

就当前文章所说的需要传递的参数，包括times(时间)、steps(步数)、minY(Y轴最小值)、maxY(Y轴最大值)、minData(最小标注线)、maxData(最大标注线)；

说明一下minData与maxData是设置两条标注线，而且是实心直线，echart所设置的标注线一般都是平均值，而且是虚线，这个时候最便捷的方法便是再画两条线，省事省力省心！

mWebView.loadUrl("javascript:createChart('line'," + gson.toJson(params) + ");");

最后，总结到这里，希望大家都能有所收获，谢谢；

喵咪妮

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录