改变 ngx-echarts 图表的颜色

huangapple
go评论107阅读模式
英文:

Changing colors of ngx-echarts charts

问题

如何更改ngx-echarts中所有类型图表的颜色？

我已经尝试过（HTML）：<div echarts [options]="chartOption" [theme]="colorScheme" class="demo-chart"></div>

（TypeScript）：

  1. colorScheme = {
  2.     domain: [
  3.         '#2FDF75',
  4.         '#246EB9',
  5.         '#BCD3F2',
  6.         '#323031',
  7.         '#FBFFF1',
  8.         '#CCFF90',
  9.         '#FFFF8D',
  10.         '#FF9E80'
  11.     ]
  12. };

颜色没有改变。我担心我的自定义主题格式可能不正确。我找不到关于如何轻松更改图表颜色的文档。

英文:

How to change the colors of all kind of charts in ngx-echarts?

Ive tried (html): &lt;div echarts [options]=&quot;chartOption&quot; [theme]=&quot;colorScheme&quot; class=&quot;demo-chart&quot;&gt;&lt;/div&gt;

(ts):

  1. colorScheme = {
  2.     domain: [
  3.       &#39;#2FDF75&#39;,
  4.       &#39;#246EB9&#39;,
  5.       &#39;#BCD3F2&#39;,
  6.       &#39;#323031&#39;,
  7.       &#39;#FBFFF1&#39;,
  8.       &#39;#CCFF90&#39;,
  9.       &#39;#FFFF8D&#39;,
  10.       &#39;#FF9E80&#39;
  11.     ]
  12.   };

The colors do not change. I am afraid that the format of my custom theme is not the right one. I couldnt find any documentation on how to change the colors of the charts in an easy way.

答案1

得分: 1

你可以在选项中使用 color 属性

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'app-your-component',
  5.   templateUrl: './your-component.component.html',
  6.   styleUrls: ['./your-component.component.css']
  7. })
  8. export class YourComponent {
  10.   chartOption: any;
  12.   constructor() {
  13.     this.chartOption = {
  14.       color: ['#2FDF75', '#246EB9', '#BCD3F2', '#323031', '#FBFFF1', '#CCFF90', '#FFFF8D', '#FF9E80'],
  15.       // 其他图表选项...
  16.     };
  17.   }
  18. }

HTML

  1. <div echarts [options]="chartOption" class="demo-chart"></div>

示例链接 点击..

希望对你有所帮助..

英文:

you can use the color property in the option

  1. import { Component } from &#39;@angular/core&#39;;
  3. @Component({
  4.   selector: &#39;app-your-component&#39;,
  5.   templateUrl: &#39;./your-component.component.html&#39;,
  6.   styleUrls: [&#39;./your-component.component.css&#39;]
  7. })
  8. export class YourComponent {
  10.   chartOption: any;
  12.   constructor() {
  13.     this.chartOption = {
  14.       color: [&#39;#2FDF75&#39;, &#39;#246EB9&#39;, &#39;#BCD3F2&#39;, &#39;#323031&#39;, &#39;#FBFFF1&#39;, &#39;#CCFF90&#39;, &#39;#FFFF8D&#39;, &#39;#FF9E80&#39;],
  15.       // your other chart options...
  16.     };
  17.   }
  18. }

HTML

  1. &lt;div echarts [options]=&quot;chartOption&quot; class=&quot;demo-chart&quot;&gt;&lt;/div&gt;

example link click..

hope it helpful..

huangapple
  • 本文由 发表于 2023年6月5日 20:41:31
  • 转载请务必保留本文链接：https://go.coder-hub.com/76406523.html
  • angular
  • colors
  • ionic-framework
  • ngx-echarts
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定