1、yarn add ngx-echarts
2、yarn add echarts
3、import {NgxEchartsModule} from 'ngx-echarts';
4、 <div echarts [options]="option" style="height: 160px;"></div>
5、模板一
import {graphic} from 'echarts';
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#000'
}
}
},
lineStyle: {
width: 1,
type: 'solid',
color: '#63ACFF'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '8%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '维修工作',
type: 'line',
stack: '总量',
areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210]
},
],
color: new graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#9BC9FF'},
{offset: 0.7, color: '#EFF6FF'},
{offset: 1, color: '#EFF6FF'}
]
)
};
6、模板二
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '1%',
left: '2%',
right: '7%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['实际故障', '统计故障', '风险等级']
},
series: [
{
name: '2011年',
type: 'bar',
data: [1049, 1317, 3302],
itemStyle: {
emphasis: {
barBorderRadius: [0, 6, 6, 0]
},
normal: {
barBorderRadius: [0, 6, 6, 0]
}
}
},
{
name: '2012年',
type: 'bar',
data: [1215, 1341, 3818],
itemStyle: {
emphasis: {
barBorderRadius: [0, 6, 6, 0]
},
normal: {
barBorderRadius: [0, 6, 6, 0]
}
}
}
],
color: ['#268AFF', '#50E3C2']
};
网友评论