折线和柱状(自定义图案)结合

symbol : 自定义图案 三种方式 : ECharts 提供的标记类型 URL 为图片链接 可以通过 'path://' 将图标设置为任意的矢量路径

                                        这个图标是使用的path(矢量图)

效果图:

代码块: 

option = {
    backgroundColor: '#0f375f',
    tooltip: {
        trigger: 'axis',
    },
    xAxis: {
        type: 'category',
        data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'],
        axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
                color: '#01FCE3',
            },
        },
        axisTick: {
            show: true, //隐藏X轴刻度
        },
        axisLabel: {
            show: true,
			interval:0, // 解决字体超过数量不显示问题
            rotate:0,
            textStyle: {
                color: '#ebf8ac', //X轴文字颜色
            },
        },
    },
    yAxis: [
        {
            type: 'value',
            name: '亿元',
            nameTextStyle: {
                color: '#ebf8ac',
            },
            splitLine: {
                //虚线
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(135,140,147,0.8)',
                },
            },
            axisTick: {
                show: true,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#FFFFFF',
                },
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#ebf8ac',
                },
            },
        },
        {
            type: 'value',
            name: '同比',
            nameTextStyle: {
                color: '#ebf8ac',
            },
            position: 'right',
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: true,
                formatter: '{value} %', //右侧Y轴文字显示
                textStyle: {
                    color: '#ebf8ac',
                },
            },
        },
        {
            type: 'value',
            gridIndex: 0,
            min: 50,
            max: 100,
            splitNumber: 8,
            splitLine: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
        },
    ],
    series: [
        {
            name: '销售水量',
            type: 'line',
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            symbol: 'none',
            itemStyle: {
                //折线拐点标志的样式
                color: '#058cff',
            },
            lineStyle: {
                color: '#058cff',
            },
            areaStyle: {
                color: 'rgba(5,140,255, 0.2)',
            },
            data: [5, 6, 4, 7, 10, 8, 15, 12],
        },
        {
            name: '主营业务',
            type: 'pictorialBar',
            symbol: 
                'path://M29.902,23.275c1.86,0,3.368-1.506,3.368-3.365c0-1.859-1.508-3.365-3.368-3.365 c-1.857,0-3.365,1.506-3.365,3.365C26.537,21.769,28.045,23.275,29.902,23.275z M36.867,30.74c-1.666-0.467-3.799-1.6-4.732-4.199 c-0.932-2.6-3.131-2.998-4.797-2.998s-7.098,3.894-7.098,3.894c-1.133,1.001-2.1,6.502-0.967,6.769 c1.133,0.269,1.266-1.533,1.934-3.599c0.666-2.065,3.797-3.466,3.797-3.466s0.201,2.467-0.398,3.866 c-0.599,1.399-1.133,2.866-1.467,6.198s-1.6,3.665-3.799,6.266c-2.199,2.598-0.6,3.797,0.398,3.664 c1.002-0.133,5.865-5.598,6.398-6.998c0.533-1.397,0.668-3.732,0.668-3.732s0,0,2.199,1.867c2.199,1.865,2.332,4.6,2.998,7.73 s2.332,0.934,2.332-0.467c0-1.401,0.269-5.465-1-7.064c-1.265-1.6-3.73-3.465-3.73-5.265s1.199-3.732,1.199-3.732 c0.332,1.667,3.335,3.065,5.599,3.399C38.668,33.206,38.533,31.207,36.867,30.74z',
            barWidth: 30,
            itemStyle: {
                //颜色
                normal: {
                    color: function (params) {
                        //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                        var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'];
                        return colorList[params.dataIndex];
                    },
                },
            },
            data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
        },
    ],
};