Echarts 样式备份（伪3D双柱状图 + 双折线图），适配蓝色背景科技风

---

_{图表主要兼容大型屏幕，需要小型图表可以尝试降低scale的大小，或者自行调整样式}

---

---

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('charts1'));
    
    var scale = 2;
    var yData1 = ["271", "301", "141", "121", "211"];
    var yData2 = ["431", "211", "313", "101", "641"];
    var yData3 = ["2771", "3801", "8141", "11121", "22711"];
    var yData4 = ["3731", "4011", "13313", "10861", "23641"];
    
    var option =
    {
        tooltip:
        {
            trigger: 'axis',
            axisPointer:
            {
                type: 'shadow'
            },
            textStyle:
            {
                fontSize: scale >= 1 ? 12 * scale : 12,
            },
            formatter: function(params)
            {
                let returnStr = '';
                returnStr += params[0].name + "年 : <br />";
                returnStr += params[2].marker + " " + params[2].seriesName + " : " + params[2].value + " 项<br />";
                returnStr += params[5].marker + " " + params[5].seriesName + " : " + params[5].value + " 项<br />";
                returnStr += params[6].marker + " " + params[6].seriesName + " : " + params[6].value + " 万元<br />";
                returnStr += params[7].marker + " " + params[7].seriesName + " : " + params[7].value + " 万元<br />";
                
                return returnStr;
            }
        },
        grid:
        {
            left: '2%',
            right: '4%',
            bottom: '4%',
            top:'16%',
            containLabel: true
        },
        legend:
        {
            data: ['国家项目立项数', '省级项目立项数', '国家项目投入经费', '省级项目投入经费'],
            right: 170,
            top:1,
            textStyle:
            {
                color:"#FFFFFF",
                fontSize: scale >= 1 ? 12 * scale : 12,
            },
            itemWidth: 18 * scale,
            itemHeight: 12 * scale,
            color: '#242424'
        },
        xAxis:
        {
            type: 'category',
            data: ['2016', '2017', '2018', '2019', '2020'],
            axisLine:
            {
                lineStyle:
                {
                    show: true,
                    lineStyle:
                    {
                        color: '#6A989E',
                    }
                }
            },
            axisLabel: {
                textStyle:
                {
                    fontFamily: 'Microsoft YaHei',
                    color: '#fff',
                    fontWeight: 'normal',
                    fontSize: scale >= 1 ? 12 * scale : 12,
                    lineHeight: 12 * scale
                }
            },
        },
        yAxis:
        [
            {
                type: 'value',
                name: "         立项数（单位：项）\n",
                nameTextStyle:
                {
                    color: '#ffffff',
                    fontSize: scale >= 1 ? 12 * scale : 12,
                },
                axisLine:
                {
                    show: false,
                },
                splitLine:
                {
                    show: false,
                },
                axisLabel:
                {
                    formatter: '{value}',
                    color: '#fff',
                    fontSize: scale >= 1 ? 12 * scale : 12,
                }
            },
            {
                type: 'value',
                name: "         投入经费（单位：万元）\n",
                nameTextStyle:
                {
                    color: '#ffffff',
                    fontSize: scale >= 1 ? 12 * scale : 12,
                },
                axisLine:
                {
                    show: false,
                },
                splitLine:
                {
                    show: false,
                },
                axisLabel:
                {
                    formatter: '{value}',
                    color: '#fff',
                    fontSize: scale >= 1 ? 12 * scale : 12,
                }
            },
        ],
        series:
        [
            {
                yAxisIndex: 0,
                type: 'pictorialBar',
                symbolSize: [40 * scale, 8],
                symbolOffset: [-24 * scale, -4],
                symbolPosition: 'end',
                z: 12,
                color: "#3440FF",
                data: yData1
            },
            {
                yAxisIndex: 0,
                type: 'pictorialBar',
                symbolSize: [40 * scale, 8],
                symbolOffset: [-24 * scale, 4],
                z: 12,
                color: "rgba(126,192,238,0.6)",
                data: yData1
            },
            {
                name: '国家项目立项数',
                yAxisIndex: 0,
                type: 'bar',
                barWidth: 40 * scale,
                itemStyle:
                {
                    normal:
                    {
                        opacity: .7,
                        color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {
                                offset: 0,
                                color: 'blue'
                            },
                            {
                                offset: 1,
                                color: '#7EC0EE'
                            },
                        ]),
                        barBorderRadius: 0,
                    },
                },
                label:
                {
                    show: true,
                    position: ['10','-34'],
                    color: '#00f8ff',
                    fontSize: scale >= 1 ? 12 * scale : 12,
                },
                data: yData1
            },
            
            {
                yAxisIndex: 0,
                type: 'pictorialBar',
                symbolSize: [40 * scale, 8],
                symbolOffset: [24 * scale, -4],
                symbolPosition: 'end',
                z: 12,
                color: "#FF1155",
                data: yData2
            },
            {
                yAxisIndex: 0,
                type: 'pictorialBar',
                symbolSize: [40 * scale, 8],
                symbolOffset: [24 * scale, 4],
                color: "#FFC0CB",
                z: 12,
                data: yData2
            },
            {
                name: '省级项目立项数',
                yAxisIndex: 0,
                type: 'bar',
                barWidth: 40 * scale,
                itemStyle:
                {
                    normal:
                    {
                        opacity: .7,
                        color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {
                                offset: 0,
                                color: '#FF2246'
                            },
                            {
                                offset: 1,
                                color: '#FFC0CB'
                            },
                        ]),
                        barBorderRadius: 0,
                    }
    
                },
                label:
                {
                    show: true,
                    position: ['10','-34'],
                    color: '#00f8ff',
                    fontSize: scale >= 1 ? 12 * scale : 12,
                },
                data: yData2
            },
            
            {
                name: '国家项目投入经费',
                yAxisIndex: 1,
                type: 'line',
                symbolSize: 10,
                symbol: 'circle',
                itemStyle: {
                    normal: {
                        color: 'blue',
                        barBorderRadius: 0,
                    },
                },
                lineStyle: {
                    normal: {
                        width: 4,
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'blue'
                                },
                                {
                                    offset: 1,
                                    color: '#7EC0EE'
                                },
                            ],
                            global: false,
                        },
                    },
                },
                data: yData3,
            },
            
            {
                name: '省级项目投入经费',
                yAxisIndex: 1,
                type: 'line',
                symbolSize: 10,
                symbol: 'circle',
                itemStyle: {
                    normal: {
                        color: '#FF2246',
                        barBorderRadius: 0,
                    },
                },
                lineStyle: {
                    normal: {
                        width: 4,
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#FF2246'
                                },
                                {
                                    offset: 1,
                                    color: '#FFC0CB'
                                },
                            ],
                            global: false,
                        },
                    },
                },
                data: yData4,
            },
        ]
    };
    
    myChart.setOption(option);
</script>