angular cli 使用echarts
程序员文章站
2022-03-20 16:17:28
1、安装库 npm install typings echarts --global npm install ngx-echarts --save npm install @types/echarts --save 2、app.module引入 import { BrowserModule } fr ......
1、安装库
npm install typings echarts --global
npm install ngx-echarts --save
npm install @types/echarts --save
2、app.module引入
import { browsermodule } from '@angular/platform-browser'; import { ngmodule } from '@angular/core'; import { approutingmodule } from './app-routing.module'; import { appcomponent } from './app.component'; import { homecomponent } from './home/home.component'; import {browseranimationsmodule} from "@angular/platform-browser/animations"; import {buttonmodule} from 'primeng/primeng'; import { headercomponent } from './components/header/header.component'; // header components import {ngxechartsmodule} from 'ngx-echarts'; @ngmodule({ declarations: [ appcomponent, homecomponent, headercomponent, // selfhttp ], imports: [ browsermodule, httpclientmodule, approutingmodule, browseranimationsmodule, buttonmodule, ngxechartsmodule ], providers: [httpinterceptorproviders, apilist,{provide: locationstrategy, useclass: hashlocationstrategy}], bootstrap: [appcomponent] }) export class appmodule { }
3、具体文件使用
html代码
<div #mycharts echarts [options]="chartoption" class="demo-chart charstdiv" ></div>
ts代码
import { component, oninit, input } from '@angular/core'; import { messageservice } from 'primeng/api'; import * as ec from 'echarts'; // 没有安装ypes/echarts就会报错 @component({ selector: 'app-table', templateurl: './table.component.html', styleurls: ['./table.component.css'], providers: [messageservice] }) export class tablecomponent implements oninit { chartoption: any; constructor(private messageservice: messageservice) { } ngoninit() { this.selectedcolumns = this.tablelist.header; this.items = [ { label: '查看', icon: 'pi pi-eye', command: (event) => this.showdialog() }, { label: '删除', icon: 'pi pi-trash', command: (event) => this.del() } ]; } onrowselect(event) { this.data = { labels: [], datasets: [] }; this.displaysidebar = true; // 组装图表 var data1 = []; var data2 = []; var data3 = []; this.selectedlist.foreach((element, index) => { data1.push((element.month + '月')); // 销量 data2.push(element.sale); // 店铺数 data3.push(element.comnum); }); this.chartoption = { // title: { // text: '堆叠区域图' // }, backgroundcolor: '#2c343c', tooltip: { trigger: 'axis' }, legend: { data: ['零售额', '店铺总数',], textstyle: {//图例文字的样式 color: 'white', fontsize: 16 } }, toolbox: { orient: 'vertical', top: 'middle', feature: { // dataview: {//数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新。 // show: true,//是否显示组件。 // readonly: false // }, magictype: {//动态类型切换 示例:feature: { magictype: {type: ['line', 'bar', 'stack', 'tiled']}} show: true, type: ['line', 'bar'] }, restore: {//配置项还原。 show: true }, saveasimage: {} } }, datazoom: {//datazoom 组件 用于区域缩放,从而能*关注细节的数据信息,或者概览数据整体,或者去除离群点的影响。 type: 'slider',//滑动条型数据区域缩放组件 start: 0,//起始位置0 end: 100//结束位置100 }, grid: { left: '3%', right: '4%', bottom: '40px', containlabel: true }, xaxis: [ { type: 'category', boundarygap: false, axislabel: { interval: 0, textstyle: { color: '#c3dbff', //更改坐标轴文字颜色 fontsize: 14 //更改坐标轴文字大小 } }, data: data1, axisline: { linestyle: { color: 'white', //更改坐标轴颜色 } } } ], yaxis: [ { type: 'value', axislabel: { interval: 0, textstyle: { color: '#c3dbff', //更改坐标轴文字颜色 fontsize: 14 //更改坐标轴文字大小 } }, axisline: { linestyle: { color: 'white', //更改坐标轴颜色 } } } ], series: [ { name: '零售额', type: 'line', stack: '总量', areastyle: {normal: { color:new ec.graphic.lineargradient(0, 0, 0, 1, [ //随机颜色 { offset: 0, color: 'red' }, { offset: 0.5, color: 'pink' }, { offset: 1, color: '#ddd' } ]) }}, itemstyle: { normal: { color: function () { return '#' + math.floor(math.random() * 0xffffff).tostring(16); // 随机颜色 } } }, data: data2 }, { name: '店铺总数', type: 'line', stack: '总量', areastyle: {normal: { color:new ec.graphic.lineargradient(0, 0, 0, 1, [ { offset: 0, color: '#9cd4d8' }, { offset: 0.5, color: '#aec9fe' }, { offset: 1, color: 'pink' } ]) }}, itemstyle: { normal: { color: function () { return '#' + math.floor(math.random() * 0xffffff).tostring(16); } } }, data: data3 }, ] } } }
注意:渲染数据的时机要选好,组装数据放在最后组装,如果把chartoption 定义在前面,再给series赋值图表是不会更新的,当然ec的方法里面可能会有,但是确挺麻烦的,优先考虑简单的。
有点colorful了,自己调整下。