一、使用場景

制作柏拉圖，帶二八法則線，柱狀圖顯示不同的顏色，折點顯示占比，在接近80%的折點的右方顯示虛線到坐標軸位置，

要求圖片

二、使用echarts制圖，腳本如下：

app.title = '柏拉圖'; option = { //標題 title:{text: '柏拉圖',left:'center' //居中顯示},//添加橫線滾動條（解決數據太多時顯示重疊問題）：根據實際是否需要顯示，不顯示注釋// dataZoom: {// start: 0, //默認為0// end: 90 - 1500 / 31, //默認為100// type: 'slider',// show: true,// xAxisIndex: [0,1],//需要縮放顯示的橫坐標的序號，多個用逗號分隔；[0,1]指分別縮放顯示柱狀圖和折線圖// handleSize: 1, //滑動條的 左右2個滑動條的大小// height: 15, //組件高度// left: 20, //左邊的距離// right: 20, //右邊的距離// bottom: 20, //右邊的距離// fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{// //給顏色設置漸變色 前面4個參數，給第一個設置1，第四個設置0 ，就是水平漸變// //給第一個設置0，第四個設置1，就是垂直漸變// offset: 0,// color: '#3FA7DC'//橫向滾動條的顏色// }, {// offset: 1,// color: '#eeeeee'//橫向滾動條的顏色// }]),// //backgroundColor: 'rgba(0, 0, 0, 0)', //兩邊未選中的滑動條區域的顏色// showDataShadow: false, //是否顯示數據陰影 默認auto// showDetail: false, //即拖拽時候是否顯示詳細數值信息 默認true// handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',// filterMode: 'filter',// },tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}}},grid: {borderWidth: '10',borderColor : '#eeeeee'},legend: {//selectedMode: false,//data:['水量','占比']data:['','']},xAxis: [{type: 'category',//顯示橫坐標中對應值的坐標線（豎線）：默認不顯示//splitLine:{show:true},data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']},{type: 'category',show:false,boundaryGap : false,data: ['', '1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}],yAxis: [{type: 'value',//縱坐標軸上的各個值對應的橫線是否顯示：默認顯示splitLine:false,name: '水量',min: 0,max: 250,interval: 50,axisLabel: {formatter: '{value} ml'}},{type: 'value',name: '占比',min: 0,max: 100,interval: 15,//縱坐標軸上的各個值對應的橫線是否顯示：默認顯示splitLine:false,//splitArea : {show : true}, //保留網格區域axisLabel: {formatter: '{value} %'}}],series: [{name:'水量',type:'bar',//柱狀圖之間的空隙為0barCategoryGap: '0',//設置柱狀圖的顏色itemStyle: {normal: {color: function(params) {var colorList = ['#5e7e54','#e44f2f','#81b6b2','#eba422','#5e7e54','#e44f2f','#81b6b2','#eba422','#5e7e54','#e44f2f','#2e7e04','#e00f2f'];return colorList[params.dataIndex]},//color: '#5a9bd5',//設置柱狀圖邊框線顏色//barBorderColor: 'black',//設置柱狀圖邊框線的顯示寬度//barBorderWidth:0.2}},data:[15, 10, 9, 8, 8, 8, 8, 8, 8, 7, 6, 5]},{name:'占比',type:'line',symbolSize:10,//拐點顯示設置（新版本EChart需要設置）symbol: function (value) {if (value > 0) {//值大于0才顯示return 'circle'; //拐點類型} else {return 'none'; //拐點不顯示}},//顯示設置itemStyle : { normal: {//color:'#f37b1d',color: function(params) {var colorList = ['','#f37b1d','#f37b1d','#f37b1d','#f37b1d','#f37b1d','#f37b1d','#f37b1d','#f37b1d','red','#f37b1d','#f37b1d',''];return colorList[params.dataIndex]},label : {show: true,//格式化formatter: '{c}%'}}},xAxisIndex: 1,yAxisIndex: 1,data:[0, 13, 26, 32, 42, 50, 58, 66, 74, 82, 89,95, 100]},{type: 'scatter',xAxisIndex: 1,yAxisIndex: 1,data: [[8, 82]],//symbolSize: 0,symbol:'none',//去掉箭頭//二八線markLine: {itemStyle: {normal: { lineStyle: { color: "#c00",type: 'dotted', //'dotted'虛線 'solid'實線，默認實線width: 1},label: { show: true, } },//圓點加強顯示emphasis: {color: "#d9def7"}},data: [//指定坐標點之間的線//豎線[{name: '',xAxis: '9月',yAxis: 82},{xAxis: '9月',yAxis: 0}],//橫線[{name: '',xAxis: '9月',yAxis: 82},{xAxis: '12月',yAxis: 82}]],symbol: ['none', 'none'],}}] };

三、運行效果：

四、實例運行網址：

https://echarts.apache.org/v4/examples/zh/editor.html?c=bar-background

Examples - Apache ECharts

五、參照網址：

echarts3 標線markLine_bellus-CSDN博客_echarts標線

Echarts數據可視化series-scatter散點圖，開發全解+完美注釋_全棧工程師開發手冊（原創）(騰訊內推)-CSDN博客

橫向滾動條：echarts X軸內容可滑動Y軸固定的常用配置項(解決echarts數據量太多的顯示問題)_Arbort-CSDN博客

總結

以上是生活随笔為你收集整理的Echart 制作柏拉图——带二八法则线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。