Echarts 客户管理系统开发定制常用各类图表模板配置

注意： 客户管理系统开发定制这里主要就是基于各类图表，更多的使用 Echarts 的各类配置项；

以下代码都可以复制到 Echarts 官网，直接预览；

---

---

一、 + 柱状图

option = {  color: ['rgba(50, 229, 255, 1)', 'rgba(250, 207, 18, 1)'],  tooltip: {    trigger: 'axis',    axisPointer: {      type: 'cross',      crossStyle: {        color: '#999'      }    }  },  grid: {    top: '30%',    left: '10%',    right: '10%',    bottom: '20%',    containLabel: true  },  xAxis: [    {      type: 'category',      data: ['2017', '2018', '2019', '2020', '2021', '2022'],      axisLine: {        show: true,        lineStyle: {          color: '#7B68EE'        }      },      splitLine: {        show: false,        lineStyle: {          color: 'blue',          width: 1,          type: 'solid'        }      },      axisPointer: {        type: 'shadow'      },    }  ],  yAxis: [    {      type: 'value',      name: `                {legend|}  {value|柱状图}`,      axisLabel: {        color: '#FF6347'      },      axisLine: {        show: true,        lineStyle: {          color: '#FFDEAD'        }      },      splitLine: {        show: false,        lineStyle: {          color: 'blue',          width: 1,          type: 'solid'        }      },      nameTextStyle: {        rich: {          legend: {            width: 12,            height: 4,            backgroundColor: '#EE82EE'          },          value: {            color: '#FF8C00'          }        }      }    },    {      type: 'value',      name: `{legend|}  {value|折线图}           `,      axisLabel: {        color: '#00BFFF'      },      axisLine: {        show: true,        lineStyle: {          color: '#66CDAA'        }      },      splitLine: {        lineStyle: {          color: '#E6E6FA',          width: 1,          type: 'solid'        }      },      nameTextStyle: {        rich: {          legend: {            width: 12,            height: 4,            backgroundColor: '#87CEFA'          },          value: {            color: '#CD853F'          }        }      }    }  ],  series: [    {      name: '柱状图',      type: 'bar',      data: [80, 120, 110, 130, 120, 110],      barWidth: 14, // 柱状图的宽度      itemStyle: {        borderRadius: 8,        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [          { offset: 0, color: 'rgba(50, 229, 255, 1)' },          { offset: 1, color: 'rgba(50, 229, 255, 0.8)' }        ])      }    },    {      name: '折线图',      type: 'line',      yAxisIndex: 1,      data: [80, 120, 110, 130, 120, 110],      itemStyle: {        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [          {            offset: 0,            color: 'rgba(183, 75, 238)'          },          {            offset: 1,            color: 'rgba(250, 207, 18)'          }        ])      },      areaStyle: {        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [          {            offset: 0,            color: 'rgba(183, 75, 238,0.2)'          },          {            offset: 1,            color: 'rgba(250, 207, 18)'          }        ])      },      showSymbol: false    }  ]};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156

二、环形图

echarts 环形图：多层嵌套，自定义 legend 位置、颜色，中间插入数据及文字，颜色渐变；

文字链接：

三、k 线图

文章链接：

四、折线图

echarts 折线图，横纵坐标轴线颜色、文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；

文章链接：

五、横向

echarts 横向柱状图，坐标轴隐藏，网格线颜色渐变，网格默认背景，柱状图边框宽度/颜色，数据渐变，刻度线隐藏等；

文章链接：

六、3D 柱状图

echarts 3D 柱状图，多个柱状图叠加，y轴内刻度线、隐藏横坐标，文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；

文章链接：