2020-03-25 先放张效果图.gif
image.png
第一步:
到echarts官网下载一个需要的js版本,我这里是自己定制的,只选取了折线,柱状,饼图。
算了不放源文件了,太大了发不了文章。自己到官网下。
第二步:
第三步:找到:typings.d.ts 这个文件加入:
declare var echarts: any;
第四步:构建一个组件,并渲染界面
html
<div class="content">
<div id="container" style="height: 600px"></div>
<!--<div echarts [options]="chartOption" style="height: 400px" class="demo-chart"></div>
<div echarts [options]="option" style="height: 400px" class="demo-chart"></div>-->
</div>
ts
chartInit(): void {
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var option = {};
option = {
title: {
text: 'Step Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Step Start', 'Step Middle', 'Step End']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Step Start',
type: 'line',
step: 'start',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Step Middle',
type: 'line',
step: 'middle',
data: [220, 282, 201, 234, 290, 430, 410]
},
{
name: 'Step End',
type: 'line',
step: 'end',
data: [450, 432, 401, 454, 590, 530, 510]
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}
ngOnInit(): void {
this.chartInit();
}