angular使用echart示例

最新推荐文章于 2024-08-10 07:50:10 发布

guanguan0_0

最新推荐文章于 2024-08-10 07:50:10 发布

阅读量3.2k

点赞数 1

分类专栏： Angular 前端开发文章标签： echart angular使用echart

本文链接：https://blog.csdn.net/guanguan0_0/article/details/84142021

版权

前端开发同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

Angular

6 篇文章 0 订阅

订阅专栏

echart官网地址：http://www.echartsjs.com/examples/

以柱形图为例，具体视图如下，x轴和y轴可以收缩，用于展示多条数据

具体实现步骤：

1、下载echart包

$ npm install echarts

$ npm install ngx-echarts

2、在shared.module.ts中注册echart

import { NgxEchartsModule } from 'ngx-echarts';


imports: [
    NgxEchartsModule 
]

exports: [
    NgxEchartsModule 
]

3、具体使用场景

html

<div echarts [options]="chartOption3" class="demo-chart"></div>

// 引入 ECharts 主模块
import { EChartOption } from 'echarts';



// 创建表格对象
chartOption3: EChartOption = {};


// 初始化表格对象
initChart3(xData, data1, data2, data3) {
		this.chartOption3 = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow',
					label: {
						show: true
					}
				}
			},
			calculable: true,
			legend: {
				data: ['Growth', '出库量', '认证量', '认证时长'],
				itemGap: 5
			},
			grid: {
				top: '12%',
				left: '1%',
				right: '10%',
				containLabel: true
			},
			xAxis: [
				{
					type: 'category',
					data: xData
				}
			],
			yAxis: [
				{
					type: 'value',
				}
			],
			dataZoom: [
				{
					show: true,
					start: 94,
					end: 100
				},
				{
					type: 'inside',
					start: 94,
					end: 100
				},
				{
					show: true,
					yAxisIndex: 0,
					filterMode: 'empty',
					width: 30,
					height: '80%',
					showDataShadow: false,
					left: '93%'
				}
			],
			series: [
				{
					name: '出库量',
					type: 'bar',
					data: data1
				},
				{
					name: '认证量',
					type: 'bar',
					data: data2
				},
				{
					name: '认证时长',
					type: 'bar',
					data: data3
				}
			]
		}
	}


// 在获取到表格数据时调用初始化方法
this.initChart3(xData, data1, data2, data3)