//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>