Echarts柱状图效果背景

echarts yekong

Echarts柱状图效果背景


drawLine() {
                var that = this;
                var chartDom = document.getElementById('echarts1');
                var myChart = echarts.init(chartDom);
                var option = {
                    color: [
                        "rgba(0, 204, 255, 1)",
                        "rgba(39, 120, 255, 1)",
                        "rgba(72, 176, 255, 1)",
                        "rgba(91, 207, 255, 1)",
                        "rgba(108, 227, 255, 1)",
                        "rgba(119, 240, 240, 1)",
                    ],
                    grid: {
                        left: "3%",
                        right: "3%",
                        top: "12%",
                        bottom: "15%",
                        containLabel: true,
                    },
                    legend: {
                        x: 'center',
                        y: 'top',
                        itemWidth: 15,
                        itemHeight: 15,
                        textStyle: {
                            color: 'rgba(51, 51, 51, 1)'
                        },
                        itemGap: 20,
                    },
                    tooltip: {
                        show: true,
                        trigger: "axis",
                    },
                    xAxis: [
                        {
                            data: [
                                "1月",
                                "2月",
                                "3月",
                                "4月",
                                "5月",
                                "6月",
                                "7月",
                                "8月",
                                "9月",
                                "10月",
                                "11月",
                                "12月",
                            ],
                            axisLine: {
                                lineStyle: {
                                    color: "rgba(221, 221, 221, 1)",
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                color: "rgba(51, 51, 51, 1)",
                                fontSize: 12,
                            },
                        },
                    ],
                    yAxis: [
                        {
                            name: '单位:条',
                            nameTextStyle: {
                                color: 'rgba(51, 51, 51, 1)',
                                fontSize: 13,
                                padding: [0, 0, 0, -20]
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: "rgba(88, 118, 143, 1)",
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                color: "rgba(51, 51, 51, 1)",
                                fontSize: 13,
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: "rgba(221, 221, 221, 1)",
                                    type: 'dashed'
                                },
                            },
                            yAxisIndex: 0,
                        },
                    ],
                    series: [
                        {
                            name: "海关失信企业",
                            type: "bar",
                            barWidth: 12,
                            zlevel: 2,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 0,
                                    color: 'rgba(77, 169, 255, 1)',
                                },
                            },
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(245, 246, 250, 1)',
                            },
                            label: {
                                normal: {
                                    show: false,
                                    fontSize: 18,
                                    fontWeight: "bold",
                                    color: "#ffffff",
                                    position: "top",
                                },
                            },
                            data: [60, 79, 90, 13, 60, 80, 80, 60, 79, 90, 60, 80],
                        },
                        {
                            name: "跨境灰名单客户",
                            type: "bar",
                            barWidth: 12,
                            zlevel: 2,
                            yAxisIndex: 0,
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(245, 246, 250, 1)',
                            },
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 0,
                                    color: 'rgba(255, 121, 13, 1)',
                                },
                            },
                            label: {
                                normal: {
                                    show: false,
                                    fontSize: 18,
                                    fontWeight: "bold",
                                    color: "#ffffff",
                                    position: "top",
                                },
                            },
                            data: [60, 79, 90, 13, 60, 80, 80, 60, 79, 90, 13, 80],
                        },
                        {
                            name: "贸易便利化企业",
                            type: "bar",
                            barWidth: 12,
                            zlevel: 2,
                            yAxisIndex: 0,
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(245, 246, 250, 1)',
                            },
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 0,
                                    color: '#0CB7A1',
                                },
                            },
                            label: {
                                normal: {
                                    show: false,
                                    fontSize: 18,
                                    fontWeight: "bold",
                                    color: "#ffffff",
                                    position: "top",
                                },
                            },
                            data: [60, 79, 90, 13, 60, 80, 80, 60, 79, 90, 13, 80],
                        },
                        {
                            name: "其他",
                            type: "bar",
                            barWidth: 12,
                            zlevel: 2,
                            yAxisIndex: 0,
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(245, 246, 250, 1)',
                            },
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 0,
                                    color: '#0F99FA',
                                },
                            },
                            label: {
                                normal: {
                                    show: false,
                                    fontSize: 18,
                                    fontWeight: "bold",
                                    color: "#ffffff",
                                    position: "top",
                                },
                            },
                            data: [60, 79, 90, 13, 60, 80, 80, 60, 79, 90, 13, 80],
                        },
                    ],
                };
                myChart.clear();
                myChart.resize();
                myChart.setOption(option);
            },
喜欢