2. 程式人生 > >Echart使用，看了就會的

Echart使用，看了就會的

阿新 • • 發佈：2018-12-29

最簡單的demo參照官網http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

jquery載入：

<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="compass/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	//var app.title = '2000-2016年中國汽車銷量及增長率';
	var chart=echarts.init(document.getElementById("main"));
	var option = {
	    title: {
	        text: '2000-2016年中國汽車銷量及增長率'
	    },
	    tooltip: {
	        trigger: 'axis'
	    },
	    legend: {
	        data: ['增速','銷量']
	    },
	    xAxis: [{
	        type: 'category',
	        data: ['2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016']
	    }],
	    yAxis: [{
	        type: 'value',
	        name: '增速',
	        min: 0,
	        max: 50,
	        position: 'right',
	        axisLabel: {
	            formatter: '{value} %'
	        }
	    }, {
	        type: 'value',
	        name: '銷量',
	        min: 0,
	        max: 3000,
	        position: 'left'
	    }],
	    series: [{
	        name: '增速',
	        type: 'line',
	        stack: '總量',
	            label: {
	                normal: {
	                    show: true,
	                    position: 'top',
	                }
	            },
	        lineStyle: {
	                normal: {
	                    width: 3,
	                    shadowColor: 'rgba(0,0,0,0.4)',
	                    shadowBlur: 10,
	                    shadowOffsetY: 10
	                }
	            },
	        data: [1,13,37,35,15,13,25,21,6,45,32,2,4,13,6,4,11]
	    }, {
	        name: '銷量',
	        type: 'bar',
	        yAxisIndex: 1,
	        stack: '總量',
	            label: {
	                normal: {
	                    show: true,
	                    position: 'top'
	                }
	            },
	        data: [209,236,325,439,507,576,722,879,938,1364,1806,1851,1931,2198,2349,2460,2735]
	    }]
	};
	chart.setOption(option);
})
</script>

 載入的區域

<div id="main" style="width: 500px; height: 350px;"></div>

 

 

 

 

折線圖和柱狀圖對比

通過點選Echart 圖表右上角的 色塊 可以控制對應圖表的顯隱。但在多條柱狀圖中，對應的圖形複雜（可以調整柱狀圖之間的距離解決），不符合圖表直觀清晰的特徵，所以通過改寫成折線圖的方式更有利。在只有兩支柱狀圖時，使用柱狀圖較好。

多條折線圖

多柱狀圖

2. 多圖表展示

一般一個option 對應一張圖表，但是也可以將多張圖表通過一個option

 展示

多圖表

var edu = ['專科', '本科', '碩士', '博士'
];
var eduS = [200, 120, 256, 250];

var city = ['北京', '上海', '深圳', '廣州', '杭州',
    '豐富', '浮點', '佛山', '長沙', '成都'
];
var cityS = [200, 120, 256, 250, 200, 180, 200, 190, 124, 200];

var comp = ['100-200', '200-300', '300-500', '<100'
];
var compS = [200, 120, 256, 250];

var exper = ['1年經驗', '2年經驗', '3年經驗', '4年經驗', '5年經驗'
];
var experS = [250, 200, 180, 190, 200];
var colors = ['#96d668', '#01babc', '#1a98f8', '#7049f0'];

option = {
    backgroundColor: "#2d3548",
    title: [{
            text: "學歷與崗位工資",
            left: "70%",
            textStyle: {
                color: "#fff",
                fontSize: "14"
            }
        }, {
            left: "25%",
            text: "城市與崗位工資",
            textStyle: {
                color: "#fff",
                fontSize: "14"
            }
        },
        {
            text: "公司規模與崗位工資",
            left: "70%",
            top: "52%",
            textStyle: {
                color: "#fff",
                fontSize: "14"
            }
        }, {
            left: "25%",
            top: "52%",
            text: "工作經驗與崗位工資",
            textStyle: {
                color: "#fff",
                fontSize: "14"
            }
        }
    ],
    grid: [{
            x: '8%',
            y: '8%',
            width: '40%',
            height: "40%",
            containLabel: true
        },
        {
            x2: '8%',
            y: '8%',
            width: '40%',
            height: "40%",
            containLabel: true
        },
        {
            x: '8%',
            y2: '0',
            width: '40%',
            height: "40%",
            bottom: "2%",
            containLabel: true
        },
        {
            x2: '8%',
            y2: '0',
            width: '40%',
            height: "40%",
            bottom: "2%",
            containLabel: true
        },
    ],
    tooltip: {
        formatter: '{b}:<br/> {c}'
    },
    xAxis: [
        {
            gridIndex: 0,
            type: 'category',
            boundaryGap: true, //座標軸兩邊留白
            data: edu,
            axisLabel: { //座標軸刻度標籤的相關設定。
                interval: 0, //設定為 1，表示『隔一個標籤顯示一個標籤』
                margin: 15,
                textStyle: {
                    color: '#ddd',
                    fontStyle: 'normal',
                    fontFamily: '微軟雅黑',
                    fontSize: 12,
                }
            },
            axisTick: {
                show: false,
            },
            axisLine: { //座標軸軸線相關設定
                lineStyle: {
                    color: '#ddd',
                    opacity: 0.2
                }
            },
            splitLine: {
                show: false,
            }
        },
        {
            gridIndex: 1,
            type: 'category',
            boundaryGap: true, //座標軸兩邊留白
            data: comp,
            axisLabel: { //座標軸刻度標籤的相關設定。
                interval: 0, //設定為 1，表示『隔一個標籤顯示一個標籤』
                margin: 15,
                textStyle: {
                    color: '#ddd',
                    fontStyle: 'normal',
                    fontFamily: '微軟雅黑',
                    fontSize: 12,
                }
            },
            axisTick: { //座標軸刻度相關設定。
                show: false,
            },
            axisLine: { //座標軸軸線相關設定
                lineStyle: {
                    color: '#ddd',
                    opacity: 0.2
                }
            },
            splitLine: { //座標軸在 grid 區域中的分隔線。
                show: false,
            }
        },
        {
            gridIndex: 2,
            type: 'category',
            boundaryGap: true, //座標軸兩邊留白
            data: exper,
            axisLabel: { //座標軸刻度標籤的相關設定。
                interval: 0, //設定為 1，表示『隔一個標籤顯示一個標籤』
                margin: 15,
                textStyle: {
                    color: '#ddd',
                    fontStyle: 'normal',
                    fontFamily: '微軟雅黑',
                    fontSize: 12,
                }
            },
            axisTick: { //座標軸刻度相關設定。
                show: false,
            },
            axisLine: { //座標軸軸線相關設定
                lineStyle: {
                    color: '#ddd',
                    opacity: 0.2
                }
            },
            splitLine: { //座標軸在 grid 區域中的分隔線。
                show: false,
            }
        },
        {
            gridIndex: 3,
            type: 'category',
            boundaryGap: true, //座標軸兩邊留白
            data: city,
            axisLabel: { //座標軸刻度標籤的相關設定。
                interval: 0, //設定為 1，表示『隔一個標籤顯示一個標籤』
                margin: 15,
                textStyle: {
                    color: '#ddd',
                    fontStyle: 'normal',
                    fontFamily: '微軟雅黑',
                    fontSize: 12,
                }
            },
            axisTick: { //座標軸刻度相關設定。
                show: false,
            },
            axisLine: { //座標軸軸線相關設定
                lineStyle: {
                    color: '#ddd',
                    opacity: 0.2
                }
            },
            splitLine: { //座標軸在 grid 區域中的分隔線。
                show: false,
            }
        }
    ],
    yAxis: [{
            gridIndex: 0,
            axisLabel: {
                textStyle: {
                    color: '#a8aab0',
                    fontStyle: 'normal',
                    fontFamily: '微軟雅黑',
                    fontSize: 12,
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: ['#fff'],
                    opacity: 0.06
                }
            }
        },
        {
            gridIndex: 1,
            axisLabel: {
                textStyle: {
                    color: '#a8aab0',
                    fontStyle: 'normal',
                    fontFamily: '微軟雅黑',
                    fontSize: 12,
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: ['#fff'],
                    opacity: 0.06
                }
            }
        },
        {
            gridIndex: 2,
            axisLabel: {
                textStyle: {
                    color: '#a8aab0',
                    fontStyle: 'normal',
                    fontFamily: '微軟雅黑',
                    fontSize: 12,
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: ['#fff'],
                    opacity: 0.06
                }
            }
        },
        {
            gridIndex: 3,
            axisLabel: {
                textStyle: {
                    color: '#a8aab0',
                    fontStyle: 'normal',
                    fontFamily: '微軟雅黑',
                    fontSize: 12,
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: ['#fff'],
                    opacity: 0.06
                }
            }
        },
    ],
    series: [
        {
            type: 'line',
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: { //圖形樣式
                normal: {
                    color: colors[3],
                },
            },
            data: eduS
        },
        {
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: { //圖形樣式
                normal: {
                    color: colors[2],
                },
            },
            data: compS
        },
        {
            type: 'line',
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: { //圖形樣式
                normal: {
                    color: colors[1],
                },
            },
            data: experS
        },
        {
            type: 'line',
            xAxisIndex: 3,
            yAxisIndex: 3,
            itemStyle: { //圖形樣式
                normal: {
                    color: colors[0],
                },
            },
            data: cityS
        }
    ]
};

複製貼上到此頁面可見效果

同理也可以展示三張圖表

  var edu = ['專科', '本科', '碩士', '博士'
        ];
        var eduS = [200, 120, 256, 250];


        var comp = ['100-200', '200-300', '300-500', '<100'
        ];
        var compS = [200, 120, 256, 250];

        var exper = ['1年經驗', '2年經驗', '3年經驗', '4年經驗', '5年經驗'
        ];
        var experS = [250, 200, 180, 190, 200];

        var colors = ['#96d668', '#01babc', '#1a98f8', '#7049f0'];

        titles = ["學歷與崗位數量", "公司規模與崗位數量", "工作經驗與崗位數量"];

        option = {
          backgroundColor: "#2d3548",
          color: colors ,
       legend: {
        orient: 'vertical', 
        bottom:'15%',
        right:"10%",
        itemGap: 20,
        textStyle:{color:"#aaa"},
        data:[
            '學歷', '城市', '經驗'
        ]
    },
          title: [{
            text: titles[1],
            left: "70%",
            textStyle: {
              color: "#fff",
              fontSize: "14"
            }
          }, {
            left: "25%",
            text: titles[0],
            textStyle: {
              color: "#fff",
              fontSize: "14"
            }
          },{
            left: "25%",
            top: "52%",
            text: titles[2],
            textStyle: {
              color: "#fff",
              fontSize: "14"
            }
          },
          {
            left: "62%",
            top: "55%",
            text: "工作經驗與崗位數量",
            subtext:"根據招聘資訊分析所得",
            textStyle: {
              color: "#fff",
              fontSize: "24",
              align:"center",
            }
          }
          ],
          grid: [{
            x: '8%',
            y: '8%',
            width: '40%',
            height: "40%",
            containLabel: true
          },
          {
            x2: '8%',
            y: '8%',
            width: '40%',
            height: "40%",
            containLabel: true
          },
          {
            x: '8%',
            y2: '0',
            width: '40%',
            height: "40%",
            bottom: "2%",
            containLabel: true
          },
          ],
          tooltip: {
            formatter: '{b}:<br/> {c}'
          },
          xAxis: [
            {
              gridIndex: 0,
              type: 'category',
              boundaryGap: true, //座標軸兩邊留白
              data: edu,
              axisLabel: { //座標軸刻度標籤的相關設定。
                interval: 0, //設定為 1，表示『隔一個標籤顯示一個標籤』
                margin: 15,
                textStyle: {
                  color: '#ddd',
                  fontStyle: 'normal',
                  fontFamily: '微軟雅黑',
                  fontSize: 12,
                }
              },
              axisTick: {
                show: false,
              },
              axisLine: { //座標軸軸線相關設定
                lineStyle: {
                  color: '#ddd',
                  opacity: 0.2
                }
              },
              splitLine: {
                show: false,
              }
            },
            {
              gridIndex: 1,
              type: 'category',
              boundaryGap: true, //座標軸兩邊留白
              data: comp,
              axisLabel: { //座標軸刻度標籤的相關設定。
                interval: 0, //設定為 1，表示『隔一個標籤顯示一個標籤』
                margin: 15,
                textStyle: {
                  color: '#ddd',
                  fontStyle: 'normal',
                  fontFamily: '微軟雅黑',
                  fontSize: 12,
                }
              },
              axisTick: { //座標軸刻度相關設定。
                show: false,
              },
              axisLine: { //座標軸軸線相關設定
                lineStyle: {
                  color: '#ddd',
                  opacity: 0.2
                }
              },
              splitLine: { //座標軸在 grid 區域中的分隔線。
                show: false,
              }
            },
            {
              gridIndex: 2,
              type: 'category',
              boundaryGap: true, //座標軸兩邊留白
              data: exper,
              axisLabel: { //座標軸刻度標籤的相關設定。
                interval: 0, //設定為 1，表示『隔一個標籤顯示一個標籤』
                margin: 15,
                textStyle: {
                  color: '#ddd',
                  fontStyle: 'normal',
                  fontFamily: '微軟雅黑',
                  fontSize: 12,
                }
              },
              axisTick: { //座標軸刻度相關設定。
                show: false,
              },
              axisLine: { //座標軸軸線相關設定
                lineStyle: {
                  color: '#ddd',
                  opacity: 0.2
                }
              },
              splitLine: { //座標軸在 grid 區域中的分隔線。
                show: false,
              }
            }
          ],
          yAxis: [{
            gridIndex: 0,
            name:"/ 崗位數量",
            nameTextStyle:{color:"#a8aab0"},
            axisLabel: {
              textStyle: {
                color: '#a8aab0',
                fontStyle: 'normal',
                fontFamily: '微軟雅黑',
                fontSize: 12,
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#fff'],
                opacity: 0.06
              }
            }
          },
          {
            gridIndex: 1,
            name:"/ 崗位數量",
            nameTextStyle:{color:"#a8aab0"},
            axisLabel: {
              textStyle: {
                color: '#a8aab0',
                fontStyle: 'normal',
                fontFamily: '微軟雅黑',
                fontSize: 12,
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#fff'],
                opacity: 0.06
              }
            }
          },
          {
            gridIndex: 2,
            name:"/ 崗位數量",
            nameTextStyle:{color:"#a8aab0"},
            axisLabel: {
              textStyle: {
                color: '#a8aab0',
                fontStyle: 'normal',
                fontFamily: '微軟雅黑',
                fontSize: 12,
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#fff'],
                opacity: 0.06
              }
            }
          }
          ],
          series: [
            {
              type: 'line',
              name:'學歷',
              xAxisIndex: 0,
              yAxisIndex: 0,
             symbolSize: 8,
        symbol: 'circle',
              data: eduS
            },
            {
              type: 'line',
              name:'城市',
              xAxisIndex: 1,
              yAxisIndex: 1,
              symbolSize: 8,
        symbol: 'circle',
              data: compS
            },
            {
              type: 'line',
              name:'經驗',
              xAxisIndex: 2,
              yAxisIndex: 2,
             symbolSize: 8,
        symbol: 'circle',
              data: experS
            }
          ]
        }

某城市多個職位的薪資分佈

一個屬性多種結果的展示

某一個職位在多個城市的薪資分佈階段

//TODO: 不可更改薪資範圍，否則顏色
yName = ["30K-50K", "20K-30K", "15K-20K", "10K-15K", "8K-10K", "6K-8K", "4K-6K"];
option = {
    backgroundColor: '#2d3548',
    title: [{
                text: "Java",
                 right:"25%",
                textStyle: {
                  color: "#fff",
                  fontSize: "14"
                }
              },{
                 left:"25%",
                text: "Python",
                textStyle: {
                  color: "#fff",
                  fontSize: "14"
                }
              },
              {
                text: "SQL",
                 right:"25%",
                 top:"50%",
                textStyle: {
                  color: "#fff",
                  fontSize: "14"
                }
              },{
                 left:"25%",
                 top:"50%",
                text: "TOMACAT",
                textStyle: {
                  color: "#fff",
                  fontSize: "14"
                }
              }
              ],
    grid: [{
            x: '8%',
            y: '8%',
            width: '40%',
            height:"40%",
            containLabel: true
        },
        {
            x2: '8%',
            y: '8%',
            width: '40%',
            height:"40%",
            containLabel: true
        },
        {
            x: '8%',
            y2: '0',
            width: '40%',
            height:"40%",
            containLabel: true
        },
        {
            x2: '8%',
            y2: '0',
            width: '40%',
            height:"40%",
            containLabel: true
        },
    ],
    xAxis: [{
            gridIndex: 0,
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            }
        },
        {
            gridIndex: 1,
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            }
        },
        {
            gridIndex: 2,
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            }
        },
        {
            gridIndex: 3,
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            }
        },
    ],
    yAxis: [{
        gridIndex: 0,
        interval: 0,
        data: yName,
        axisTick: {
            show: false
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: "#ddd"
            }
        },
        splitLine: {
            show: false
        },
        axisLine: {
            show: false
        },
    }, {
        gridIndex: 1,
        interval: 0,
        data: yName,
        axisTick: {
            show: false
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: "#ddd"
            }
        },
        splitLine: {
            show: false
        },
        axisLine: {
            show: false
        },
    },
    {
        gridIndex: 2,
        interval: 0,
        data: yName,
        axisTick: {
            show: false
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: "#ddd"
            }
        },
        splitLine: {
            show: false
        },
        axisLine: {
            show: false
        },
    }, {
        gridIndex: 3,
        interval: 0,
        data: yName,
        axisTick: {
            show: false
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: "#ddd"
            }
        },
        splitLine: {
            show: false
        },
        axisLine: {
            show: false
        },
    }
    ],
    series: [
        {
            name: 'python',
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: {
                // normal:{color:'#4f9aff',barBorderRadius:[0,10,10,0],}
                normal: {
                    barBorderRadius: [0, 8, 8, 0],
                    borderWidth: 0,
                    borderColor: '#fff',
                    label:{
                        show:true,
                        position:'right',
                        formatter:function(v){
                          return v.value + "%";
                        },
                    },
                    color: function(params) {
                        // build a color map as your need.
                        var colorList = [
                            '#b250ff',// 最後一個
                            '#4849b5', 
                            '#ffa800',
                            '#E5C37D', 


                            '#7f80e1b3', '#5c6d9ab3', 
                            '#837e86',
                            '#fdc86a' 

                        ];

                        return colorList[params.dataIndex]
                    },
                     shadowBlur: 20,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            barGap: '0',
            barWidth:'20',
            barCategoryGap: '5%',
            data: [10, 32, 28, 18, 2, 5, 5, ]
        },
        {
            name: 'Java',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
                // normal:{color:'#4f9aff',barBorderRadius:[0,10,10,0],}
                normal: {
                    barBorderRadius: [0, 8, 8, 0],
                    borderWidth: 0,
                    borderColor: '#fff',
                    label:{
                        show:true,
                        position:'right',
                        formatter:function(v){
                          return v.value + "%";
                        },
                    },
                    color: function(params) {
                        // build a color map as your need.
                        var colorList = [
                            '#b250ff',// 最後一個
                            '#4849b5', 
                            '#ffa800',
                            '#E5C37D', 


                            '#7f80e1b3', '#5c6d9ab3', 
                            '#837e86',
                            '#fdc86a' 
                        ];

                        return colorList[params.dataIndex]
                    },
                    shadowBlur: 20,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            barGap: '0',
            barWidth:'20',
            barCategoryGap: '5%',
            data: [10, 42, 8, 28, 2, 5, 5, ]
        },
        {
            name: 'SQL',
            type: 'bar',
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
                // normal:{color:'#4f9aff',barBorderRadius:[0,10,10,0],}
                normal: {
                    barBorderRadius: [0, 8, 8, 0],
                    borderWidth: 0,
                    borderColor: '#fff',
                    label:{
                        show:true,
                        position:'right',
                        formatter:function(v){
                          return v.value + "%";
                        },
                    },
                    color: function(params) {
                        // build a color map as your need.
                        var colorList = [
                            '#b250ff',// 最後一個
                            '#4849b5', 
                            '#ffa800',
                            '#E5C37D', 


                            '#7f80e1b3', '#5c6d9ab3', 
                            '#837e86',
                            '#fdc86a' 

                        ];

                        return colorList[params.dataIndex]
                    },
                     shadowBlur: 20,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            barGap: '0',
            barWidth:'20',
            barCategoryGap: '5%',
            data: [10, 32, 28, 18, 2, 5, 5, ]
        },
        {
            name: 'TOMACAT',
            type: 'bar',
            xAxisIndex: 3,
            yAxisIndex: 3,
            itemStyle: {
                // normal:{color:'#4f9aff',barBorderRadius:[0,10,10,0],}
                normal: {
                    barBorderRadius: [0, 8, 8, 0],
                    borderWidth: 0,
                    borderColor: '#fff',
                    label:{
                        show:true,
                        position:'right',
                        formatter:function(v){
                          return v.value + "%";
                        },
                    },
                    color: function(params) {
                        // build a color map as your need.
                        var colorList = [
                            '#b250ff',// 最後一個
                            '#4849b5', 
                            '#ffa800',
                            '#E5C37D', 


                            '#7f80e1b3', '#5c6d9ab3', 
                            '#837e86',
                            '#fdc86a' 
                        ];

                        return colorList[params.dataIndex]
                    },
                    shadowBlur: 20,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            barGap: '0',
            barWidth:'20',
            barCategoryGap: '5%',
            data: [10, 42, 8, 28, 2, 5, 5, ]
        }

    ]
};

排行榜效果

需要對返回的值進行排序

排行榜效果

var jobNums = [135, 213, 311, 211, 341, 681, 123, 231, 111, 321].sort();
var avgSalary = [182, 234, 290, 170, 744, 630, 323, 412, 121, 400].sort();

var yAxisData = ['資料分析師', '資料探勘師', '資料產品經理', '資料研發工程師', '大資料視覺化工程師', '大資料專家',
    '分析工程師', '資料工程師', '資料庫設計師', '資料架構師'
];
option = {
    backgroundColor: "#2d3548",
    title: [{
        text: "崗位薪資和數量",
        x: 'center',
        textStyle: {
            color: "#fff",
            fontSize: "14"

        }
    }, ],
    grid: [{
            x: '8%',
            y: '10%',
            width: '40%',
            containLabel: true
        },
        {
            x2: '8%',
            y: '10%',
            width: '40%',
            containLabel: true
        },
    ],
    tooltip: {
        formatter: '{a}<br/>{b} ({c})'
    },
    xAxis: [{
            gridIndex: 0,
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            }
        },
        {
            gridIndex: 1,
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            }
        },
    ],
    yAxis: [{
        gridIndex: 0,
        interval: 0,
        data: yAxisData,
        axisTick: {
            show: false
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: "#ddd"
            }
        },
        splitLine: {
            show: false
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "#821eff"
            }
        },
    }, {
        gridIndex: 1,
        interval: 0,
        data: yAxisData,
        axisTick: {
            show: false
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: "#ddd"
            }
        },
        splitLine: {
            show: false
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "#4f9aff"
            }
        },
    }],
    legend: {
        data: ['平均工資', '崗位數量'],
        x: "right",
        textStyle: {
            color: "#ddd"
        }
    },
    series: [{
            name: '平均工資',
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            barWidth: '45%',
            itemStyle: {
                normal: {
                    barBorderRadius: [0, 8, 8, 0],
                    color: {
                        type: 'bar',
                        colorStops: [{
                            offset: 0,
                            color: '#821eff' // 0% 處的顏色
                        }, {
                            offset: 1,
                            color: '#4f9aff' // 100% 處的顏色
                        }],
                        globalCoord: false, // 預設為 false
                    },
                }
            },
            label: {
                normal: {
                    show: true,
                    position: "right",
                    textStyle: {
                        color: "#9EA7C4"
                    }
                }
            },
            data: jobNums,
        }, {
            name: '崗位數量',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            barWidth: '45%',
            itemStyle: {
                normal: {
                    barBorderRadius: [0, 8, 8, 0],
                    color: {
                        type: 'bar',
                        colorStops: [{
                            offset: 0,
                            color: '#4f9aff' // 0% 處的顏色
                        }, {
                            offset: 1,
                            color: '#4bf3ff' // 100% 處的顏色
                        }],
                        globalCoord: false, // 預設為 false
                    },
                }
            },
            label: {
                normal: {
                    show: true,
                    position: "right",
                    textStyle: {
                        color: "#9EA7C4"
                    }
                }
            },
            data: avgSalary,
        },

    ]
};

一個實體的兩個屬性

首先想到的是在一個圖形中展示兩支柱狀圖，由於這兩個屬性可能對應的值大小或者型別不同，會導致兩個屬性各自對應的圖形高低不一致。同時需設立兩個 y軸 。使用條形圖和折線圖的組合方式是一個不錯的選擇。 
兩支柱狀圖

折線圖和柱狀圖

 

 

參考地址

 

 

純轉載，為了自己保留下來借鑑的

相關推薦

Echart使用，看了就會的

最簡單的demo參照官網http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts jquery載入： <script type="text/javascript"

Word圖片大小總是對不齊，如何統一圖片的大小位置，看一眼就會！

還在為圖片大小位置不統一而發愁嗎，這樣做出來的word文件不美觀圖片看起來也是大小不一很不協調。今天就教大家幾個簡單的處理圖片的辦法，快來學習吧！ 修改圖片預設環繞方式 大家在word中插入圖片的時候有沒有遇到這樣的麻煩，插入的圖片無法移動，必須要手動設定一下環繞方式才可以移動圖片，這樣做太費事

如何實現對函式的隱藏，看完就會

      當你寫了一個函式可以實現某些功能時，你要給其他人使用，卻不想讓別人看到你寫的函式的內容，這時你就可以通過對函式內容進行隱藏來達到目的，函式提供了對過程的封裝和細節的隱藏，那麼今天我們就來看看如何對函式進行隱藏：   這裡以上篇部落格寫的Sw

深入理解學習Git工作流，看了就懂了。

個人在學習git工作流的過程中，從原有的 SVN 模式很難完全理解git的協作模式，直到有一天我看到了下面的文章，好多遺留在心中的困惑迎刃而解，於是我將這部分資料進行整理放到了github上，歡迎star檢視最新更新內容， https://github.com/xirong/my-git

nRF24L01微控制器通訊的總結--看了就會用了

1周時間，我從一個沒用過STC微控制器，不知道什麼叫SPI介面的“文盲”，把nRF24L01的整個通訊過程弄到完全沒有bug.。興奮之餘來小屁一下。給那些正在奮鬥著這個牛逼的晶片的小牛們小炫一下。希望有所幫助。屁話少說。正題：　　基本的東西我理解了，那就是：1.用5根線的S

如何恢復u盤誤刪文件，看完就不會覺得自己很菜了

cover 查找 都是 U盤數據恢復 uga jpeg 數據 硬盤 數據恢復 在工作和生活中，U盤發揮著不可替代的作用，別看它體積小，但是卻能保存大量的數據，厲害著呢。但是一切都是兩面的，U盤雖然能保存很多數據，但是卻不能讓數據一直安全的存在，一個不小心就能將文件刪除。 U

嵌入式硬體學習方法，看了這些你就不會迷茫了

嵌入式的硬體學習是開始嵌入式的基礎，那麼現在我分享一下在華清遠見嵌入式學習的一些經驗，方法。從第一個最簡單的流水燈開始，都是從開始讀懂硬體原理圖開始的，所有首先要有基本的電路知識，然後就是可以先學一下51微控制器開發板，學習一下51的微控制器基本外圍裝置有哪些。再做做基於微控

深度學習模型stacking模型融合python代碼，看了你就會使

shuffle The max and ots shape onf 第一個 求平均值 話不多說，直接上代碼 1 def stacking_first(train, train_y, test): 2 savepath = ‘./stack_op{}_dt

swiper裏面的，tab切換，不同的slide高度不一樣，外層高度何如隨之改變，如果裏面的每一屏的高度不一樣，那麽就會一直以高度最大的一個座位最外層的高度，總成了頁面內容少的那一頁有很大空白，改如何動態改變外層的高度呢

ide設置 就會 否則 location translate dir 最大的 ext 如果 解決方案：1.autoHeight: true;缺點：有明顯的跳動效果2.先給容器設固定高度，每次滑動多少時，改變當前tab頁的容器高度，我在實現是遇到一點小問題，代碼忘記保存了。

【轉】BBC解剖了一個200斤女子，看完你會用生命去減肥！

一個 是否 ID 中國 RM 過度 中國人口 理學 enter 此文有部分血腥的解剖畫面，如果無法忍受可以現在關掉頁面！ 　　最近BBC有一部紀錄片震驚全球， 　　他們用最直觀的方式告訴你肥胖有對可怕， 　　紀錄片的名字叫——解剖肥胖！▼ 　　紀錄片中，兩位解剖病理學專家

VMware圖文安裝，看了一秒竟然會了！

.VMware安裝步驟 1.雙擊VMware，如果沒有金鑰，往下文看，下文提供了一個金鑰用於軟體的解鎖 2.點選下一步 3.單選框不點選 4.點選下一步 5.完成VMware的安裝 我這安裝過的，沒顯示填寫金鑰框，這是金鑰：5A02H-AU243-TZ

呼叫函式時，到底什麼時候要用指標接收，看完就不難理解了（Swap交換函式為例）

在這裡我通過講解一個交換函式來講解一下什麼時候傳參需要用指標接收。   這裡先看一段程式碼，很多初學者對指標掌握不夠，經常會寫出這樣的程式碼： #define _CRT_SECURE_NO_WARNINGS 1 #include<stdio.h> #include&

Linux中find命令用法全匯總，看完就沒有不會用的！

分用 想要 單個 ges 基本上 特定 cda size 以及 Linux 查找命令是Linux系統中最重要和最常用的命令之一。查找用於根據與參數匹配的文件指定的條件來搜索和查找文件和目錄列表的命令。查找可以在各種條件下使用，您可以通過權限，用戶，組，文件類型，日期，大小等

App預覽製作，看我就夠了

序： 概覽 :         App 預覽使用錄屏的內容來展示您的 app 的特性，功能，以及使用者介面。您可以為您的 app 支援的每種語言展示最多三個 App 預覽，每段預覽視訊的時長可達 30 秒。藉

十大經典排序演算法動畫，看我就夠了！

點選上方“程式人生”，選擇“置頂公眾號” 第一時間關注程式猿（媛）身邊的故事 圖片源自：モブサイコ100 作者 程式設計師小吳 如需轉載，請聯絡我們。 在前面的章節中詳細的講解分析了十大經典排序演算法，本文將進行一個大總結。 Tip&n

十大經典排序算法動畫與解析，看我就夠了！（配代碼完全版）

實現 insert 個數 while ets 函數 cep lec nbsp GitHub Repo：Sort Article Follow: MisterBooo · GitHub 排序算法是《數據結構與算法》中最基本的算法之一。 排序算法可以分為內部排序和

十大經典排序演算法動畫與解析，看我就夠了！（配程式碼完全版）

GitHub Repo：Sort Article Follow: MisterBooo · GitHub 排序演算法是《資料結構與演算法》中最基本的演算法之一。 排序演算法可以分為內部排序和外部排序。 內部排序是資料記錄在記憶體中進行排序。 而外部排序是因排序的資料很大，一次不能容納全部的排

Linux shell簡介，臥槽看了居然會了??&%$$

Shell概述 Shell本身是一個用C語言編寫的程式，它是使用者使用Unix/Linux的橋樑，使用者大部分工作都是通過shell完成的。 Shell既是一種命令語言，又是一種程式設計語言： 作為命令語言，它互動式地解釋和執行使用者輸入的命令； 作為程式設計

關於javascript的原型和原型鏈，看我就夠了（二）

溫故 建立物件的三種方式 通過物件直接量 通過new建立物件 通過Object.create() js中物件分為兩種 函式物件 普通物件 仔細觀察如下程式碼 function Foo(name) { this.name = name; } var fo

java基礎重點講解，看了還不會找我（三）

###03.01_Java語言基礎(邏輯運算子的基本用法)(掌握) * A:邏輯運算子有哪些     * &,|,^,!     * &&,||  * B:案例演示 * 邏輯運算子的基本用法