可以參考：
https://echarts.baidu.com/echarts2/doc/example.html
https://echarts.baidu.com/echarts2/doc/doc.html#LineStyle
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> 哈哈哈 <div id="chartmain" style="width:600px; height: 400px;"></div> </body> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/echarts.js"></script> <script> option = { title: { //標題相對x、y軸的位置 x: 'center', y: 'bottom', text: 'ECharts例子個數統計', subtext: 'Rainbow bar example', link: 'http://echarts.baidu.com/doc/example.html' }, // 鼠標滑過柱狀圖顯示值 tooltip: { trigger: 'item' }, // 右上角工具按鈕 toolbox: { show: true, feature: { dataView: {show: true, readOnly: false}, restore: {show: true}, saveAsImage: {show: true} } }, calculable: true, grid: { borderWidth: 0, y: 80, y2: 60 }, xAxis: [ { type: 'category', //x軸不顯示(在鼠標滑過時，會顯示在值前面) show: false, data: ['Line', 'Bar', 'Scatter', 'K', 'Pie', 'Radar', 'Chord', 'Force', 'Map', 'Gauge', 'Funnel'] } ], yAxis: [ { type: 'value', show: false } ], series: [ { name: 'ECharts例子個數統計', type: 'bar', //定義每個bar的顏色和其上是否顯示值 itemStyle: { normal: { color: function(params) { // build a color map as your need. //定義一個顏色集合 var colorList = [ '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD', '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0' ]; //對每個bar顯示一種顏色 return colorList[params.dataIndex] }, label: { //每個bar的最高點值顯示在bar頂部 show: true, position: 'top', //值和x軸分類的顯示格式(這里是換行顯示) formatter: '{b}\n{c}' } } }, data: [12,21,10,4,12,5,6,5,25,23,7], markPoint: { tooltip: { trigger: 'item', backgroundColor: 'rgba(0,0,0,0)', formatter: function(params){ return '<img src="' + params.data.symbol.replace('image://', '') + '"/>'; } }, data: [ {xAxis:0, y: 350, name:'Line', symbolSize:20, symbol: 'image://../asset/ico/折線圖.png'}, {xAxis:1, y: 350, name:'Bar', symbolSize:20, symbol: 'image://../asset/ico/柱狀圖.png'}, {xAxis:2, y: 350, name:'Scatter', symbolSize:20, symbol: 'image://../asset/ico/散點圖.png'}, {xAxis:3, y: 350, name:'K', symbolSize:20, symbol: 'image://../asset/ico/K線圖.png'}, {xAxis:4, y: 350, name:'Pie', symbolSize:20, symbol: 'image://../asset/ico/餅狀圖.png'}, {xAxis:5, y: 350, name:'Radar', symbolSize:20, symbol: 'image://../asset/ico/雷達圖.png'}, {xAxis:6, y: 350, name:'Chord', symbolSize:20, symbol: 'image://../asset/ico/和弦圖.png'}, {xAxis:7, y: 350, name:'Force', symbolSize:20, symbol: 'image://../asset/ico/力導向圖.png'}, {xAxis:8, y: 350, name:'Map', symbolSize:20, symbol: 'image://../asset/ico/地圖.png'}, {xAxis:9, y: 350, name:'Gauge', symbolSize:20, symbol: 'image://../asset/ico/儀表盤.png'}, {xAxis:10, y: 350, name:'Funnel', symbolSize:20, symbol: 'image://../asset/ico/漏斗圖.png'}, ] } } ] }; //初始化echarts實例 var myChart = echarts.init(document.getElementById('chartmain')); //使用制定的配置項和數據顯示圖表 myChart.setOption(option); </script> </html>
效果：
上面是普通柱狀圖每個bar顯示不同顏色的方法。
-------------------------------------------------------------------------------------------------------
下面是分組柱狀圖，
不同圖例類型顯示不同 自定義顏色 的設置方法 ，還包含 輔助線：平均線 的設置方法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> 哈哈哈3 <div id="chartmain" style="width:600px; height: 400px;"></div> </body> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/echarts.js"></script> <script> //調用畫圖表方法 drawGroupChart("chartmain"); //定義畫分組柱狀圖方法 function drawGroupChart(domId){ var title = "嘿嘿1"; var xA = ['周一', '周二', '周三', '周四']; var legendData = ['百度', '谷歌', '必應']; //[620, 732, 701, 734] 是x軸上每一組bar上的第一個柱子的數據的值的集合 //[120, 132, 101, 134] 是x軸上每一組bar上的第二個柱子的數據的值的集合 //所以，每一個小集合中數據的順序都要和xA中的數據順序對應，整個大集合中數據的順序要和legendData對應 var dataList = [[620, 732, 701, 734],[120, 132, 101, 134],[60, 72, 71, 74, 190]]; //定義一個顏色集合 var colorList = [ '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD', '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0' ]; //定義ss容器 var ss = []; //生成數據 $.each(legendData,function(i,v){ //定義一個對象 var o = { name:v, type: 'bar', data: dataList[i], //定義每一類bar的顏色和其上是否顯示值(如果不定義itemStyle屬性，會按照echarts中的默認顏色配置) itemStyle: { normal: { color: function(params) { // return colorList[params.dataIndex] //對每個bar（對分組bar圖就是每一組）（即按照x軸中的每個元素）顯示一種顏色 return colorList[i] //對每一類bar（按照legendData中的每個元素）顯示一種顏色 }, label: { //每個bar的最高點值顯示在bar頂部 show: true, position: 'top', //值和x軸分類的顯示格式(這里是換行顯示) formatter: '{b}\n{c}' } } }, //增加輔助線 這里是 平均線 markLine: { //平均線兩端的起始點和樣式,這里none為沒有樣式(比如箭頭) symbol: 'none', data: [{ type: 'average', name: '平均值' }], //具體每一條平均線及其名稱的顯示樣式 itemStyle: { normal: { //線的樣式 lineStyle:{ //線的顏色,這里和 legendData 一致 color: colorList[i] }, //輔助線的名字和值得顯示方式 label: { show: true, // position: 'left', //data中name和type值的顯示格式(這里\n是換行顯示) // formatter: '{b}\n{c}' //{b}代表name,這里是"平均值" ;{c}代表具體的數值如"568" formatter: '{b}' //只顯示 "平均值"三個字 } } }, }, }; //將生成的數據添加到容器中 ss.push(o); }); //拼裝 option var option = { title:{text:title}, tooltip: { trigger: 'axis', axisPointer: { // 坐標軸指示器，坐標軸觸發有效 type: 'shadow' // 默認為直線，可選為：'line' | 'shadow' } }, legend: { data: legendData }, xAxis: [{ type: 'category', data: xA }], yAxis: [{ type: 'value' }], series: ss /* [ { name: '百度', type: 'bar', data: [620, 732, 701, 734], }, { name: '谷歌', type: 'bar', data: [120, 132, 101, 134], }, { name: '必應', type: 'bar', data: [60, 72, 71, 74, 190] } ] */ }; //初始化echarts實例 //var myChart = echarts.init(document.getElementById('chartmain')); var myChart = echarts.init(document.getElementById(domId)); //使用制定的配置項和數據顯示圖表 myChart.setOption(option); } </script> </html>
結果樣式：
