echarts横向柱状图

一个简单的样式

一、样式？

示例：样式其实一样就是改了颜色

二、使用步骤

1.引入库

代码如下（示例）：

1
2
3
4
5
6
7
8
9
10
11
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap -->
    <link href="test/css/bootstrap.min.css" rel="stylesheet" media="screen">
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 包括所有已编译的插件 -->
    <script src="test/js/bootstrap.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script type="text/javascript" src="js/echarts.min.js" ></script>

2.html+js

代码如下（示例）：

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
<div id="rtleft" style="float: left;height: 100%;width: 420px;margin-left: 20px;margin-top: -50px;"></div>
<!--右上靠左-->
<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('rtleft'));

        // 指定图表的配置项和数据
        var option = {
            dataset: {
        		source: [
            		['score', 'amount', 'product'],
            		[89.3, 58212, '业务员1'],
            		[57.1, 78254, '业务员2'],
            		[74.4, 41032, '业务员3'],
            		[50.1, 12755, '业务员4'],
            		[52.1, 12055, '业务员6'],
        		]},
        		grid: {containLabel: true},
    			xAxis: {name: 'amount',
    					show:false},
    			yAxis: {
    				inverse:true,
    				type: 'category',
    				axisLine:{
           				show:false,
    				},
    				axisTick: {
    					show: false,
    				},
    				axisLabel: {
    					show: true,
    					textStyle: {
    						color:'#fff'  //这里用参数代替了
                		}
              		},
    			},
    			series: [{
        			type: 'bar',
        			encode: {
            		// Map the "amount" column to X axis.
            		x: 'amount',
            		// Map the "product" column to Y axis
            		y: 'product'
        		},

        		itemStyle: {
                //通常情况下：
                	normal: {
                    barBorderRadius: 20,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: '#2cccfd'
                    }, {
                        offset: 1,
                        color: '#fc5a5a'
                    }]),
                    shadowColor: 'rgba(0, 0, 0, 0.4)',
                    shadowBlur: 20
                	},
            	},
            	label: {
                	show: true, //开启显示
                	position: 'right', //在上方显示
                	textStyle: { //数值样式
                  	color: '#fff',
                  	fontSize: '12'
                  	}
                },   
    }]
        };

        // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

LinearGradient（）用来控制家变色及方向后面的四个数控制方向，具体自己百度

总结

拿走的朋友说一下我看看到底帮到了多少人，谢谢了，我还是菜得离谱。