柱状图 kate

 principalTypeChart: function () {
                    let that = this;
                    var chartDom = document.getElementsByClassName('left-top-principal')[0];
                    var myChart = echarts.init(chartDom);
                    // 数据机构
                    let dataX = ['XX街道','XXxxxx街道','XX街道','XX街道','XX街道','XX街道','XX街道','XX街道','XX街道','XX街道'];
                    let dataY = [2,50,15,35,50,30,40,50,60,20]; 
                    let option = {
                        // backgroundColor: '#0D2753', 背景色
                        // 点击显示详情数据
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow',
                            },
                        },
                        // 当成上下左右的margin确保x轴，y轴刻度显示下
                        grid: {
                            top: '8%',
                            right: '5%',
                            left: '15%',
                            bottom: '18%',
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: dataX,
                                axisLine: {
                                    lineStyle: {
                                        color: 'rgba(66, 192, 255, .3)',
                                    },
                                },
                                // x轴字体的样式
                                axisLabel: {
                                    interval:0,
                                    margin: 10,
                                    color: '#05D5FF',
                                    textStyle: {
                                        fontSize: 11,
                                    },
                                    rotate: '90',
                                },
                                axisTick: {//刻度展示不展示
                                    show: false,
                                },
                            },
                        ],
                        yAxis: [
                            {
                                axisLabel: {
                                    padding: [3, 0, 0, 0],
                                    formatter: '{value}',
                                    color: 'rgba(95, 187, 235, 1)',
                                    textStyle: {
                                        fontSize: 11,
                                    },
                                },
                                axisTick: {
                                    show: true,
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: 'rgba(66, 192, 255, .3)',
                                    },
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: 'rgba(255,255,255,0)',
                                    },
                                },
                            },
                        ],
                        series: [
                            {
                                type: 'bar',
                                data: dataY,
                                barWidth: '10',
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(
                                            0,
                                            0,
                                            0,
                                            1,
                                            [
                                                {
                                                    offset: 0,
                                                    color: 'rgba(43,145,206,.5)', // 0% 处的颜色
                                                },
                                                {
                                                    offset: 0.98,
                                                    color: 'rgba(37,215,181,.9)', // 100% 处的颜色
                                                },
                                            ],
                                            false
                                        ),
                                        shadowColor: 'rgba(5, 213, 255, 1)',
                                        shadowBlur: 4,
                                        barBorderRadius: 12,
                                    },
                                },
                                // 柱子顶部的字体
                                label: {
                                    normal: {
                                        show: true,
                                        lineHeight: 10,
                                        formatter: '{c}',
                                        position: 'top',
                                        textStyle: {
                                            color: '#fff',
                                            fontSize: 10,
                                        },
                                    },
                                },
                            },
                        ],
                    };
                    option && myChart.setOption(option);

                    // setTimeout(function () {
                    //     that.enterpriseTypeChart = echarts.init(document.querySelector(
                    //         '.education_alumni_type_chart'));
                    //     that.enterpriseTypeChart.setOption(option);
                    // }, 10)
                },
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