Echarts在线免费图表

 
            let myDate = ['教育文化', '交通运输', '生活服务', '气象服务', '工业农业', '商贸流通']
let numA = [9230, 8950, 13250, 7520, 9850, 7550]
let numB = [6, 6, 6, 6, 6, 6, 6];
// 最大值，用于设置背景柱体高度
let maxData = [15000, 15000, 15000, 15000, 15000, 15000,]
let option = {
    backgroundColor: '#031528',
    tooltip: {
        show: true,
        trigger: "axis", //axis , item
        backgroundColor: "RGBA(0, 49, 85, 0)",
        borderColor: "rgba(0, 151, 251, 1)",
        borderWidth: 1,
        borderRadius: 0,
        textStyle: {
            color: "#BCE9FC",
            fontSize: 16,
            align: "left"
        },
        formatter: (params, ticket, callback) => {
            const item = params[1];
            return item.name + " : " + item.value;
        },
    },
    grid: {
        borderWidth: 0,
        top: '10%',
        bottom: '12%',
        textStyle: {
            color: "#fff"
        }
    },
    calculable: true,
    xAxis: [{
        type: "category",
        axisLine: {
            lineStyle: {
                color: '#ffffff'
            }
        },
         axisLine: {
      show: false,
      lineStyle: {
        color: '#ffffff'
      }
    },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        splitArea: {
            show: false
        },
        axisLabel: {
            interval: 0,

        },
        axisLine: {
            show: false,
            lineStyle: {
                color: '#ffffff'
            }
        },
        data: myDate,
    }],
    yAxis: {
        type: 'value',
        axisLine: {
            show: false,
            lineStyle: {
                color: '#1C82C5'
            }
        },

        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(4, 187, 255, .2)',
                type: 'dashed'
            }
        },
        axisLabel: {
            textStyle: {
                color: '#fff',
                fontSize: '13px'
            }
        },
        axisTick: {
            show: false
        }
    },

    series: [{
        name: "",
        type: "bar",
        stack: "总量",
        barMaxWidth: 20,
        barGap: "200%",
        itemStyle: {
            normal: {
                show: true,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#49F4AD', // 柱子最高度% 处的颜色 
                }, {
                    offset: 1,
                    color: 'rgba(114, 235, 177,0)', // X轴处的颜色 #72EBB1
                }], false),
                barBorderRadius: 0,
                label: {
                    show: false, // 顶点的文字显示
                    position: "top",
                    color: '#56C1F8',
                    formatter: function (p) {
                        return p.value > 0 ? (p.value) : '';
                    }
                }
            },
        },
        data: numA,
    },
    // 柱体顶点1
    // {
    //     name: "",
    //     type: "bar",
    //     stack: "总量",
    //     barMaxWidth: 24,
    //     barGap: "10%",
    //     itemStyle: {
    //         normal: {
    //             show: true,
    //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    //                 offset: 0,
    //                 color: '#0CCCF5'
    //             }, {
    //                 offset: 1,
    //                 color: '#0CCCF5'
    //             }], false),
    //             barBorderRadius: 0,

    //         },
    //     },
    //     data: numB,
    // },
    // 柱体顶点2
    {
        type: 'scatter',
        name: '1111',
        yAxisIndex: 0,
        data: numA,
        symbol: 'rect',
        symbolSize: [30, 3],
        itemStyle: {
            color: '#fff',
        },
        hoverAnimation: false,
        silent: true,
        symbolOffset: ['0%', 0] // 位置
    },
        // {
        //     // 分隔
        //     type: "pictorialBar",
        //     tooltip: {
        //         show: false,
        //     },
        //     symbolRotate: "-45",
        //     itemStyle: {
        //         normal: {
        //             color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
        //                 offset: 0,
        //                 color: "#023D75",
        //             },
        //             {
        //                 offset: 1,
        //                 color: "#023D75",
        //             },
        //             ]),
        //         },
        //     },
        //     symbolRepeat: "fixed",
        //     symbolMargin: -8,
        //     symbol: "rect",
        //     symbolClip: true,
        //     symbolSize: [2, 28],
        //     symbolPosition: "start",
        //     symbolOffset: [-1, 10],
        //     data: numA,
        //     z: 66,
        //     animationEasing: "elasticOut",
        // },
        //  {
        //       name: "背景",
        //       type: "bar",
        //       barWidth: 50,
        //       barGap: "-100%",
        //       data: maxData,
        //       itemStyle: {
        //         normal: {
        //           color: "rgba(255, 255, 255, 0.1)",
        //         },
        //       },
        //     },
    ]
};