echarts_部分图表配置简介_横向柱状图
横向柱状图主要配置x位置x轴类型y轴类型（轴的类型分两种 1.category（类别）2.value(值)），代码简单（⾥⾯有注释）效果如下：
1var myChart = echarts.ElementById('thisId'));
2/*指定图表的配置项和数据*/
3            option = {
4                    textStyle:{
5                        color:'#fff',
6                        fontSize:'16'
7                      },
8                    title: {
9                        textStyle:{
10                            color:'#fff',
11
12                          },
13                          left:'50%',
14                        text: '',
15/* subtext: '数据来⾃⽹络'*/
16                    },
17                    tooltip: {
18                        trigger: 'axis',
19                        axisPointer: {
20                            type: 'shadow'
21                        }
22                    },
23                    legend: {
24
25                        textStyle:{
26                            color:'#fff',
27                          },
28/* data: [titleName],*/
29                    },
30                    grid: {//设置图表位置
31                        left: '3%',
32                        right: '4%',
33                        bottom: '3%',
34                        containLabel: true
35                    },
36                    xAxis: {
37                        color:'#fff',
38                        splitLine : {//去掉⽹格线
39                            show : false
40                        },
41                        position: 'top',//X轴位置
42                        type: 'value',
43                        boundaryGap: [0, 0.01],
44                        axisLabel : {//坐标轴刻度标签的相关设置
45                            rotate:'45',//坐标轴⽂字旋转⾓度
46                            show : true,
47                            textStyle : {
48                                color : '#FFF',
49                                align : 'right',
50                                fontSize: 15
51                            }
52                        },
53
54                        axisLine : {
55
setoption
56                            lineStyle : {
57                                color : '#FFF'
58                            }
59                        },
60                        axisTick : {
61                            lineStyle : {
62                                color : '#FFF'
63                            }
64                        },
65                    },
66                    yAxis: {
67
68                        type: 'category',//轴的类型分两种 1.category（类别）2.value(值)
69                        data: /*da*/[ '本地商城','⽹上营业厅',  '营业厅', '掌上营业厅' ],
70                        axisLabel : {
71                            show : true,
72                            textStyle : {
73                                color : '#FFF',
74                                align : 'right',
75                                fontSize: 15    /*⽂字⼤⼩*/
76                            }
77                        },
78                        axisLine : {
79                            lineStyle : {
80                                color : '#fff'//轴的颜⾊
81                            }
82                        },
83                        axisTick : {
84                            lineStyle : {
85                                color : '#FFF'//轴上点的颜⾊
86                            }
87                        },
88
89                    },
90                    series: [
91                        {
92                            name: channelArr,
93                            type: 'bar',
94                            data: /*aa*/indexArr,/*请求回来的数据数组*/
95
96                            label : {
97                                normal : {
98                                    show : true,//显⽰数字
99                                    position : 'right'
100                                }
101                            },
102
103                            barWidth : 15,//柱⼦宽度
104                            itemStyle : {
105                                normal : {
106                                    color:'#ccecff',//柱状的颜⾊
107                                    label : {
108                                          textStyle : {
109                                              fontSize : '15',//柱状上的显⽰的⽂字
110                                              color:'#ccecff'
111                                          }
112                                      }
113                                }
114                            },
115
116                        }
117
118                    ]
119                };
120// 使⽤刚指定的配置项和数据显⽰图表。
121            myChart.setOption(option);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。