Angular10.x 如何使用eCharts圖表庫
首先,我們在專案中要安裝echarts庫,程式碼如下:
npm install echarts --save
npm install ngx-echarts --save
然後,一定要安裝下面這個包,否則10.x版本會報這個錯誤的
(ERROR in The target entry-point “ngx-echarts” has missing dependencies:
- resize-observer-polyfill)
npm install resize-observer-polyfill --save-dev
下一步就是在對應的module裡面匯入NgxEchartsModule
import {NgxEchartsModule} from 'ngx-echarts';
import * as echarts from 'echarts';
imports: [
NgxEchartsModule.forRoot({
echarts,
})
],
在對應的ts元件中,初始化資料
public chartOption1 : EChartsOption = {};
constructor() { }
ngOnInit(): void {
this.initChart();
}
initChart() {
this.chartOption1 = {
tooltip: {
trigger: 'axis',
axisPointer: { // 座標軸指示器,座標軸觸發有效
type: 'shadow' // 預設為直線,可選為:'line' | 'shadow'
}
},
legend: {
data: ['百度', '谷歌', '必應', '其他']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '百度',
type: 'bar',
barWidth: 5,
stack: '搜尋引擎',
data: [620, 732, 701, 734, 1090, 1130, 1120]
},
{
name: '谷歌',
type: 'bar',
stack: '搜尋引擎',
data: [120, 132, 101, 134, 290, 230, 220]
},
{
name: '必應',
type: 'bar',
stack: '搜尋引擎',
data: [60, 72, 71, 74, 190, 130, 110]
},
{
name: '其他',
type: 'bar',
stack: '搜尋引擎',
data: [62, 82, 91, 84, 109, 110, 120]
}
]
};
}
在對應的html中使用
<div echarts [options] = "chartOption1"></div>
就完成了。
相關文章
- Java版ECharts圖表庫ECharts-JavaJavaEcharts
- 三大圖表庫:ECharts 、 BizCharts 和 G2,該如何選擇?Echarts
- Echarts折線圖表斷點如何補全Echarts斷點
- asp.net使用echarts展示圖表資料ASP.NETEcharts
- ECharts:基於HTML5 Canvas的JavaScript圖表庫EchartsHTMLCanvasJavaScript
- H5 Echarts視覺化圖表的使用H5Echarts視覺化
- ECharts資料圖表使用介紹 超詳細Echarts
- 繪製圖表 go-echartsGoEcharts
- echarts圖表樣式轉換Echarts
- layui 中echarts實現圖表UIEcharts
- ECharts圖表——封裝通用配置Echarts封裝
- 前端圖表外掛ECharts入門教程前端Echarts
- Echarts資料視覺化,easyshu圖表整合。Echarts視覺化
- 在Vue專案中使用Echarts(三): Echarts中的其他常用圖VueEcharts
- react 中echarts-for-react使用resize解決圖表自適應問題ReactEcharts
- ECharts實現資料圖表分析及程式碼Echarts
- 將echarts生成的圖表變為圖片儲存起來Echarts
- echarts 柱狀圖 詳解與使用集合Echarts
- 如何在 Vue 專案中使用 echartsVueEcharts
- 深圳地圖echarts地圖Echarts
- 關於如何使用echarts實現市縣區地圖的視覺化Echarts地圖視覺化
- VUE中使用Echarts繪製地圖遷移VueEcharts地圖
- jCharts:Java圖表類庫使用介紹Java
- 在微信小程式中使用 echarts 圖片-例 折線圖微信小程式Echarts
- 在vue腳手架中如何使用EChartsVueEcharts
- Angular8 引入百度 Echarts,進行圖表分析AngularEcharts
- echarts 地圖統計Echarts地圖
- 使用echarts的Simple Graph 來畫任務流程圖Echarts流程圖
- 使用freemarker將echarts圖片儲存到word中Echarts
- 小程式開發-mpvue中使用圖表庫Vue
- (覆盤)Vue中如何使用v-echarts元件VueEcharts元件
- ASP.NET Web開發 Echarts圖表空資料優化ASP.NETWebEcharts優化
- js如何讀取excel檔案,繪製echarts圖形。JSExcelEcharts
- 教你如何透過vue實現echarts中的儀表盤VueEcharts
- Echarts的使用教程Echarts
- Vue中使用echartsVueEcharts
- Echarts資料視覺化:圖表篇(2)—— 折線圖、堆疊面積折線圖Echarts視覺化
- echarts使用dataset資料集建立單軸散點圖Echarts