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了，自己调整下。
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论