目标：
angular中代码：
import { Component, OnInit, ViewChild } from '@angular/core';
@ViewChild('main1') dom: any;
constructor(private datePipe: DatePipe， private titleService: Title) {
this.titleService.setTitle('尝试页面');
}
async ngOnInit() {
// 基于准备好的dom，初始化echarts实例
console.log(this.dom);
// 得到的this.dom.nativeElement才是我们想要的div
const myChart = echarts.init(this.dom.nativeElement);
// 指定图表的配置项和数据
const option: any = {
// 折线图的颜色
color: ['#4FCB73', '#FB9E1B'],
legend: {
// 这个data 可要可不要，data的数据内容是从 series 每个对象的name里获取的
data: ['独山', '独山外海'],
right: 10,
},
// 鼠标触发类型
tooltip: {
trigger: 'axis'
},
// 直角坐标系内绘图网格 里面的百分比数据可以看作padding或margin
grid: {
left: '8%',
right: '2%',
bottom: '1%',
containLabel: true
},
xAxis: {
type: 'category',
// x轴上的数据，这里已经提前获取了
data: this.xaxis,
// 让x轴的数据倾斜、设置数据间距
axisLabel: {
interval: 1,
rotate: 45
},
},
yAxis: {
name: '水位(m)/黄海',
type: 'value'
},
series: [
{
name: '独山',
// 第一个对象的数据，这里已经提前获取了
data: this.data1,
type: 'line'
},
{
name: '独山外海',
// 第二个对象的数据，这里已经提前获取了
data: this.data2,
type: 'line'
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
在echarts官网上直接运行的代码
option = {
// 折线图的颜色
color: ['#4FCB73', '#FB9E1B'],
legend: {
// 这个data 可要可不要，data的数据内容是从 series 每个对象的name里获取的
data: ['独山', '独山外海'],
right: 10,
},
// 鼠标触发类型
tooltip: {
trigger: 'axis'
},
// 直角坐标系内绘图网格 里面的百分比数据可以看作padding或margin
grid: {
left: '8%',
right: '2%',
bottom: '1%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['2020-07-02 00:00:00', '2020-07-02 02:00:00', '2020-07-02 04:00:00',
'2020-07-02 06:00:00','2020-07-02 08:00:00','2020-07-02 10:00:00',
'2020-07-02 12:00:00','2020-07-02 14:00:00','2020-07-02 16:00:00',
'2020-07-02 18:00:00','2020-07-02 200:00:00','2020-07-02 220:00:00',
'2020-07-02 24:00:00'],
// 让x轴的数据倾斜、设置数据间距
axisLabel: {
// interval: 1,
rotate: 45
},
},
yAxis: {
name: '水位(m)/黄海',
type: 'value'
},
series: [
{
name: '独山',
data: ['5', '10', '3', '7', '2', '1', '3', '7', '2', '1', '3', '7'],
type: 'line'
},
{
name: '独山外海',
data: [ '3', '7', '2','5', '10', '3', '7', '2', '1', '1', '3', '7'],
type: 'line'
}
]
}
