软件开发定制echarts 柱状图【立体】

1. echarts 软件开发定制柱状图上面显示文字 label

	series: [        {          name: 'a',          tooltip: {            show: false,          },          data: this.data,          type: 'bar',          barWidth: 16, // 软件开发定制柱条的宽度，软件开发定制不设时自适应。          barGap: 200, // 软件开发定制不同系列的柱间距离          itemStyle: {            normal: {              color: (param) => {              	// 渐变色 0, 0, 0, 1代表右下左上 1是说明从那个方向                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [                    { offset: 0, color: param.data.startColor },                    { offset: 1, color: param.data.endColor }                  ])                },                // 主要是这个地方                label: {                    formatter: "{c}"+'个', //自定义展示 如果想直接显示原数值 这一行可以省略                      show: true,                    position: "top",                    textStyle: {                      fontWeight: "bolder",                      fontSize: "12",                      color: "#fff"                    }                  },              }            } ,          },          ]
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

关于

字符串模板 模板变量有：

{a}：系列名。
{b}：数据名。
{c}：数据值。
{@xxx}：数据中名为 ‘xxx’ 的维度的值，如 {@product} 表示名为 ‘product’ 的维度的值。
{@[n]}：数据中维度 n 的值，如 {@[3]} 表示维度 3 的值，从 0 开始计数。

换行展示
formatter: “{a}{c}”,

2. 立体柱状图
发现了三个博主的文章比较👍

参考了他们的文章之后 自己的代码如下 效果图如下

1.0 代码如下

private get option(){    return {      xAxis: {        type: 'category',        data: this.data.map(i => i.label),        // x坐标轴为虚线        axisLine: {          lineStyle: {            color: 'rgba(11, 73, 125, 0.33)',            opacity: 0.8          }        },        // 不展示下面｜        axisTick: {          show: false        },        axisLabel: {          show: true,          color: '#B0E1FF',          fontSize: 12 // 字体大小        }      },      yAxis: {        type: 'value',        // 不展示刻度线        splitLine: {          show: false        },        axisLabel: {          show: true,          color: '#B0E1FF',          fontSize: 12 // 字体大小        }      },      // 栅格      grid: {        left: '0',        right: '0',        bottom: '0%',        top: '16px',        containLabel: true      },      series: [        // 数据低下的圆片        {          name: '',          type: 'pictorialBar',          symbolSize: [16, 8], // 宽，高          symbolOffset: [0, 4], // 左 上          z: 3,          symbol: 'diamond',          itemStyle: {            color: params => params.data.startColor          },          data: this.data        },        // 数据的柱状图        {          name: '',          type: 'bar',          barWidth: 16,  // 柱条的宽度，不设时自适应。          barGap: '-100%', // 不同系列的柱间距离          itemStyle: {            color: (params) => {              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [                { offset: 0, color: params.data.startColor },                { offset: 1, color: params.data.endColor }              ]);            },          },          data: this.data        },        // 数据顶部的样式        {          name: '',          type: 'pictorialBar',          symbol: 'diamond',          symbolSize: [16, 8],          symbolOffset: [0, -4],          z: 3,          itemStyle: {            normal: {              color: params => params.data.endColor,              label: {                show: true, // 开启显示                position: 'top', // 在上方显示                textStyle: {                  fontSize: '12',                  color: '#B0E1FF',                }              }            }          },          symbolPosition: 'end',          data: this.data        },      ]    }  }
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

2.0代码如下

<template>  <echarts :option="option" /></template><script lang="ts">import Vue from 'vue';import { Component, Prop } from 'vue-property-decorator';import * as echarts from 'echarts';import Echarts from '@/components/echarts/Echarts.vue';import { CurrentErrorTypeListModel } from '@sarai/model/home';@Component({  components: {    Echarts  }})export default class ErrorChartStatistics extends Vue {  @Prop(Array)  private data !: CurrentErrorTypeListModel[];  private get option () {    return {      xAxis: {        type: 'category',        data: this.data.map(i => i.label),        // x坐标轴为虚线        axisLine: {          lineStyle: {            color: 'rgba(11, 73, 125, 0.33)',            opacity: 0.8          }        },        // 不展示下面｜        axisTick: {          show: false        },        axisLabel: {          show: true,          color: '#B0E1FF',          fontSize: 12 // 字体大小        }      },      yAxis: {        type: 'value',        // 不展示刻度线        splitLine: {          show: false        },        axisLabel: {          show: true,          color: '#B0E1FF',          fontSize: 12 // 字体大小        }      },      // 栅格      grid: {        left: '0',        right: '0',        bottom: '0%',        top: '22px',        containLabel: true      },      series: [        // 数据低下的圆片        {          name: '',          type: 'pictorialBar',          symbol: 'diamond',          // symbolSize: [16, 8],          // symbolOffset: [0, 4],           symbolSize: [16,10], // 宽，高          symbolOffset:[0,2],// 左 上          symbolPosition: 'start',          z: 0,          itemStyle: {            color: (params) => {              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [                { offset: 0, color: params.data.topStartColor },                { offset: 1, color: params.data.topEndColor }              ]);            }          },          data: this.data        },        // 数据的柱状图        {          name: '',          type: 'bar',          barWidth: 8, // 柱条的宽度，不设时自适应。           showSymbol: false,          hoverAnimation: false,          data: this.data,          itemStyle: {            normal: {              color: (params) => {                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [                  { offset: 0, color: params.data.startColor },                  { offset: 1, color: params.data.endColor }                ]);              },              borderRadius:[2,0,0,100],            }          },        },        {          name: '',          type: 'bar',          barWidth: 8, // 柱条的宽度，不设时自适应。          barGap: '0', // 不同系列的柱间距离          data: this.data,          itemStyle: {            normal: {              color: (params) => {                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [                  { offset: 0, color: params.data.startColor },                  { offset: 1, color: params.data.endColor }                ]);              },              borderWidth: 0.1,              borderColor:'black',              barBorderRadius:[0,2,100,0]            }          },        },        // 数据顶部的样式        {          name: '',          type: 'pictorialBar',          symbol: 'diamond',          // symbolOffset: [0, -4],          symbolSize: [16,9],          symbolOffset:[0,-4],          symbolPosition: 'end',          z: 3,          itemStyle: {            normal: {              color: (params) => {                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [                  { offset: 0, color: params.data.topStartColor },                  { offset: 1, color: params.data.topEndColor }                ]);              },              label: {                show: true, // 开启显示                position: 'top', // 在上方显示                textStyle: {                  fontSize: '12',                  color: '#B0E1FF'                },                offset:[0,-2]              }            }          },          data: this.data        },      ]    };  }}</script>
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
157
158
159
160
161

3.0 与2.0 差不多 只不过修改了barBorderRadius 和顶部的offset

<template>  <echarts :option="option" /></template><script lang="ts">import Vue from 'vue';import { Component, Prop } from 'vue-property-decorator';import * as echarts from 'echarts';import Echarts from '@/components/echarts/Echarts.vue';import { CurrentErrorTypeListModel } from '@sarai/model/home';@Component({  components: {    Echarts  }})export default class ErrorChartStatistics extends Vue {  @Prop(Array)  private data !: CurrentErrorTypeListModel[];  private get option () {    return {      xAxis: {        type: 'category',        data: this.data.map(i => i.label),        // x坐标轴为虚线        axisLine: {          lineStyle: {            color: 'rgba(11, 73, 125, 0.33)',            opacity: 0.8          }        },        // 不展示下面｜        axisTick: {          show: false        },        axisLabel: {          show: true,          color: '#B0E1FF',          fontSize: 12 // 字体大小        }      },      yAxis: {        type: 'value',        // 不展示刻度线        splitLine: {          show: false        },        axisLabel: {          show: true,          color: '#B0E1FF',          fontSize: 12 // 字体大小        }      },      // 栅格      grid: {        left: '0',        right: '0',        bottom: '0%',        top: '22px',        containLabel: true      },      series: [        // 数据低下的圆片        {          name: '',          type: 'pictorialBar',          symbol: 'diamond',          symbolSize: [16, 9], // 宽，高          symbolOffset: [0, 5], // 左 上          symbolPosition: 'start',          z: 1,          data: this.data,          itemStyle: {            color: (params) => {              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [                { offset: 0, color: params.data.topStartColor },                { offset: 1, color: params.data.topEndColor }              ]);            }          }        },        // 数据的柱状图        {          name: '',          type: 'bar',          barWidth: 8, // 柱条的宽度，不设时自适应。          data: this.data,          itemStyle: {            color: (params) => {              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [                { offset: 0, color: params.data.leftStartColor },                { offset: 1, color: params.data.leftEndColor }              ]);            },            // emphasis: {            //   borderWidth: 15,            //   borderColor: 'red',            // }          }        },        {          name: '',          type: 'bar',          barWidth: 8, // 柱条的宽度，不设时自适应。          barGap: 0, // 不同系列的柱间距离          data: this.data,          itemStyle: {            normal: {              color: (params) => {                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [                  { offset: 0, color: params.data.rightStartColor },                  { offset: 1, color: params.data.rightEndColor }                ]);              },              borderWidth: 0.1,              borderColor: 'transparent'            }          }        },        // 数据顶部的样式        {          name: '',          type: 'pictorialBar',          symbol: 'diamond',          symbolSize: [16, 9],          symbolOffset: [0, -4],          symbolPosition: 'end',          z: 3,          itemStyle: {            normal: {              color: (params) => {                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [                  { offset: 0, color: params.data.topStartColor },                  { offset: 1, color: params.data.topEndColor }                ]);              },              label: {                show: true, // 开启显示                position: 'top', // 在上方显示                textStyle: {                  fontSize: '12',                  color: '#B0E1FF'                }              }            }          },          data: this.data        }      ]    };  }}</script>
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