//app/main/res/layout <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <WebView android:id="@+id/chartshow_web" android:layout_width="match_parent" android:layout_height="match_parent"/> <WebView android:id="@+id/chart_web" android:layout_width="match_parent" android:layout_height="match_parent"/> </RelativeLayout> //app/main/java/activity package com.bluecard.cloudtalkback.user.activity; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.webkit.WebView; import android.webkit.WebViewClient; import android.widget.Button; import com.bluecard.cloudtalkback.R; import androidx.appcompat.app.AppCompatActivity; public class PsechartActivity extends AppCompatActivity { private WebView chartshow_web; private WebView echart_web; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.psechart); initView(); } /** * 初始化页面元素 */ private void initView(){ echart_web = (WebView)findViewById(R.id.chart_web); echart_web.getSettings().setAllowFileAccess(true); echart_web.getSettings().setJavaScriptEnabled(true); echart_web.loadUrl("file:///android_asset/myEchart.html"); chartshow_web = (WebView) findViewById(R.id.chartshow_web); chartshow_web.getSettings().setAllowFileAccess(true); chartshow_web.getSettings().setJavaScriptEnabled(true); chartshow_web.loadUrl("file:///android_asset/myEchart.html"); } //app/main/asstes/js <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 100%;height:400px;"></div> <div id="zhexian" style="width: 100%;height:430px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById(\'main\')); // 指定图表的配置项和数据 var option = { title: { text: \'Customized Pie\', left: \'center\', top: 20, textStyle: { color: \'#ccc\' } }, tooltip: { trigger: \'item\', formatter: \'{a} <br/>{b} : {c} ({d}%)\' }, visualMap: { show: false, min: 80, max: 600, inRange: { colorLightness: [0, 1] } }, legend: { bottom: 10, left:\'center\', data: [\'直接访问\', \'邮件营销\', \'联盟广告\', \'视频广告\', \'搜索引擎\'] }, grid: { top: "8%", left: "3%", right: "6%", bottom: "14%", height: "70%", containLabel: true }, series: [ { name: \'访问来源\', type: \'pie\', radius: \'55%\', center: [\'50%\', \'50%\'], data: [ {value: 335, name: \'直接访问\'}, {value: 310, name: \'邮件营销\'}, {value: 274, name: \'联盟广告\'}, {value: 235, name: \'视频广告\'}, {value: 400, name: \'搜索引擎\'} ] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); // 基于准备好的dom，初始化echarts实例 var zhexianmyChart = echarts.init(document.getElementById(\'zhexian\')); // 指定图表的配置项和数据 var zheixnaoption = { title: { text: \'Customized Pie\', left: \'center\', top: 20, textStyle: { color: \'#ccc\' } }, tooltip: { trigger: \'axis\' }, legend: { icon:\'roundRect\', bottom: 0, left: \'center\', data: [\'邮件营销\', \'联盟广告\', \'视频广告\', \'直接访问\', \'搜索引擎\'] }, grid: { top: "16%", left: "3%", right: "6%", bottom: "10%", height: "70%", containLabel: true }, xAxis: { data: [\'周一\', \'周二\', \'周三\', \'周四\', \'周五\', \'周六\', \'周日\'] }, yAxis: { type: \'value\' }, series: [ { name: \'邮件营销\', type: \'line\', stack: \'总量\', data: [120, 132, 101, 134, 90, 230, 210] }, { name: \'联盟广告\', type: \'line\', stack: \'总量\', data: [220, 182, 191, 234, 290, 330, 310] }, { name: \'视频广告\', type: \'line\', stack: \'总量\', data: [150, 232, 201, 154, 190, 330, 410] }, { name: \'直接访问\', type: \'line\', stack: \'总量\', data: [320, 332, 301, 334, 390, 330, 320] }, { name: \'搜索引擎\', type: \'line\', stack: \'总量\', data: [820, 932, 901, 934, 1290, 1330, 1320] } ] }; // 使用刚指定的配置项和数据显示图表。 zhexianmyChart.setOption(zheixnaoption); </script> </body> </html>