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

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”,

},

},

},

],

效果：

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