Echert 柏拉图 带二八原则线

一、使用场景

1.制作柏拉图，带二八法则线，柱状图显示不同的颜色，折点显示占比，在接近80%的折点的右方显示虚线到坐标轴位置，

要求图片
在这里插入图片描述

2.直接上代码 没有数据下的示例

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'