app.component.css
div{ width: 500px; height: 400px; float: left;}
app.component.html
<div id="chart1"></div><div id="chart2"></div><h2>Here are some links to help you start: </h2><ul> <li> <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2> </li> <li> <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2> </li> <li> <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2> </li></ul>
app.component.ts
import { Component } from '@angular/core';import * as echarts from 'echarts';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { title = 'my-app'; ngAfterViewInit(): void { let myChart1: any = echarts.init(document.getElementById('chart1') as HTMLDivElement); myChart1.setOption({ title:{ text:'柱状图', }, legend:{ data:['销量'] }, xAxis: { data: ['路子','狮子','椅子','弟子','旗子','鼻子'], }, yAxis: { }, series:{ name:'销量', type:'line', data:[5,20,36,10,19,24] } }); let myChart2: any = echarts.init(document.getElementById('chart2') as HTMLDivElement); myChart2.setOption({ title:{ text:'饼状图', }, series:{ name:'访问来源', type:'pie', roseType:'angle', data:[ {value:235,name:'视频广告'}, {value:124,name:'积分'}, {value:432,name:'iuki'}, {value:267,name:'会议'}, {value:198,name:'第三方'}, ] } }); }}
