使用IONIC制作曲线图、柱状图、以及饼形图

xiaoxiao2022-07-14 169

先看效果

曲线图柱状图

饼形图（可隐藏选中的饼形图数据，只显示特定的饼形图数据）

实现步骤

1. 先安装插件

npm install echarts --save

2. 在index.html中引入如下这句代码，要放在cordova.js之后

3.实现代码

1). html页面

<ion-header> <ion-navbar> <ion-title>Filter</ion-title> </ion-navbar> </ion-header> <ion-content padding> <div #EchartsContent class="echart-pie"></div> </ion-content>

2). css页面

.echart-pie { width: 100%; height: 380px; }

3). ts页面

import { Component, ViewChild, ElementRef } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import * as echarts from 'echarts'; /** * Generated class for the GoodsListPage page. * * See https://ionicframework.com/docs/components/#navigation for more info on * Ionic pages and navigation. */ @IonicPage() @Component({ selector: 'page-goods-list', templateUrl: 'goods-list.html', }) export class GoodsListPage { @ViewChild('EchartsContent') container: ElementRef; echartsOptions: any = {}; constructor(public navCtrl: NavController, public navParams: NavParams) { } ionViewDidLoad() { console.log('ionViewDidLoad GoodsListPage'); //曲线图 //this.Diagram(); //饼形图 //this.Histogram(); //柱状图 this.PieChart(); echarts.init(this.container.nativeElement).setOption(this.echartsOptions); } //曲线图 Diagram() { this.echartsOptions = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [8, 9, 4, 6, 9, 6, 7], type: 'line', smooth: true }] }; } //柱状图 Histogram(){ var dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放']; var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220]; var yMax = 500; var dataShadow = []; this.echartsOptions = { title: { text: '特性示例：渐变色阴影点击缩放', subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom' }, xAxis: { data: dataAxis, axisLabel: { inside: true, textStyle: { color: '#fff' } }, axisTick: { show: false }, axisLine: { show: false }, z: 10 }, yAxis: { axisLine: { show: false }, axisTick: { show: false }, axisLabel: { textStyle: { color: '#999' } } }, dataZoom: [ { type: 'inside' } ], series: [ { // For shadow type: 'bar', itemStyle: { normal: { color: 'rgba(0,0,0,0.05)' } }, barGap: '-100%', barCategoryGap: '40%', data: dataShadow, animation: false }, { type: 'bar', itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: '#83bff6' }, { offset: 0.5, color: '#188df0' }, { offset: 1, color: '#188df0' } ] ) }, emphasis: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: '#2378f7' }, { offset: 0.7, color: '#2378f7' }, { offset: 1, color: '#83bff6' } ] ) } }, data: data } ] }; } //饼形图 PieChart(){ this.echartsOptions = { title: { text: '某站点用户访问来源', subtext: '纯属虚构', x: 'center' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, series: [ { name: '访问来源', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ { value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 1548, name: '搜索引擎' } ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; } }

最后

1.曾借鉴参考于链接一：https://blog.csdn.net/qsbbl/article/details/80728126（这是个美女哦！）

以及链接二：https://www.bbsmax.com/A/n2d9bZ0VzD/

本来准备按照上面链接一的那位美女那样进行操作，结果发现有点问题；链接二的博主，封装了一个component组件进去！最后总结出本文，以供大家参考！

2. 这是本文使用插件的官网地址：https://echarts.baidu.com/examples/index.html#chart-type-pi

最新回复(0)