一、使用场景

制作柏拉图，带二八法则线，柱状图显示不同的颜色，折点显示占比，在接近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',
            //柱状图之间的空隙为0
            barCategoryGap: '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博客