Android Echarts单折线图和多折线图的使用

最新推荐文章于 2024-08-03 23:19:11 发布

元气小嘉

最新推荐文章于 2024-08-03 23:19:11 发布

阅读量3.3k

点赞数

分类专栏： Android 文章标签： android echarts

本文链接：https://blog.csdn.net/erjia_/article/details/124061718

版权

Android 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

Android 内Echarts的使用

一、单折线图形式
- 1.代码示例：
二、多折线图形式
- 1.代码示例
总结

提示：以下是本篇文章正文内容，下面案例可供参考

一、单折线图形式

参考链接：https://www.jianshu.com/p/c2b589170379

1.代码示例：

引入依赖

dependencies {
    compile 'com.github.abel533:ECharts:3.0.0.2'
    implementation 'com.google.code.gson:gson:2.8.1'
}

echarts.html文件

<!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 type="text/javascript" src="./echarts.min.js"></script>
<script type="text/javascript">
            var app ={};
            function loadEcharts(echartJson){
            var dom =document.getElementById("container");
            var myChart =echarts.init(dom);
                var option = JSON.parse(echartJson);
                if (option &&typeof option ==="object") {
                    myChart.setOption(option,true);
                }
            }
        </script>
</body>
</html>

EchartsOptionUtil

public class EchartOptionUtil {

    public static GsonOption getLineChartOptions(Object[] xAxis, Object[] yAxis) {
        GsonOption option = new GsonOption();
        //option.title().setText("");
        //图例
        option.legend("销量");
        //trigger为'item'时只会显示该点的数据，为'axis'时显示该列下所有坐标轴所对应的数据
        option.tooltip().trigger(Trigger.axis);
        //设置y轴数据
        ValueAxis valueAxis = new ValueAxis();
        option.yAxis(valueAxis);
        CategoryAxis categorxAxis = new CategoryAxis();
        categorxAxis.axisLine().onZero(false);
        categorxAxis.boundaryGap(true);
        //设置x轴数据
        categorxAxis.data(xAxis);
        option.xAxis(categorxAxis);

        Line line = new Line();
        //注意！！name要和上面的图例名称一样，不然图例会不显示！！
        line.smooth(false).name("销量").data(yAxis).itemStyle().normal().lineStyle().shadowColor("rgba(0,0,0,0.4)");
        option.series(line);
        return option;
    }
}

EchartsView

public class EchartView extends WebView {
    private static final String TAG = EchartView.class.getSimpleName();

    public EchartView(Context context) {
        this(context, null);
    }

    public EchartView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public EchartView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        WebSettings webSettings = getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        webSettings.setSupportZoom(false);
        webSettings.setDisplayZoomControls(false);
        loadUrl("file:///android_asset/echarts.html");
    }

    /**刷新图表
     * java调用js的loadEcharts方法刷新echart
     * 不能在第一时间就用此方法来显示图表，因为第一时间html的标签还未加载完成，不能获取到标签值
     * @param option
     */
    public void refreshEchartsWithOption(GsonOption option) {
        if (option == null) {
            return;
        }
        String optionString = option.toString();
        String call = "javascript:loadEcharts('" + optionString + "')";
        loadUrl(call);
    }
}

Activity内的使用

public class MainActivity extends AppCompatActivity {
    private EchartView lineChart;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        lineChart = findViewById(R.id.lineChart);
        lineChart.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                //最好在h5页面加载完毕后再加载数据，防止html的标签还未加载完成，不能正常显示
                refreshLineChart();
            }
        });
    }

    private void refreshLineChart(){
        Object[] x = new Object[]{
                "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"
        };
        Object[] y = new Object[]{
                820, 932, 901, 934, 1290, 1330, 1320
        };
        lineChart.refreshEchartsWithOption(EchartOptionUtil.getLineChartOptions(x, y));
    }

}

结果转自上链接

二、多折线图形式

参考链接：https://blog.csdn.net/grh_168/article/details/86481462

1.代码示例

代码如下（示例）：

引入依赖
echarts.html
EchartsOptionUtil (有改动！）

import com.github.abel533.echarts.axis.CategoryAxis;
import com.github.abel533.echarts.axis.ValueAxis;
import com.github.abel533.echarts.code.Trigger;
import com.github.abel533.echarts.code.X;
import com.github.abel533.echarts.json.GsonOption;
import com.github.abel533.echarts.series.Line;

import java.util.ArrayList;
import java.util.List;

public class EchartOptionUtil {
     //y轴数据传入为List形式
    public static GsonOption getLineChartOptions(Object[] xAxis, List<Object[]> yAxis) {
    
        GsonOption option = new GsonOption();
        option.title().setText("1111");
        List<String> m=new ArrayList<>();
        m.clear();
        //注意！！一定要和下面的name一样，不然不显示（翻车现场TAT）
        m.add("质量:kg");
        m.add("新");
        String[] types = {"质量","新"};
        option.legend().data(m).x(X.center);
        //option.legend("质量:kg");
       
        //trigger为'item'时只会显示该点的数据，为'axis'时显示该列下所有坐标轴所对应的数据
        option.tooltip().trigger(Trigger.axis);
        //设置y轴数据
        ValueAxis valueAxis = new ValueAxis();
        option.yAxis(valueAxis);
        CategoryAxis categorxAxis = new CategoryAxis();
        categorxAxis.axisLine().onZero(false);
        categorxAxis.boundaryGap(true);
        //设置x轴数据
        categorxAxis.data(xAxis);
        option.xAxis(categorxAxis);
        //两条线
        Line line = new Line();
        Line line1=new Line();
        line.smooth(false).name("质量:kg").data(yAxis.get(0)).itemStyle().normal().lineStyle().shadowColor("rgba(0,0,0,0.4)");
        line1.smooth(false).name("新").data(yAxis.get(1)).itemStyle().normal().lineStyle().shadowColor("rgba(0,0,0,0.4)");
        //装入数据表
        option.series(line);
        option.series(line1);
        return option;
    }
}

4.EchatsView无改动
5.Activity内使用

String[] x={"1","2","3","4","5","6","7"};
        Random random = new Random();
        //测试数据，随机产生
        Object[] y=new Object[7];
        for(int i=0;i<7;i++)
        {
            int ran=(int)(random.nextDouble()*100+day*10);
            y[i]=ran;
        }
        Object[] z=new Object[30];
        for(int i=0;i<30;i++)
        {
            int ran=(int)(random.nextDouble()*100+month*10);
            z[i]=ran;
        }
        m.clear();
        m.add(y);
        m.add(z);
        echartView.refreshEchartsWithOption(EchartOptionUtil.getLineChartOptions(x, m));