echarts android使用教程,Android中echarts使用

//app/main/res/layout

android:id="@+id/chartshow_web"android:layout_width="match_parent"android:layout_height="match_parent"/>

android:id="@+id/chart_web"android:layout_width="match_parent"android:layout_height="match_parent"/>

//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 classPsechartActivity extends AppCompatActivity {privateWebView chartshow_web;privateWebView echart_web;

@Overrideprotected voidonCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.psechart);

initView();

}/**

* 初始化页面元素*/

private voidinitView(){

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

ECharts

//基于准备好的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}
{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);