//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=" 100%;height:400px;"></div> <div id="zhexian" style=" 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>