1.安装echarts
npm install echarts --save
npm install ngx-echarts --save
2.angular.json引入 echarts.min.js
"build": {
"options": {
...
"scripts": ["node_modules/echarts/dist/echarts.min.js"]
...
}
}
3.app.module.ts 引入 NgxEchartsModule
import {NgxEchartsModule} from 'ngx-echarts';
@NgModule({
imports: [
...
NgxEchartsModule,
...
],
declarations: []
})
4.echarts.component.html
<div echarts [options]="option" class="echarts" id="main"></div>
5.echarts.component.ts
import {Component, ElementRef, OnInit, SimpleChanges} from '@angular/core';
const echarts = require('echarts');
@Component({
selector: 'app-echarts',
templateUrl: './echarts.component.html',
styleUrls: ['./echarts.component.scss'],
})
export class EchartsComponent implements OnInit {
option;
my_chart;
data = [
['2019-1-1', '初四'],
['2019-1-2', '初五'],
['2019-1-3', '初六'],
['2019-1-4', '初七'],
['2019-1-5', '初八', '小寒'],
['2019-1-6', '初九'],
['2019-1-7', '初十'],
['2019-1-8', '十一'],
['2019-1-9', '十二'],
['2019-1-10', '十三'],
['2019-1-11', '十四'],
['2019-1-12', '十五'],
['2019-1-13', '十六'],
['2019-1-14', '十七'],
['2019-1-15', '十八'],
['2019-1-16', '十九'],
['2019-1-17', '二十'],
['2019-1-18', '廿一'],
['2019-1-19', '廿二'],
['2019-1-20', '廿三', '大寒'],
['2019-1-21', '廿四'],
['2019-1-22', '廿五'],
['2019-1-23', '廿六'],
['2019-1-24', '廿七'],
['2019-1-25', '廿八'],
['2019-1-26', '廿九'],
['2019-1-27', '三十'],
['2019-1-28', '正月'],
['2019-1-29', '初二'],
['2019-1-30', '初三'],
['2019-1-31', '初四'],
['2019-2-1', '初五'],
['2019-2-2', '初六'],
['2019-2-3', '初七', '立春'],
['2019-2-4', '初八'],
['2019-2-5', '初九'],
['2019-2-6', '初十'],
['2019-2-7', '十一'],
['2019-2-8', '十二'],
['2019-2-9', '十三'],
['2019-2-10', '十四'],
['2019-2-11', '十五'],
['2019-2-12', '十六'],
['2019-2-13', '十七'],
['2019-2-14', '十八'],
['2019-2-15', '十九'],
['2019-2-16', '二十'],
['2019-2-17', '廿一'],
['2019-2-18', '廿二', '雨水'],
['2019-2-19', '廿三'],
['2019-2-20', '廿四'],
['2019-2-21', '廿五'],
['2019-2-22', '廿六'],
['2019-2-23', '廿七'],
['2019-2-24', '廿八'],
['2019-2-25', '廿九'],
['2019-2-26', '二月'],
['2019-2-27', '初二'],
['2019-2-28', '初三'],
['2019-3-1', '初四'],
['2019-3-2', '初五'],
['2019-3-3', '初六'],
['2019-3-4', '初七'],
['2019-3-5', '初八', '驚蟄'],
['2019-3-6', '初九'],
['2019-3-7', '初十'],
['2019-3-8', '十一'],
['2019-3-9', '十二'],
['2019-3-10', '十三'],
['2019-3-11', '十四'],
['2019-3-12', '十五'],
['2019-3-13', '十六'],
['2019-3-14', '十七'],
['2019-3-15', '十八'],
['2019-3-16', '十九'],
['2019-3-17', '二十'],
['2019-3-18', '廿一'],
['2019-3-19', '廿二'],
['2019-3-20', '廿三', '春分'],
['2019-3-21', '廿四'],
['2019-3-22', '廿五'],
['2019-3-23', '廿六'],
['2019-3-24', '廿七'],
['2019-3-25', '廿八'],
['2019-3-26', '廿九'],
['2019-3-27', '三十'],
['2019-3-28', '三月'],
['2019-3-29', '初二'],
['2019-3-30', '初三'],
['2019-3-31', '初四'],
['2019-4-1', '初五'],
['2019-4-2', '初六'],
['2019-4-3', '初七'],
['2019-4-4', '初八', '清明'],
['2019-4-5', '初九'],
['2019-4-6', '初十'],
['2019-4-7', '十一'],
['2019-4-8', '十二'],
['2019-4-9', '十三'],
['2019-4-10', '十四'],
['2019-4-11', '十五'],
['2019-4-12', '十六'],
['2019-4-13', '十七'],
['2019-4-14', '十八'],
['2019-4-15', '十九'],
['2019-4-16', '二十'],
['2019-4-17', '廿一'],
['2019-4-18', '廿二'],
['2019-4-19', '廿三'],
['2019-4-20', '廿四', '穀雨'],
['2019-4-21', '廿五'],
['2019-4-22', '廿六'],
['2019-4-23', '廿七'],
['2019-4-24', '廿八'],
['2019-4-25', '廿九'],
['2019-4-26', '四月'],
['2019-4-27', '初二'],
['2019-4-28', '初三'],
['2019-4-29', '初四'],
['2019-4-30', '初五'],
['2019-5-1', '初六'],
['2019-5-2', '初七'],
['2019-5-3', '初八'],
['2019-5-4', '初九'],
['2019-5-5', '初十', '立夏'],
['2019-5-6', '十一'],
['2019-5-7', '十二'],
['2019-5-8', '十三'],
['2019-5-9', '十四'],
['2019-5-10', '十五'],
['2019-5-11', '十六'],
['2019-5-12', '十七'],
['2019-5-13', '十八'],
['2019-5-14', '十九'],
['2019-5-15', '二十'],
['2019-5-16', '廿一'],
['2019-5-17', '廿二'],
['2019-5-18', '廿三'],
['2019-5-19', '廿四'],
['2019-5-20', '廿五'],
['2019-5-21', '廿六', '小滿'],
['2019-5-22', '廿七'],
['2019-5-23', '廿八'],
['2019-5-24', '廿九'],
['2019-5-25', '三十'],
['2019-5-26', '五月'],
['2019-5-27', '初二'],
['2019-5-28', '初三'],
['2019-5-29', '初四'],
['2019-5-30', '初五'],
['2019-5-31', '初六'],
['2019-6-1', '初七'],
['2019-6-2', '初八'],
['2019-6-3', '初九'],
['2019-6-4', '初十'],
['2019-6-5', '十一', '芒種'],
['2019-6-6', '十二'],
['2019-6-7', '十三'],
['2019-6-8', '十四'],
['2019-6-9', '十五'],
['2019-6-10', '十六'],
['2019-6-11', '十七'],
['2019-6-12', '十八'],
['2019-6-13', '十九'],
['2019-6-14', '二十'],
['2019-6-15', '廿一'],
['2019-6-16', '廿二'],
['2019-6-17', '廿三'],
['2019-6-18', '廿四'],
['2019-6-19', '廿五'],
['2019-6-20', '廿六'],
['2019-6-21', '廿七', '夏至'],
['2019-6-22', '廿八'],
['2019-6-23', '廿九'],
['2019-6-24', '六月'],
['2019-6-25', '初二'],
['2019-6-26', '初三'],
['2019-6-27', '初四'],
['2019-6-28', '初五'],
['2019-6-29', '初六'],
['2019-6-30', '初七'],
['2019-7-1', '初八'],
['2019-7-2', '初九'],
['2019-7-3', '初十'],
['2019-7-4', '十一'],
['2019-7-5', '十二'],
['2019-7-6', '十三'],
['2019-7-7', '十四', '小暑'],
['2019-7-8', '十五'],
['2019-7-9', '十六'],
['2019-7-10', '十七'],
['2019-7-11', '十八'],
['2019-7-12', '十九'],
['2019-7-13', '二十'],
['2019-7-14', '廿一'],
['2019-7-15', '廿二'],
['2019-7-16', '廿三'],
['2019-7-17', '廿四'],
['2019-7-18', '廿五'],
['2019-7-19', '廿六'],
['2019-7-20', '廿七'],
['2019-7-21', '廿八'],
['2019-7-22', '廿九', '大暑'],
['2019-7-23', '閏六',],
['2019-7-24', '初二'],
['2019-7-25', '初三'],
['2019-7-26', '初四'],
['2019-7-27', '初五'],
['2019-7-28', '初六'],
['2019-7-29', '初七'],
['2019-7-30', '初八'],
['2019-7-31', '初九'],
['2019-8-1', '初十'],
['2019-8-2', '十一'],
['2019-8-3', '十二'],
['2019-8-4', '十三'],
['2019-8-5', '十四'],
['2019-8-6', '十五'],
['2019-8-7', '十六', '立秋'],
['2019-8-8', '十七'],
['2019-8-9', '十八'],
['2019-8-10', '十九'],
['2019-8-11', '二十'],
['2019-8-12', '廿一'],
['2019-8-13', '廿二'],
['2019-8-14', '廿三'],
['2019-8-15', '廿四'],
['2019-8-16', '廿五'],
['2019-8-17', '廿六'],
['2019-8-18', '廿七'],
['2019-8-19', '廿八'],
['2019-8-20', '廿九'],
['2019-8-21', '三十'],
['2019-8-22', '七月'],
['2019-8-23', '初二', '處暑'],
['2019-8-24', '初三'],
['2019-8-25', '初四'],
['2019-8-26', '初五'],
['2019-8-27', '初六'],
['2019-8-28', '初七'],
['2019-8-29', '初八'],
['2019-8-30', '初九'],
['2019-8-31', '初十'],
['2019-9-1', '十一'],
['2019-9-2', '十二'],
['2019-9-3', '十三'],
['2019-9-4', '十四'],
['2019-9-5', '十五'],
['2019-9-6', '十六'],
['2019-9-7', '十七', '白露'],
['2019-9-8', '十八'],
['2019-9-9', '十九'],
['2019-9-10', '二十'],
['2019-9-11', '廿一'],
['2019-9-12', '廿二'],
['2019-9-13', '廿三'],
['2019-9-14', '廿四'],
['2019-9-15', '廿五'],
['2019-9-16', '廿六'],
['2019-9-17', '廿七'],
['2019-9-18', '廿八'],
['2019-9-19', '廿九'],
['2019-9-20', '八月'],
['2019-9-21', '初二'],
['2019-9-22', '初三'],
['2019-9-23', '初四', '秋分'],
['2019-9-24', '初五'],
['2019-9-25', '初六'],
['2019-9-26', '初七'],
['2019-9-27', '初八'],
['2019-9-28', '初九'],
['2019-9-29', '初十'],
['2019-9-30', '十一'],
['2019-10-1', '十二'],
['2019-10-2', '十三'],
['2019-10-3', '十四'],
['2019-10-4', '十五'],
['2019-10-5', '十六'],
['2019-10-6', '十七'],
['2019-10-7', '十八'],
['2019-10-8', '十九', '寒露'],
['2019-10-9', '二十'],
['2019-10-10', '廿一'],
['2019-10-11', '廿二'],
['2019-10-12', '廿三'],
['2019-10-13', '廿四'],
['2019-10-14', '廿五'],
['2019-10-15', '廿六'],
['2019-10-16', '廿七'],
['2019-10-17', '廿八'],
['2019-10-18', '廿九'],
['2019-10-19', '三十'],
['2019-10-20', '九月'],
['2019-10-21', '初二'],
['2019-10-22', '初三'],
['2019-10-23', '初四', '霜降'],
['2019-10-24', '初五'],
['2019-10-25', '初六'],
['2019-10-26', '初七'],
['2019-10-27', '初八'],
['2019-10-28', '初九'],
['2019-10-29', '初十'],
['2019-10-30', '十一'],
['2019-10-31', '十二'],
['2019-11-1', '十三'],
['2019-11-2', '十四'],
['2019-11-3', '十五'],
['2019-11-4', '十六'],
['2019-11-5', '十七'],
['2019-11-6', '十八'],
['2019-11-7', '十九', '立冬'],
['2019-11-8', '二十'],
['2019-11-9', '廿一'],
['2019-11-10', '廿二'],
['2019-11-11', '廿三'],
['2019-11-12', '廿四'],
['2019-11-13', '廿五'],
['2019-11-14', '廿六'],
['2019-11-15', '廿七'],
['2019-11-16', '廿八'],
['2019-11-17', '廿九'],
['2019-11-18', '十月'],
['2019-11-19', '初二'],
['2019-11-20', '初三'],
['2019-11-21', '初四'],
['2019-11-22', '初五', '小雪'],
['2019-11-23', '初六'],
['2019-11-24', '初七'],
['2019-11-25', '初八'],
['2019-11-26', '初九'],
['2019-11-27', '初十'],
['2019-11-28', '十一'],
['2019-11-29', '十二'],
['2019-11-30', '十三'],
['2019-12-1', '十四'],
['2019-12-2', '十五'],
['2019-12-3', '十六'],
['2019-12-4', '十七'],
['2019-12-5', '十八'],
['2019-12-6', '十九'],
['2019-12-7', '二十', '大雪'],
['2019-12-8', '廿一'],
['2019-12-9', '廿二'],
['2019-12-10', '廿三'],
['2019-12-11', '廿四'],
['2019-12-12', '廿五'],
['2019-12-13', '廿六'],
['2019-12-14', '廿七'],
['2019-12-15', '廿八'],
['2019-12-16', '廿九'],
['2019-12-17', '三十'],
['2019-12-18', '十一月',],
['2019-12-19', '初二'],
['2019-12-20', '初三'],
['2019-12-21', '初四'],
['2019-12-22', '初五', '冬至'],
['2019-12-23', '初六'],
['2019-12-24', '初七'],
['2019-12-25', '初八'],
['2019-12-26', '初九'],
['2019-12-27', '初十'],
['2019-12-28', '十一'],
['2019-12-29', '十二'],
['2019-12-30', '十三'],
['2019-12-31', '十四']
];
constructor(private el: ElementRef) {}
ngOnInit() {
this.my_chart = echarts.init(this.el.nativeElement.querySelector('#main'));
// 点击日历上的号数，触发的事件
this.my_chart.on('click', (params) => {
this.my_chart.setOption(this.option);
});
}
echarts(){
const heatmapData = [];
const lunarData = [];
for (let i = 0; i < this.data.length; i++) {
heatmapData.push([
this.data[i][0],
Math.random() * 300
]);
lunarData.push({
value:[this.data[i][0],1,this.data[i][1],this.data[i][2] ],
symbol:'rect', // 核心1，这边长方形来填充
itemStyle:{
color:'rgba(0,0,0,0)', // 填充色颜色
borderColor : '#ff4546', // 选中，边框颜色
},
});
}
this.option = {
tooltip: {
formatter(params) {
return '降雨量: ' + params.value[1].toFixed(2);
}
},
visualMap: {
show: true,
min: 0,
max: 300,
calculable: true,
seriesIndex: [2],
orient: 'horizontal',
left: 'center',
bottom: 20,
inRange: {
color: ['#e0ffff', '#006edd'],
opacity: 0.3
},
controller: {
inRange: {
opacity: 0.5
}
}
},
calendar: [{
left: 'center',
top: 'middle',
cellSize: ['auto', 55],
yearLabel: {show: true},
orient: 'vertical',
dayLabel: {
firstDay: 1,
// nameMap: 'cn',
nameMap: ['周日','周一','周二','周三','周四','周五','周六'],
margin: 0, // 星期标签与轴线之间的距离
padding: [15,22,15,22],
/*backgroundColor: '#FAFAFA', // 可以是直接的颜色值，例如：'#123234', 'red', rgba(0,23,11,0.3)'
color : '#85807C',*/
},
monthLabel: {show: false},
range: this.range,
itemStyle: {
borderColor:'#F0F0F0'
},
splitLine : {
show:false
}
}],
series: [
{
type: 'scatter',
coordinateSystem: 'calendar',
symbolSize: (e)=> {
// console.log(e);
if (e[0] === this.current_day) {
return [50,55];
} else {
return 1;
}
},
label: {
normal: {
show: true,
formatter(params) {
const d = echarts.number.parseDate(params.value[0]);
return d.getDate() + '\n\n'+params.value[2] + '\n\n'
},
textStyle: {
color: '#000'
}
}
},
data: lunarData
},
{
type: 'scatter',
coordinateSystem: 'calendar',
symbolSize: 1,
label: {
normal: {
show: true,
formatter(params) {
return '\n\n' + (params.value[3] || '');
},
textStyle: {
fontSize: 12,
fontWeight: 700,
color: '#a00'
}
}
},
data: lunarData
},
{
name: '降雨量',
type: 'heatmap',
coordinateSystem: 'calendar',
data: heatmapData,
}
]
};
}
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
