html中柱状图的颜色,echarts中常见图表颜色自定义

待我称王封你为后i 2022-10-07 00:43 187阅读 0赞

1：折线图

①：单条折线

在与series同级的地方放置color数组：

如图　：

效果如图

②：多条折线：

同理在与series同级的地方放置color数组：例如

color: \["\#7EC0EE", "\#FF9F7F", "\#FFD700", "\#C9C9C9", "\#E066FF", "\#C0FF3E"\],其中：当颜色不够时，会从第一个颜色再次开始遍历。

效果如图：

2：饼状图：颜色设置同上

效果图：

主要注意形态变化：

series: \[

\{

name: this.title,

type: "pie",

radius: "50%",

radius: \["50%", "70%"\], //环形图

center: \["50%", "70%"\], //饼图

roseType: "radius",//外边距不一的环形图 如上图

data: this.data,

color: this.color,

emphasis: \{

itemStyle: \{

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: "rgba(0, 0, 0, 0.5)",

\},

\},

\},

\],

3：柱状图

①：单条柱状图；

series: \[\{

data: \[120, 200, 150, 80, 70, 110, 130\],

type: 'bar',

itemStyle: \{

normal: \{

color:"\#FFD700",

\},

\},

\}\]

效果如图

②多条折线

series: \[

\{

type: "bar",

itemStyle: \{

normal: \{

color: “\#2C71C1”,

\},

\},

\},

\{

type: "bar",

itemStyle: \{

normal: \{

color: “\#36A2EB”,

\},

\},

\},

\{

type: "bar",

itemStyle: \{

normal: \{

color: “\#4BC0C0”,

\},

\},

\},

\],

效果：

暂时先写三种较为常用的，以后有用到别的再改

发表评论取消回复

表情：

评论列表（有 0 条评论，187人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts柱状图的每个柱子设置不同颜色

主要就是这个： series: [ { name: '调用次数', typ

不念不忘少年蓝@/ 2023年01月14日 01:41/ 0 赞/ 162 阅读

相关给echarts中的饼状图设置颜色

data: [ { value: this.indexData.localAst, name: '本地语音' ,itemStyle:

末蓝、/ 2023年01月11日 09:09/ 0 赞/ 146 阅读

相关 echarts 图表柱状图----最新的数据显示彩色，过去的颜色为灰色

数据格式 Data: { "xAxisData": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10

悠悠/ 2022年12月01日 14:19/ 0 赞/ 121 阅读

相关 echarts 柱状图改变颜色

![在这里插入图片描述][20210402094918320.png] [20210402094918320.png]: /images/20221022/4df04086

忘是亡心i/ 2022年11月15日 14:29/ 0 赞/ 193 阅读

相关 html中柱状图的颜色,echarts中常见图表颜色自定义

1：折线图 ①：单条折线在与series同级的地方放置color数组：如图　：效果如图 ②：多条折线：同理在与series同级的地方放置color数组：例如

待我称王封你为后i/ 2022年10月07日 00:43/ 0 赞/ 188 阅读

相关【echarts】修改柱状图颜色

创建一个柱状图对象 <div id="barGragh" style="width: 100%;height:400px;margin-bottom: 5px">

迈不过友情╰/ 2022年06月17日 20:09/ 0 赞/ 311 阅读

相关 echarts自定义图表内字体颜色（坐标轴字体颜色、图例字体颜色）

最近接触到一个大数据可视化项目，需要用到echarts图标，在使用中会需要对部分图标或字体做自定义设定，这些设定虽然不是太难，设定方法也仅在官网上的配置文档中，但我还是想把它记

川长思鸟来/ 2022年04月14日 02:52/ 0 赞/ 3816 阅读

相关 Echarts柱状图的每个柱子显示不同颜色

在使用Echarts制作柱状图的时候，通常在横轴每个标签只有一个柱子的时候，每个柱子的颜色都是一样的， ![20181225092844335.png][] 然而，很多时候

妖狐艹你老母/ 2022年04月10日 04:41/ 0 赞/ 608 阅读

相关 echarts 柱状图颜色渐变代码

设置echarts 颜色渐变方法。实例样式： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_tex

心已赠人/ 2022年02月04日 11:55/ 1 赞/ 752 阅读

相关 echarts柱状图，改变柱颜色,x轴,y轴,底部按钮文字颜色

不墨迹直接上图: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4u

Myth丶恋晨/ 2021年09月20日 02:20/ 0 赞/ 1157 阅读