冷风小刀 發表於 2022-2-1 19:40:00

angular中如何使用echarts图表

<p>原文链接：这里</p>
<h5>0.前言</h5>
<p>项目中最近要使用echarts做那种看起来高大上的图。于是搞起了echarts。本文主要介绍angualr中如何使用echarts。</p>
<p>anuglar CLI 11.5</p>
<h5>1.新建angular项目</h5>
<p>新建项目参考：angular从0到1：环境安装及运行 – 每天进步一点点 (longkui.site)</p>
<h5>2.引入echarts</h5>
<p>我们安装echarts，使用下面两个指令。</p>
<div class="enlighter-default enlighter-v-standard enlighter-t-dracula enlighter-hover enlighter-linenumbers ">
<div class="enlighter">
<div>
<div><span class="enlighter-text">npm install echarts --<span class="enlighter-m0">save<span class="enlighter-text"> <span class="enlighter-g1">(<span class="enlighter-text">yarn add echarts<span class="enlighter-g1">)</span></span></span></span></span></span></div>
</div>
<div>&nbsp;</div>
<div>
<div><span class="enlighter-text">npm install ngx-echarts --<span class="enlighter-m0">save<span class="enlighter-text"> <span class="enlighter-g1">(<span class="enlighter-text">yarn add ngx-echarts<span class="enlighter-g1">)</span></span></span></span></span></span></div>
</div>
</div>
</div>
<p>然后我们在package.json(有两个，最外层那个)中可以看到我们刚才安装的echarts。</p>
<p><img src="http://kongkui.oss-cn-qingdao.aliyuncs.com/images/080122.png"></p>
<p>然后找到angular.json。找到build/options中。</p>
<p><img src="http://kongkui.oss-cn-qingdao.aliyuncs.com/images/080201.png"></p>
<p>然后在scripts中添加下面的这段代码：</p>
<div class="enlighter-default enlighter-v-standard enlighter-t-dracula enlighter-hover enlighter-linenumbers ">
<div class="enlighter">
<div>
<div><span class="enlighter-text"> <span class="enlighter-s0">"node_modules/echarts/dist/echarts.js"</span></span></div>
</div>
</div>
</div>
<p><img src="http://kongkui.oss-cn-qingdao.aliyuncs.com/images/080202.png"></p>
<p>然后我们在app.module.ts中使用引入echarts（实际开发中，自己新建一个module，同样的操作引入）。</p>
<p>导入：</p>
<div class="enlighter-default enlighter-v-standard enlighter-t-dracula enlighter-hover enlighter-linenumbers ">
<div class="enlighter">
<div>
<div><span class="enlighter-text">import <span class="enlighter-g1">{<span class="enlighter-text"> NgxEchartsModule <span class="enlighter-g1">}<span class="enlighter-text"> from <span class="enlighter-s0">'ngx-echarts'<span class="enlighter-text">;</span></span></span></span></span></span></span></div>
</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>
<div><span class="enlighter-text">imports: <span class="enlighter-g1">[</span></span></div>
</div>
<div>
<div><span class="enlighter-text"> ...</span></div>
</div>
<div>
<div><span class="enlighter-text"> NgxEchartsModule</span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-g1">]<span class="enlighter-text">,</span></span></span></div>
</div>
</div>
</div>
<p>然后我们打开app.component.html文件。</p>
<div class="enlighter-default enlighter-v-standard enlighter-t-dracula enlighter-hover enlighter-linenumbers ">
<div class="enlighter">
<div>
<div><span class="enlighter-g1">&lt;<span class="enlighter-text">div style=<span class="enlighter-s0">"height: 500px;"<span class="enlighter-text"> id =<span class="enlighter-s0">"testchart"<span class="enlighter-text"> <span class="enlighter-g1">&gt;<span class="enlighter-text">测试图表<span class="enlighter-g1">&lt;<span class="enlighter-text">/div<span class="enlighter-g1">&gt;</span></span></span></span></span></span></span></span></span></span></span></div>
</div>
</div>
</div>
<p>然后我们打开Echarts 的实例。</p>
<p>Examples – Apache ECharts</p>
<p><img src="https://kongkui.oss-cn-qingdao.aliyuncs.com/images/080801.png"></p>
<div class="enlighter-default enlighter-v-standard enlighter-t-dracula enlighter-hover enlighter-linenumbers ">
<div class="enlighter">
<div>
<div><span class="enlighter-text">option = <span class="enlighter-g1">{</span></span></div>
</div>
<div>
<div><span class="enlighter-text"> xAxis: <span class="enlighter-g1">{</span></span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-k2">type<span class="enlighter-text">: <span class="enlighter-s0">'category'<span class="enlighter-text">,</span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> data: <span class="enlighter-g1">[<span class="enlighter-s0">'Mon'<span class="enlighter-text">, <span class="enlighter-s0">'Tue'<span class="enlighter-text">, <span class="enlighter-s0">'Wed'<span class="enlighter-text">, <span class="enlighter-s0">'Thu'<span class="enlighter-text">, <span class="enlighter-s0">'Fri'<span class="enlighter-text">, <span class="enlighter-s0">'Sat'<span class="enlighter-text">, <span class="enlighter-s0">'Sun'<span class="enlighter-g1">]</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-g1">}<span class="enlighter-text">,</span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> yAxis: <span class="enlighter-g1">{</span></span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-k2">type<span class="enlighter-text">: <span class="enlighter-s0">'value'</span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-g1">}<span class="enlighter-text">,</span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> series: <span class="enlighter-g1">[<span class="enlighter-g1">{</span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> data: <span class="enlighter-g1">[<span class="enlighter-n1">120<span class="enlighter-text">, <span class="enlighter-n1">200<span class="enlighter-text">, <span class="enlighter-n1">150<span class="enlighter-text">, <span class="enlighter-n1">80<span class="enlighter-text">, <span class="enlighter-n1">70<span class="enlighter-text">, <span class="enlighter-n1">110<span class="enlighter-text">, <span class="enlighter-n1">130<span class="enlighter-g1">]<span class="enlighter-text">,</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-k2">type<span class="enlighter-text">: <span class="enlighter-s0">'bar'<span class="enlighter-text">,</span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> showBackground: <span class="enlighter-e0">true<span class="enlighter-text">,</span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> backgroundStyle: <span class="enlighter-g1">{</span></span></div>
</div>
<div>
<div><span class="enlighter-text"> color: <span class="enlighter-s0">'rgba(180, 180, 180, 0.2)'</span></span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-g1">}</span></span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-g1">}<span class="enlighter-g1">]<span class="enlighter-g1">}<span class="enlighter-text">;</span></span></span></span></span></div>
</div>
</div>
</div>
<p>我们在app.component.ts 添加如下代码</p>
<div class="enlighter-default enlighter-v-standard enlighter-t-dracula enlighter-hover enlighter-linenumbers ">
<div class="enlighter">
<div>
<div><span class="enlighter-k0">import<span class="enlighter-text"> <span class="enlighter-g1">{<span class="enlighter-text"> Component, OnInit <span class="enlighter-g1">}<span class="enlighter-text"> from <span class="enlighter-s0">'@angular/core'<span class="enlighter-text">;</span></span></span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"><span class="enlighter-k0">import<span class="enlighter-text"> * <span class="enlighter-k0">as<span class="enlighter-text"> echarts from <span class="enlighter-s0">'echarts'<span class="enlighter-text">;</span></span></span></span></span></span></span></div>
</div>
<div>&nbsp;</div>
<div>
<div><span class="enlighter-text">@<span class="enlighter-m0">Component<span class="enlighter-g1">(<span class="enlighter-g1">{</span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> selector: <span class="enlighter-s0">'app-root'<span class="enlighter-text">,</span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> templateUrl: <span class="enlighter-s0">'./app.component.html'<span class="enlighter-text">,</span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> styleUrls: <span class="enlighter-g1">[<span class="enlighter-s0">'./app.component.less'<span class="enlighter-g1">]</span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"><span class="enlighter-g1">}<span class="enlighter-g1">)</span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"><span class="enlighter-k0">export<span class="enlighter-text"> <span class="enlighter-k0">class<span class="enlighter-text"> AppComponent <span class="enlighter-k8">implements<span class="enlighter-text"> OnInit <span class="enlighter-g1">{</span></span></span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> title = <span class="enlighter-s0">'myapp'<span class="enlighter-text">;</span></span></span></div>
</div>
<div>&nbsp;</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-m0">ngOnInit<span class="enlighter-g1">(<span class="enlighter-g1">)<span class="enlighter-text"> <span class="enlighter-g1">{</span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-k9">this<span class="enlighter-text">.<span class="enlighter-m3">initChart<span class="enlighter-g1">(<span class="enlighter-g1">)</span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-g1">}</span></span></div>
</div>
<div>&nbsp;</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-m0">initChart<span class="enlighter-g1">(<span class="enlighter-g1">)<span class="enlighter-text"> <span class="enlighter-g1">{</span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-k2">var<span class="enlighter-text"> chartDom = <span class="enlighter-k9">document<span class="enlighter-text">.<span class="enlighter-m3">getElementById<span class="enlighter-g1">(<span class="enlighter-s0">'testchart'<span class="enlighter-g1">)<span class="enlighter-text">;</span></span></span></span></span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-k2">var<span class="enlighter-text"> myChart = echarts.<span class="enlighter-m3">init<span class="enlighter-g1">(<span class="enlighter-text">chartDom<span class="enlighter-g1">)<span class="enlighter-text">;</span></span></span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-k2">var<span class="enlighter-text"> option;</span></span></span></div>
</div>
<div>&nbsp;</div>
<div>
<div><span class="enlighter-text"> option = <span class="enlighter-g1">{</span></span></div>
</div>
<div>
<div><span class="enlighter-text"> xAxis: <span class="enlighter-g1">{</span></span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-k2">type<span class="enlighter-text">: <span class="enlighter-s0">'category'<span class="enlighter-text">,</span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> data: <span class="enlighter-g1">[<span class="enlighter-s0">'Mon'<span class="enlighter-text">, <span class="enlighter-s0">'Tue'<span class="enlighter-text">, <span class="enlighter-s0">'Wed'<span class="enlighter-text">, <span class="enlighter-s0">'Thu'<span class="enlighter-text">, <span class="enlighter-s0">'Fri'<span class="enlighter-text">, <span class="enlighter-s0">'Sat'<span class="enlighter-text">, <span class="enlighter-s0">'Sun'<span class="enlighter-g1">]</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-g1">}<span class="enlighter-text">,</span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> yAxis: <span class="enlighter-g1">{</span></span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-k2">type<span class="enlighter-text">: <span class="enlighter-s0">'value'</span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-g1">}<span class="enlighter-text">,</span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> series: <span class="enlighter-g1">[<span class="enlighter-g1">{</span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> data: <span class="enlighter-g1">[<span class="enlighter-n1">120<span class="enlighter-text">, <span class="enlighter-n1">200<span class="enlighter-text">, <span class="enlighter-n1">150<span class="enlighter-text">, <span class="enlighter-n1">80<span class="enlighter-text">, <span class="enlighter-n1">70<span class="enlighter-text">, <span class="enlighter-n1">110<span class="enlighter-text">, <span class="enlighter-n1">130<span class="enlighter-g1">]<span class="enlighter-text">,</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-k2">type<span class="enlighter-text">: <span class="enlighter-s0">'bar'<span class="enlighter-text">,</span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> showBackground: <span class="enlighter-e0">true<span class="enlighter-text">,</span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> backgroundStyle: <span class="enlighter-g1">{</span></span></div>
</div>
<div>
<div><span class="enlighter-text"> color: <span class="enlighter-s0">'rgba(180, 180, 180, 0.2)'</span></span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-g1">}</span></span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-g1">}<span class="enlighter-g1">]</span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-g1">}<span class="enlighter-text">;</span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> option &amp;&amp; myChart.<span class="enlighter-m3">setOption<span class="enlighter-g1">(<span class="enlighter-text">option<span class="enlighter-g1">)<span class="enlighter-text">;</span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-g1">}</span></span></div>
</div>
<div>
<div><span class="enlighter-text"><span class="enlighter-g1">}</span></span></div>
</div>
</div>
</div>
<p>如果报错：ERROR in The target entry-point “ngx-echarts” has missing dependencies:@juggle/resize-observer。请点击这里解决。</p>
<p>然后执行 ng serve</p>
<p><img src="https://kongkui.oss-cn-qingdao.aliyuncs.com/images/080802.png"></p><br><br>
来源：https://www.cnblogs.com/longkui-site/p/15859509.html
頁: [1]
查看完整版本: angular中如何使用echarts图表